반응 아폴로 오류:불변 위반:컨텍스트에서 "클라이언트"를 찾을 수 없거나 옵션으로 전달되었습니다.

반응 아폴로 오류:불변 위반:컨텍스트에서 "클라이언트"를 찾을 수 없거나 옵션으로 전달되었습니다.

React, Apollo, Next.js를 사용하여 프로젝트를 만들고 있습니다.react-apollo를 3.1.3으로 업데이트하려고 하는데 사이트를 볼 때 다음과 같은 오류가 나타납니다.

불변 위반:컨텍스트에서 "클라이언트"를 찾을 수 없거나 옵션으로 전달되었습니다.루트 구성 요소를 에 랩하거나 옵션을 통해 ApolloClient 인스턴스를 전달합니다.

react-apollo 패키지를 2.5.8로 다운그레이드하면 문제없이 동작하기 때문에 2.5와 3.x 사이에 뭔가 변경이 있을 것으로 생각되지만 react-apollo 또는 next-with-apollo 문서에는 그 내용을 나타내는 내용이 없습니다.어떤 도움이라도 주시면 감사하겠습니다.

data.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.disples

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

GitHub 발행 스레드에서 누군가 말한 내용입니다.저도 마찬가지였습니다.꼭 드셔보세요!

여러 가지 솔루션이 혼재되어 있습니다.결론적으로 모든 관련 패키지를 처음에 어떻게 셋업하느냐에 따라 달라집니다.

「클라이언트를 응답에 접속할 때, 다른 패키지와 함께 동작하지 않는 패키지도 있습니다.Context.Provider"

정상적으로 동작하는 것 같은 수정을 2회 실시했습니다(새로운 프로젝트와 오래된 프로젝트 갱신).

1: 언인스톨@apollo/react-hooks

그 후, 다음과 같이 입력합니다.

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

다음 대신:

import { ApolloProvider } from "react-apollo";

(이를 통해 "@apollo/react-hooks" 패키지를 충돌 없이 유지할 수 있었습니다.)

3: 서비스를 제공하는 서버가HttpLink고객URI는 클라이언트가 접속하기 위해 가동하고 있습니다(이것에 의해, 이전에 말한 에러와는 다른 에러가 발생하지만, 이 경우에도 주의할 필요가 있습니다).

결론:약간의 시행착오가 있을 수 있지만 일치/페어링 패키지를 사용해 보십시오.

react-apollo를 제거하고 대신 @apollo/client를 사용했더니 문제가 해결되었습니다.

import gql from 'graphql-tag';
import {graphql} from '@apollo/react-hoc';
import { ApolloClient, InMemoryCache } from '@apollo/client';
import { ApolloProvider } from '@apollo/react-hooks';

이 수입품들은 나에게 완벽하게 작용했다.디버깅을 하고 여러 Import 라이브러리를 찾았는데 3시간 만에 드디어 graphql과 appolo를 사용할 수 있는 솔루션이 되었습니다.

이것도 해결책이라는 것을 알게 되었습니다만, 지금은 이 방법만을 사용하고 있습니다.@apollo/client ★★★★★★★★★★★★★★★★★」apollo-link최신 버전이기 때문에

'react-apollo' 또는 '@apollo/react-hooks' 대신 'apollo/client'에서 {ApolloProvider} 가져오기

언급URL : https://stackoverflow.com/questions/58475780/react-apollo-error-invariant-violation-could-not-find-client-in-the-context