React Apollo Error: Invariant Violation: Could not find "client" in the context or passed in as an option

Question

我正在使用 React、Apollo 和 Next.js 构建一个项目。我正在尝试将 react-apollo 更新到 3.1.3，现在在查看该站点时出现以下错误。

Invariant Violation: Could not find "client" in the context or passed in as an option. Wrap the root component in an , or pass an ApolloClient instance in via options.

如果我将 react-apollo 包降级到 2.5.8，它可以正常工作，所以我认为 2.5 和 3.x 之间发生了一些变化，但在 react-apollo 或下一个中找不到任何东西-with-apollo 文档来表明它可能是什么。如有任何帮助，我们将不胜感激。

withData.js

import withApollo from 'next-with-apollo';
import ApolloClient from 'apollo-boost';
import { endpoint } from '../config';

function createClient({ headers }) {
    return new ApolloClient({
        uri: endpoint,
        request: operation => {
            operation.setContext({
                fetchOptions: {
                    credentials: 'include'
                },
                headers
            });
        },
        // local data
        clientState: {
            resolvers: {
                Mutation: {}
            },
            defaults: {}
        }
    });
}

export default withApollo(createClient);

_app.js

import App from 'next/app';
import { ApolloProvider } from 'react-apollo';
import Page from '../components/Page';
import { Overlay } from '../components/styles/Overlay';
import withData from '../lib/withData';

class MyApp extends App {
    static async getInitialProps({ Component, ctx }) {
        let pageProps = {};
        if (Component.getInitialProps) {
            pageProps = await Component.getInitialProps(ctx);
        }

        // this exposes the query to the user
        pageProps.query = ctx.query;
        return { pageProps };
    }

    render() {
        const { Component, apollo, pageProps } = this.props;

        return (
            <ApolloProvider client={apollo}>
                <Overlay id="page-overlay" />
                <Page>
                    <Component {...pageProps} />
                </Page>
            </ApolloProvider>
        );
    }
}

export default withData(MyApp);

Answer 1

就我而言，我发现我安装了 react-apollo@3.0.1 以及 @apollo/react-hooks@3.0.0。删除 @apollo/react-hooks 并仅依赖 react-apollo 为我解决了不变的问题。确保您没有在锁定文件或 package.json

中使用任何不匹配的版本

这是有人在 GitHub 问题线程中所说的，我也是如此。一定要试试！

Answer 2

我发现这也是解决方案，但现在我只使用 @apollo/client 和 apollo-link，因为它们是最新版本。

Answer 3

我有多种解决方案，我认为这确实归结为您最初如何设置所有相关包。

"Some packages don't work well with others when it comes to connecting the client to Reacts Context.Provider"

我有两个似乎运行良好的两个修复程序（对于新项目和更新旧项目）：

1：卸载@apollo/react-hooks

然后：

import { ApolloProvider } from "@apollo/client";

而不是：

import { ApolloProvider } from "react-apollo";

（这让我可以保留“@apollo/react-hooks”包而不会发生冲突）

3：Double-check 服务于 HttpLink 客户端 URI 的服务器已启动并且运行客户端连接（这给出了不同的错误然后有人在谈论但在这种情况下仍然很高兴知道）

结论： 可能需要一点点试错，但请尝试使用 matching/pairing 包

Answer 4

我卸载了 'react-apollo'，改用“@apollo/client”，它解决了我的问题。

Answer 5

import gql from 'graphql-tag';
import {graphql} from '@apollo/react-hoc';
import { ApolloClient, InMemoryCache } from '@apollo/client';
import { ApolloProvider } from '@apollo/react-hooks';

这些导入非常适合我。我在调试和查找不同的导入库时玩得很开心，但最终在 3 小时后，这是使用 graphql 和 appolo 的解决方案。

Answer 6

从 'apollo/client' 导入 {ApolloProvider} 而不是 'react-apollo' 或 '@apollo/react-hooks'

React Apollo Error: Invariant Violation: Could not find "client" in the context or passed in as an option

React Apollo Error: Invariant Violation: Could not find "client" in the context or passed in as an option

apollo

reactjs

graphql

next.js