Apollo 2.1、Mutation 和 React-Router

Question

我是 Apollo 的新手，从 2.1 版开始。

我也使用 react-router，但我不知道如何在突变完成后进行 browserHistory.push。以下是我的部分代码：

index.js

const client = new ApolloClient({
    uri: "http://localhost:4000/graphql"
});


ReactDOM.render(
    <ApolloProvider client={client}>
        <AppContainer>

            <BrowserRouter basename={basename}>
                <I18nextProvider i18n={i18n}>
                    <Layout />
                </I18nextProvider>
            </BrowserRouter>

        </AppContainer>
    </ApolloProvider>,
    document.getElementById('react_root')
)

};

在 onCompleted 中，我想显示一个不同的页面来告诉用户检查电子邮件。但我不知道该怎么做。

RegistrationForm.js

import {browserHistory) from 'react-router';

const onCompleted = (data) => {
    browserHistory.push("/de/register/check-email");
}

const RegistrationForm = () => {


    return (
        <Mutation mutation={REGISTER_USER}
            onCompleted={onCompleted}

        >
            {(register, { data }) => (
                <div>
                    <Form
                        onSubmit={onSubmit}
                        render={({ handleSubmit, pristine, invalid, values, variables }) => (
                            <form onSubmit={(e, ) => {
                                e.preventDefault();
                                register({
                                    variables: {
                                        input: {
                                            username: values.username,
                                            email: values.email,
                                            password: values.password
                                        }
                                    }
                                });
                            }}
                            >
                                <div>
                                    <label>Username</label>
                                    <Field name="username" component="input" placeholder="Username" />
                                </div>
                                <div>
                                    <label>Email</label>
                                    <Field name="email" component="input" placeholder="Email" />
                                </div>
                                <div>
                                    <label>Password</label>
                                    <Field name="password" component="input" placeholder="Password" />
                                </div>
                                <button type="submit"  >Submit</button>

                            </form>
                        )}
                    />
                </div>
            )}
        </Mutation>
    );
};

有人知道怎么做吗？非常感谢您的帮助。

此致

Answer 1

我想我找到了解决办法。我将 history 作为调用组件的 prop 传递，然后使用：

const RegistrationFinalForm = ({ history }) => {
    return (
        <Mutation mutation={REGISTER_USER}
            onCompleted={(data) => {
                history.push("/de/register/check-email");
            }}>

Answer 2

react-router 中没有导出 browserHistory，但是有一个 history 属性。

如果您的组件直接在 <Route> 下，您可以这样使用它：

const RegistrationForm = ({history}) => {
  const onCompleted = (data) => {
    history.push("/de/register/check-email");
  }

  return (
  ..

如果您的组件在树中更深，您可以使用 withRouter 注入 history 和其他路由道具，例如：

const RegistrationFormWrapped = withRouter(RegistrationForm);

或

export default withRouter(RegistrationForm);

并且因为 onCompleted 现在依赖于一个道具并且需要是本地的，所以将 RegistrationForm 转换为 class 是有意义的。

Apollo 2.1、Mutation 和 React-Router

Apollo 2.1, Mutation and React-Router

mutation

reactjs

react-apollo

react-router-v4