Question

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

不变违反：在上下文中找不到“客户端”或作为选项传递。将根组件包装在或通过选项传递ApolloClient实例。

如果我将react-apollo软件包降级到2.5.8，它可以正常工作，所以我认为在2.5和3.x之间已经有所变化，但是在react-apollo或next-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

我卸载了'react-apollo'，改为使用'@ apollo / client'，它为我解决了这个问题。

Answer 4

我混合了各种解决方案，我认为这确实归结于您最初如何设置所有相关软件包。 “在将客户端连接到Reacts Context.Provider时，某些软件包不能与其他软件包很好地兼容”

我已经进行了两项修正，看起来很不错（使用新项目并更新旧版本）：

1：卸载“ @ apollo / react-hooks”

2：从“ @ apollo / client”导入{ApolloProvider}；代替从“ react-apollo”导入{ApolloProvider}；（这使我可以保留“ @ apollo / react-hooks”程序包而不会发生冲突）

3：仔细检查提供HttpLink客户端URI的服务器是否已启动并正在运行，以使客户端可以连接（这与正在讨论的错误不同，但在这种情况下仍然很了解）

结论：这可能会有点儿反复试验，但是请尝试使用匹配/配对包

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错误：始终违反：在上下文中找不到“客户端”或作为选项传递

6 个答案: