React Apollo 错误:不变违规:在上下文中找不到“客户端”或作为选项传入

IT技术 reactjs graphql apollo next.js
2021-03-25 04:36:09

我正在使用 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);

6个回答

就我而言,我发现我已经react-apollo@3.0.1安装了@apollo/react-hooks@3.0.0. 删除@apollo/react-hooks并仅依靠react-apollo修复了我的不变问题。确保您没有在锁定文件中使用任何不匹配的版本或package.json

这是某人在 GitHub 问题线程中所说的,这对我来说也是如此。一定要试试!

@DannyRosenblatt 对我来说也是如此,我认为大多数在线教程都遵循从“react-apollo”而不是 @apollo/react-hooks 导入 ApolloProvider 的方法。
2021-06-03 04:36:09
apollo v2 的文档很糟糕——如果你想使用 React 组件而不是钩子,你需要手动安装 @apollo/react-components 并从那里导入所有内容。它在任何地方都没有说,必须努力弄清楚。
2021-06-10 04:36:09
对我来说类似的情况 - 我一直从 react-apollo 导入 ApolloProvider 但从 @apollo/react-hooks 导入 useQuery。从 @apollo/react-hooks 导入 ApolloProvider 为我解决了这个问题。
2021-06-16 04:36:09
然后还有react-apollo-hooksvs @apollo/react-hooks- 你想要后者,当心!
2021-06-19 04:36:09

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

“在将客户端连接到 Reacts 时,有些包不能很好地与其他包配合使用Context.Provider

我有两个似乎运行良好的修复程序(使用新项目和更新旧项目):

1:卸载 @apollo/react-hooks

然后:

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

代替:

import { ApolloProvider } from "react-apollo";

(这让我可以在没有冲突的情况下保留“@apollo/react-hooks”包)

3:仔细检查为HttpLink客户端提供服务的服务器是否URI已启动并正在运行以供客户端连接(这给出了与正在谈论的不同的错误,但在这种情况下仍然很高兴知道)

结论:可能会有点试错,但尽量使用匹配/配对包

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 的解决方案。

我卸载了“react-apollo”,改用“@apollo/client”,它为我解决了这个问题。

我发现这也是解决方案,尽管现在我只使用@apollo/client并且apollo-link因为它们是最新版本。

你找到了解决办法吗?
2021-06-18 04:36:09