反应阿波罗错误:始终违规:找不到“客户端".在上下文中或作为选项传递 [英] React Apollo Error: Invariant Violation: Could not find "client" in the context or passed in as an option

问题描述

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

I'm building a project using React, Apollo and Next.js. I'm trying to update react-apollo to 3.1.3 and I'm now getting the following error when viewing the site.

不变违反:在上下文中找不到客户端"或作为选项传递.将根组件包装在中，或通过options传递ApolloClient实例.

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或next-with-apollo中找不到任何内容说明可能是什么的文档.任何帮助将不胜感激.

If I downgrade the react-apollo package to 2.5.8 it works without issue so I'm thinking something has changed between 2.5 and 3.x but can't find anything in the react-apollo or next-with-apollo documentation to indicate what that might be. Any assistance would be greatly appreciated.

withData.js

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);

推荐答案

就我而言，我发现我同时安装了react-apollo@3.0.1和@apollo/react-hooks@3.0.0.删除@apollo/react-hooks并仅依靠react-apollo修复了我的不变性问题.确保您的锁定文件或package.json

In my case, I found that I had react-apollo@3.0.1 installed as well as @apollo/react-hooks@3.0.0. Removing @apollo/react-hooks and just relying on react-apollo fixed the invariant issue for me. Make sure that you aren't using any mismatched versions in your lock file or package.json

这是某人在GitHub问题线程中所说的，我也是这种情况.确保尝试一下！

This is what someone said in a GitHub issue thread, which, was the case for me too. Make sure you try it!

这篇关于反应阿波罗错误:始终违规:找不到“客户端".在上下文中或作为选项传递的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！