Reaction-Apollo：在上下文中找不到&quot；客户端&，或作为选项传入

本教程将介绍Reaction-Apollo：在上下文中找不到&quot；客户端&，或作为选项传入的处理方法，这篇教程是从别的地方看到的，然后加了一些国外程序员的疑问与解答，希望能对你有所帮助，好了，下面开始学习吧。

问题描述

我正在开发一个使用Reaction和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 introspectionfrom '../../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是一个遗留组件，不幸的是我无法更改它。
此错误的原因是什么？怎么修复？

推荐答案

问题在@apollo/react-hoc和@apollo/react-components版本中。如package.json所示，components有版本3.1.3，hoc有3.1.2。

好了关于Reaction-Apollo：在上下文中找不到&quot；客户端&，或作为选项传入的教程就到这里就结束了，希望趣模板源码网找到的这篇技术文章能帮助到大家，更多技术教程可以在站内搜索。