web-dev-qa-db-fra.com

Réinitialiser le magasin après la déconnexion avec le client Apollo

J'essaie de réinitialiser le magasin après la déconnexion dans mon application react-apollo.

J'ai donc créé une méthode appelée "déconnexion" qui est appelée lorsque je clique sur un bouton (et transmise par les accessoires "onDisconnect").

Pour ce faire, j'ai essayé de suivre cet exemple: https://www.apollographql.com/docs/react/recipes/authentication.html

Mais dans mon cas, je veux LayoutComponent en tant que HOC (et c'est sans requête GraphQL).

Voici ma composante:

import React, {Component} from 'react';
import { withApollo, graphql } from 'react-apollo';
import { ApolloClient } from 'apollo-client';

import AppBar from 'material-ui/AppBar';
import Sidebar from 'Sidebar/Sidebar';
import RightMenu from 'RightMenu/RightMenu';

class Layout extends Component {
constructor(props) {
    super(props);        
}

logout = () => {
    client.resetStore();
    alert("YOUHOU");
}

render() {
    return (
        <div>
            <AppBar title="myApp" iconElementRight={<RightMenu onDisconnect={ this.logout() } />} />
        </div>
    );
}
}

export default withApollo(Layout);

Le problème ici est que "client" n'est pas défini et je ne peux pas me déconnecter correctement. Avez-vous une idée pour m'aider à gérer cette situation ou un exemple/les meilleures pratiques pour vous déconnecter du client apollo?

Merci d'avance

reactjsapolloreact-apolloapollo-client
9
Putxe

Si vous devez vider votre cache et ne souhaitez pas récupérer toutes les requêtes actives, vous pouvez utiliser:

client.cache.reset()

client étant votre client Apollo.

Gardez à l'esprit que cela ne déclenchera PAS l'événement onResetStore.

11
anthonator

client.resetStore () ne réinitialise pas réellement le magasin. Il récupère toutes les requêtes actives

La déclaration ci-dessus est très correcte.

J'avais aussi le problème lié à la déconnexion. Après avoir utilisé client.resetStore() Il a récupéré toutes les requêtes en attente, donc si vous déconnectez l'utilisateur et supprimez le jeton de session après la déconnexion, vous obtiendrez des erreurs d'authentification.

J'ai utilisé l'approche ci-dessous pour résoudre ce problème -

<Mutation
    mutation={LOGOUT_MUTATION} 
                onCompleted={()=> {
                  sessionStorage.clear()
                  client.clearStore().then(() => {
                    client.resetStore();
                    history.Push('/login')
                  });
                }}
              >
                {logout => (
                  <button
                    onClick={() => {
                      logout();
                    }}
                  >
                    Logout <span>{user.userName}</span>
                  </button>
                )}
              </Mutation>

Une partie importante est cette fonction -

onCompleted={()=> {
                  sessionStorage.clear(); // or localStorage
                  client.clearStore().then(() => {
                    client.resetStore();
                    history.Push('/login') . // redirect user to login page
                  });
                }}
7
WitVault

Tu étais très proche!

Au lieu de client.resetStore () cela aurait dû être this.props.client.resetStore ()

withApollo () créera un nouveau composant qui passe dans une instance d'ApolloClient comme accessoire client.

import { withApollo } from 'react-apollo';

class Layout extends Component {
  ...
  logout = () => {
    this.props.client.resetStore();
    alert("YOUHOU");
  }
  ...
}

export default withApollo(Layout);

Pour ceux qui ne sont pas sûrs des différences entre resetStore et clearStore :

resetStore ()

Réinitialise l'intégralité de votre magasin en vidant votre cache, puis en réexécutant toutes vos requêtes actives. Cela vous permet de garantir qu'il ne reste aucune donnée dans votre magasin à partir du moment où vous avez appelé cette méthode.

clearStore ()

Supprimez toutes les données du magasin. Contrairement à resetStore, clearStore ne récupérera aucune requête active.

3
JSON C11