web-dev-qa-db-fra.com

Apollo GraphQl réagit. Comment vider le cache des requêtes pour toutes les combinaisons de variables?

J'utilise apollo graphql dans mon application React. Disons que j'ai la requête suivante:

query ListQuery($filter: String!) {
   items(filter: $filter) {
     id
     name
   }
}

Cette requête me permet d'interroger une liste d'éléments à l'aide d'un filtre. Supposons que j'utilise la chaîne de filtrage A, puis la chaîne de filtrage B. Le cache contient désormais deux entrées: ListQuery (A) et ListQuery (B).

Supposons maintenant que j'utilise une mutation pour ajouter un nouvel élément. Comment puis-je supprimer toutes les requêtes mises en cache du cache? Dans ce cas, je souhaite supprimer à la fois ListQuery (A) et ListQuery (B) du cache.

Comment puis-je accomplir cela?

cachingreact-apollo
20
Andy Hansen

Dans votre cas, vous pouvez utiliser la méthode apollo client.resetStore ();

Il effacera le cache précédent, puis chargera les requêtes actives.

5
Nitin

Il semble que ce dont vous avez besoin soit refetchQueries option/prop à définir sur un tableau de chaînes de noms de requête. La documentation indique que:

Si options.refetchQueries est un tableau de chaînes, Apollo Client recherchera toutes les requêtes portant les mêmes noms que les chaînes fournies et récupérera ces requêtes avec leurs variables actuelles.

Ainsi, comme exemple d'utilisation de graphql HOC, vous pouvez essayer de faire:

function SomeComponent(props) {

  const performMutation = () => {
    props.doStuff({ refetchQueries: ["ListQuery"] })
      .then(/* ... */)
      .catch(/* ... */)
  }

  return (/* ... */)
}

export default graphql(DO_STUFF, { name: "doStuff" })(SomeComponent)

Ou avec le composant Mutation:

function SomeComponent(props) {
  return (
    <Mutation
      mutation={DO_STUFF}
      refetchQueries={mutationResult => ["ListQuery"]}>
      {(doStuff, { loading, error }) => {
        /* ... */
      }}
    </Mutation>
  );
}

Si cela ne fait pas ce dont vous avez besoin, il y a aussi un solution de contournement utilisant l'option update .

J'espère que cela t'aides.

1
streletss