React Erreur Apollo: Invariante Violation: Impossible de trouver "client" dans le contexte ou est passé en option

Question

Je construis un projet utilisant React, Apollo et Next.js. J'essaie de mettre à jour React-Apollo à 3.1.3 et je reçois maintenant l'erreur suivante lors de la visualisation du site.

Violation invariante: Impossible de trouver un "client" dans le contexte ou est passé en option. Enveloppez le composant racine dans un ou transmettez une instance d'apolloclient dans Via Options.

Si je déclenche le paquet de réacteur-Apollo à 2.5.8, cela fonctionne sans problème, je pense que quelque chose a changé entre 2,5 et 3.x mais ne peut rien trouver dans la documentation React-Apollo ou Next-Apollo pour indiquer ce que cela pourrait être. Toute assistance sera grandement appréciée.

withtata.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

Dans mon cas, j'ai trouvé que j'avais [email protected] installé ainsi que @apollo/[email protected]. Suppression @apollo/react-hooks et juste en train de s'appuyer sur react-apollo Correction du problème invariant pour moi. Assurez-vous que vous n'utilisez aucune version incompatible dans votre fichier de verrouillage ou package.json

C'est ce que quelqu'un a dit dans un fil d'émission Github, qui était le cas pour moi aussi. Assurez-vous d'essayer!