Apollo 客户端错误：在上下文中找不到“客户端”或作为选项传入。将根组件包装在 <ApolloProvider> 中

Posted 2023-03-08

【中文标题】Apollo 客户端错误：在上下文中找不到“客户端”或作为选项传入。将根组件包装在 <ApolloProvider> 中

【英文标题】：Apollo Client Error: Could not find "client" in the context or passed in as an option. Wrap the root component in an <ApolloProvider>

【发布时间】：2021-04-19 03:38:02

【问题描述】：

我是新来做这个阿波罗。

我目前正在尝试使用 React 和 Apollo 创建一个应用程序。

当我启动我的应用程序时，我收到以下错误：

在上下文中找不到“客户端”或作为选项传入。将根组件包裹在 中，或通过选项传入 ApolloClient 实例。

Here is my RegisterController -> index.tsx

import * as React from "react";
import  ChildMutateProps, graphql  from 'react-apollo';
import gql from 'graphql-tag';

interface Props 
  children: (
    data:  submit: (values: any) => Promise<null> 
  ) => JSX.Element | null;


class C extends React.PureComponent<ChildMutateProps<Props, any, any>> 
  submit = async (values: any) => 
    console.log(values);

    const response = await this.props.mutate(
      variables: values
    );

    console.log('response: ', response);

    return null;
  ;

  render() 
    return this.props.children( submit: this.submit );
  


const registerMutation = gql`
  mutation($email: String!, $password: String!) 
    register(email: $email, password: $password) 
      path
      message
    
  
`;

export const RegisterController = graphql(registerMutation)(C);

这是我的主要 index.tsx

import React from 'react';
import ReactDOM from 'react-dom';

import reportWebVitals from './reportWebVitals';
import  ApolloProvider  from 'react-apollo';
import  client  from './apollo';
import  Routes  from './routes';
import "./index.css";

ReactDOM.render(
  <ApolloProvider client=client>
    <React.StrictMode>
      <Routes />
    </React.StrictMode>
  </ApolloProvider>,
  document.getElementById('root')
);

最后，这是我的 package.json

  "name": "@abb/controller",
  "version": "1.0.0",
  "main": "dist/index.js",
  "typings": "dist/index.d.ts",
  "license": "MIT",
  "scripts": 
    "build": "rm -rf ./dist && tsc"
  ,
  "dependencies": 
    "graphql": "^15.4.0",
    "graphql-tag": "^2.11.0",
    "react": "^17.0.1",
    "react-apollo": "^3.1.5",
    "react-dom": "^17.0.1"
  ,
  "devDependencies": 
    "@types/node": "^14.14.20",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "tslint": "^6.1.3",
    "tslint-config-prettier": "^1.18.0",
    "typescript": "^4.1.3"
  

正如您在我的 index.tsx 中看到的，它被 ApolloProvider 包裹，客户端传入其中。 为什么我收到此错误？ 谁能帮我解决这个问题？

谢谢。

【参考方案1】：

react-apollo 已弃用。

React Apollo 功能现在可以直接从 @apollo/客户端

在这里阅读： https://github.com/apollographql/react-apollo#readme

显然，问题在于您的软件包的版本（apollo V3 将一些客户端软件包分组以避免这些问题）。阅读更多：https://www.apollographql.com/docs/react/migrating/apollo-client-3-migration/。

使用 apollo 客户端 v3（自 2020 年 6 月起）

改为使用apollo-client: https://github.com/apollographql/apollo-client。

命令：

npm install @apollo/client

导入：

import  ApolloProvider  from '@apollo/client'

按照此分步示例进行操作： https://www.apollographql.com/docs/react/get-started/

【讨论】：

我的代码与@Eunicorn 完全相同，我迁移到@apollo/client 但由于某些原因我仍然遇到同样的问题。你解决了吗？

【参考方案2】：

就我而言，我可以通过将客户端值传递到查询挂钩来解决此问题，如下所示：

  import  appClient  from 'src/config/apollo'; //this is a config file in my repo where I'm defining the client location/info
  import  useGetMyDataQuery  from '../documents/GetMyData.generated'; // the React/Typscript file generated from the GraphQL query file
  ...
  const  loading, data, error  = useGetMyDataQuery(
    client: appClient,
  );

而在更改之前，我的查询挂钩如下所示：

  const  loading, data, error  = useGetMyDataQuery();

【参考方案3】：

我幸运地将@apollo/client 从v3.5.x 降级到v3.4.17，并且我的测试（这是我遇到此错误的地方）再次开始通过。

npm i @apollo/client@3.4.17