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

lb3vh1jj  于 2023-03-29  发布在  React
关注(0)|答案(7)|浏览(162)

我正在使用React,Apollo和Next.js构建一个项目。我试图将react-apollo更新到3.1.3,现在查看网站时出现以下错误。
不变违背:在上下文中找不到或作为选项传入的“client”。请将根组件 Package 在中,或通过选项传入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);
w8ntj3qf

w8ntj3qf1#

在我的例子中,我发现我安装了react-apollo@3.0.1@apollo/react-hooks@3.0.0。删除@apollo/react-hooks并仅依赖react-apollo为我修复了不变的问题。请确保您没有在锁定文件或package.json中使用任何不匹配的版本
这是有人在GitHub的issue thread中说的,我也是这样。一定要试试!

i1icjdpr

i1icjdpr2#

我有一个混合的解决方案,我认为它确实归结为你最初如何去设置所有相关的软件包。
“当涉及到将客户端连接到React Context.Provider时,一些包不能与其他包很好地工作”
我有两个去两个修复,似乎工作得很好(与新项目和更新旧):
1:卸载@apollo/react-hooks
然后:

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

而不是:

import { ApolloProvider } from "react-apollo";

(This允许我保留“@apollo/react-hooks”包而不发生冲突)
3:仔细检查为HttpLink客户端URI提供服务的服务器是否已启动并正在运行,以便客户端连接(这给予了一个不同的错误,但在这种情况下仍然很好)

**结论:**这可能需要一些反复试验,但请尝试使用匹配/配对软件包

8i9zcol2

8i9zcol23#

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

lg40wkob

lg40wkob4#

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

nvbavucw

nvbavucw5#

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

kjthegm6

kjthegm66#

从'apollo/client'导入{ApolloProvider},而不是'react-apollo'或'@apollo/react-hooks'

wlp8pajw

wlp8pajw7#

我遇到了同样的问题,以下为我解决了这个问题:

"resolutions": {
    "@apollo/react-common": "3.1.3",
    "@apollo/react-hooks": "3.1.3",
  },

相关问题