7
votes

React Apollo Error: Invariant Violation: Impossible de trouver "client" dans le contexte ou transmis en option

Je construis un projet en utilisant React, Apollo et Next.js. J'essaye de mettre à jour react-apollo vers 3.1.3 et j'obtiens maintenant l'erreur suivante lors de la visualisation du site.

Violation invariante: Impossible de trouver "client" dans le contexte ou transmis en option. Enveloppez le composant racine dans une ou passez une instance ApolloClient dans via des options.

Si je rétrograde le paquet react-apollo vers 2.5.8, cela fonctionne sans problème donc je pense que quelque chose a changé entre 2.5 et 3.x mais je ne trouve rien dans la documentation react-apollo ou next-with-apollo pour indiquer ce que cela pourrait être. Toute assistance sera grandement appréciée.

withData.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);

_app.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);


0 commentaires

4 Réponses :


24
votes

Dans mon cas, j'ai trouvé que react-apollo@3.0.1 était installé ainsi que @apollo/react-hooks@3.0.0 . La suppression de @apollo/react-hooks et de simplement compter sur react-apollo résolu le problème invariant pour moi. Assurez-vous que vous n'utilisez pas de versions incompatibles dans votre fichier de verrouillage ou package.json

C'est ce que quelqu'un a dit dans un fil de discussion GitHub, ce qui était le cas pour moi aussi. Assurez-vous de l'essayer!


3 commentaires

Ensuite, il y a aussi react-apollo-hooks vs @apollo/react-hooks - vous voulez ce dernier, faites attention!


Cas similaire pour moi: j'avais importé ApolloProvider de react-apollo mais importé useQuery de @ apollo / react-hooks. L'importation d'ApolloProvider depuis @ apollo / react-hooks a résolu le problème pour moi.


@DannyRosenblatt c'était le cas pour moi aussi, je pense que la plupart des tutoriels en ligne suivent l'approche consistant à importer l'ApolloProvider depuis 'react-apollo' au lieu de @ apollo / react-hooks.



3
votes

J'ai trouvé que c'était aussi la solution, même si maintenant je n'utilise que @apollo/client et apollo-link car il s'agit de la dernière version.


0 commentaires

0
votes

J'ai eu un mélange de solutions, je pense que cela se résume à la façon dont vous configurez initialement tous les packages associés. "Certains packages ne fonctionnent pas bien avec d'autres lorsqu'il s'agit de connecter le client à Reacts Context.Provider"

J'ai eu deux correctifs qui semblent bien fonctionner (avec les nouveaux projets et la mise à jour des anciens):

1: Désinstaller «@ apollo / react-hooks»

2: importez {ApolloProvider} depuis "@ apollo / client"; au lieu d'importer {ApolloProvider} depuis "react-apollo"; (Cela m'a permis de conserver le paquet "@ apollo / react-hooks" sans conflits)

3: Vérifiez à nouveau que le serveur qui sert l'URI du client HttpLink est opérationnel pour que le client se connecte (cela donne une erreur différente de celle dont parlait mais il est toujours bon de savoir dans cette situation)

Conclusion: cela peut être un peu d'essais et d'erreurs, mais essayez d'utiliser les packages de correspondance / couplage


0 commentaires

0
votes

J'ai désinstallé 'react-apollo', utilisé '@ apollo / client' à la place, cela a résolu le problème pour moi.


1 commentaires

Ce n'est pas une réponse. Veuillez envisager de laisser un commentaire à la place.