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屋！