Question

我正在使用React和Apollo GraphQL开发一个Web应用程序。多数情况下，我使用@apollo/react-hoc，但是某些旧组件使用@apollo/react-components。目前，我无法重构这些组件。将路由移动到单独的文件后，我开始遇到此问题：

application-b17cb4b752e454bf66e1.js:303755 Uncaught Invariant Violation: Could not find "client" in the context or passed in as an option. 
Wrap the root component in an <ApolloProvider>, or pass an ApolloClient instance in via options.

相关文件：

App.jsx：

import {ApolloProvider}                              from '@apollo/react-hoc';
import ApolloClient                                  from 'apollo-boost';
import {InMemoryCache, IntrospectionFragmentMatcher} from 'apollo-cache-inmemory';
import React                                         from 'react';
import {BrowserRouter}                               from 'react-router-dom';
import introspection                                 from '../../graphql/introspection.json';
import Routes                                        from './routing/Routes';

const fragmentMatcher = new IntrospectionFragmentMatcher({
  introspectionQueryResultData: introspection.data
});

const cache = new InMemoryCache({fragmentMatcher});

const client = new ApolloClient({
  cache,
  fetchOptions: {
    credentials: 'same-origin'
  }
});

class App extends React.Component {
  render() {
    return (
      <ApolloProvider client={client}>
        <BrowserRouter>
          <Routes/>
        </BrowserRouter>
      </ApolloProvider>
    );
  }
}

Login.jsx（此处的Mutation组件会导致该错误）：

import {Mutation}                  from '@apollo/react-components';

import {gql}                     from 'apollo-boost';

import {Formik} from 'formik';
import React    from 'react';

import {Redirect, withRouter} from 'react-router-dom';

import '../../styles/main';

const LOGIN = gql`mutation Login($email:String!, $password:String!){
                            login(email: $email, password: $password){token user{email id name}}
                        }`;

class Login extends React.Component {
  constructor(props) {
    super(props);

    this.state = {};
  }

  render() {
    if (this.state.redirectToReferrer) {
      const {from} = this.props.location.state || {from: {pathname: '/'}};
      return <Redirect to={from}/>;
    }

    return (
      <div className={'ui-login-background'}>
        <div className={'ui-login-form-container'}>
          <Mutation
            mutation={LOGIN}
            update={(cache, response) => {
              cache.writeQuery({
                query: gql`{me{id}}`,
                data: {me: response.data.login.user}
              });
            }}>
            {(login) => (
              <Formik
                initialValues={{email: '', password: ''}}
                onSubmit={(values, {setSubmitting}) => {
                  login({variables: values})
                    .then(({data}) => {
                      if (data && data.login && data.login.token) {
                        this.setState({
                          redirectToReferrer: true
                        });
                      } else {
                        this.setState({loginFailed: true});
                      }
                    });
                  setSubmitting(false);
                }}
                render={
                  () => ...markup...
                }/>
            )}
          </Mutation>
        </div>
      </div>
    );
  }
}

export default withRouter(Login);

包装依赖项：

{
  "dependencies": {
    "@apollo/react-components": "^3.1.3",
    "@apollo/react-hoc": "^3.1.2",
    "@jbuschke/formik-antd": "^1.2.1",
    "apollo-boost": "^0.4.3",
    "apollo-cache-inmemory": "^1.6.3",
    "graphql": "^14.4.2",
    "graphql-tag": "latest",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-router-dom": "^5.0.1"
    // ...and more...
  }
}

Login.jsx是一个遗留组件，很遗憾，我无法更改。该错误的原因是什么？如何解决？

Answer 1

问题出在@apollo/react-hoc和@apollo/react-components版本中。从package.json可以看出，components的版本为3.1.3，而hoc的版本为3.1.2。

React-Apollo：在上下文中找不到“客户端”或作为选项传递

1 个答案: