反应-阿波罗:无法在上下文中找到“客户端”或作为选项传入。

Question

我正在开发一个带有React和阿波罗GraphQL的网络应用程序。大多数时候我使用@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。