React Apollo 错误:不变违规:找不到“客户端"在上下文中或作为选项传入 [英] 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.

不变违规:无法在上下文中找到客户端"或作为选项传入.将根组件包裹在一个 中，或者通过选项传递一个 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!

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