web-dev-qa-db-fra.com

Suppression du cache du client Apollo pour une requête donnée et chaque ensemble de variables

J'ai une liste filtrée d'articles basée sur une requête getAllItems, qui prend un filtre et une commande par option comme arguments.

Après avoir créé un nouvel élément, je souhaite supprimer le cache de cette requête, quelles que soient les variables transmises. Je ne sais pas comment faire ça.

Je ne pense pas que la mise à jour du cache soit une option. Les méthodes mentionnées dans la documentation d'Apollo Client ( Mise à jour du cache après une mutation , refetchQueries et update ) semblent toutes avoir besoin d'un ensemble donné de variables, mais puisque le filtre est un objet complexe (avec quelques informations textuelles), je devrais mettre à jour le cache pour chaque ensemble donné de variables qui ont été soumises précédemment. Je ne sais pas comment faire ça. De plus, seul le serveur sait comment ce nouvel article affecte la pagination et la commande.

Je ne pense pas fetch-policy (par exemple en le définissant sur cache-and-network) est ce que je recherche, car si l'accès au réseau est ce que je veux après avoir créé un nouvel élément, lorsque je filtre simplement la liste (en tapant une chaîne pour rechercher), je veux rester avec le comportement par défaut (cache-only).

client.resetStore réinitialiserait le magasin pour tous les types de requêtes (pas seulement la requête getAllItems), donc je ne pense pas que ce soit ce que je recherche non plus.

Je suis sûr que je manque quelque chose ici.

graphqlreact-apolloapollo-client
15
Jean-Baptiste Rudant

Il n'y a pas de méthode officiellement prise en charge dans la version actuelle d'Apollo, mais il existe une solution de contournement.

Dans votre fonction de mise à jour, après avoir créé un élément, vous pouvez parcourir le cache et supprimer tous les nœuds où la clé commence par le nom de type que vous essayez de supprimer du cache. par exemple.

// Loop through all the data in our cache
// And delete any items where the key start with "Item"
// This empties the cache of all of our items and 
// forces a refetch of the data only when it is next requested.
Object.keys(cache.data.data).forEach(key => 
  key.match(/^Item/) && cache.data.delete(key)
)

Cela fonctionne pour les requêtes qui existent plusieurs fois dans le cache avec différentes variables, c'est-à-dire les requêtes paginées.

J'ai écrit un article sur Medium qui donne beaucoup plus de détails sur la façon dont cela fonctionne ainsi qu'un exemple de mise en œuvre et une solution alternative plus compliquée mais qui fonctionne mieux dans un petit nombre de cas d'utilisation. Puisque cet article va plus en détail sur un concept que j'ai déjà expliqué dans cette réponse, je pense qu'il est correct de partager ici: https://medium.com/@martinseanhunt/how-to-invalidate-cached -data-in-apollo-and-handle-update-paginated-queries-379e4b9e4698

3
Martin Hunt

ngrx comme

resolvers = {
    removeTask(
       parent,
       { id },
       { cache, getCacheKey }: { cache: InMemoryCache | any; getCacheKey: any }
     ) {
       const key = getCacheKey({ __typename: "Task", id });
       const { [key]: deleted, ...data } = cache.data.data;
       cache.data.data = { ...data };
       return id;
     }
}
0
Pedro Lescano