如何在 Apollo / GraphQL 发生突变后更新缓存？

Posted 2023-03-08

【中文标题】如何在 Apollo / GraphQL 发生突变后更新缓存？

【英文标题】：How do I update the cache after a mutation in Apollo / GraphQL?

【发布时间】：2021-03-24 03:06:54

【问题描述】：

首先，感谢您花时间阅读本文。

我尝试在基于几种方法的突变后更新缓存。

起初，我在考虑使用上下文，但是当我阅读文档时，我意识到这种方法对于 Apollo 来说是不必要的，因为状态存储在缓存中。

我一直在探索这些文件： Making all other cache updates; update cache after a mutation; automatically update Apollo cache after mutation; updating client cache after mutation

我倾向于第一个链接中提到的方法，因为它是官方文档。

我的一些问题：

我是否遗漏了一些基本的东西？ 这是一个简单的错误吗？就像某处提到的错误变量一样。 我需要在某处查询 GET_LINKS 吗？

下面是代码块供参考：

const [createLink] = useMutation(CREATE_LINK);
  function handleSubmit(e) 
    e.preventDefault();
    createLink(
      variables: 
        slug: state.slug,
        description: state.description,
        link: state.link
      ,
      update(cache,  data:  createLink  ) 
        console.log(cache);
        cache.modify(
          fields: 
            links(allLinks = []) 
              const newLinkRef = cache.writeFragment(
                data: createLink,
                fragment: gql`
                  fragment NewLink on Link 
                    id
                    slug
                    description
                    link
                    shortLink
                  
                `
              );
              return [...allLinks, newLinkRef];
            
          
        );
      
    );
    setState(
      slug: "",
      description: "",
      link: ""
    );
  

这是完整的代码库供参考： codesandbox.io

【问题讨论】：

mutation 总是失败（'xxx 已经存在'）然后没有调用 update ... 突变不包含 id 然后片段确实没有所有必需的数据 ... 使用 readQuery，更简单...apollographql.com/docs/react/caching/cache-interaction/…

嗨 xadm - 感谢您的想法。由于我后端的错误，突变总是失败。突变现在应该起作用了。但是更新不起作用。我从片段中删除了 id。现在应该更新工作吗？我现在正在阅读 readQuery。

allLinks(prevLinks = []) as allLinks 是一个“字段”，一个用于查询的缓存条目...插入debugger 并探索缓存/数据/结构...需要“id”道具缓存

编辑了一些变量。添加了id。你能详细说明一下领域吗？我目前收到gql is not defined 错误。看起来引用错误可能是语法错误，但我不确定错误发生在哪里。

import gql from "@apollo/client";

【参考方案1】：

感谢 xadm 的想法。我最终使用了update。我将更新代码块从handleSubmit 函数中移到了useMutation 函数中。

工作代码块：

const [createLink] = useMutation(CREATE_LINK, 
    update(cache,  data:  createLink  ) 
      debugger;
      cache.modify(
        fields: 
          allLinks(existingLinks = []) 
            const newLinkRef = cache.writeFragment(
              data: createLink,
              fragment: gql`
                fragment NewLink on Link 
                  id
                  slug
                  description
                  link
                
              `
            );
            return [...existingLinks, newLinkRef];
          
        
      );
    
  );
  function handleSubmit(e) 
    e.preventDefault();
    createLink(
      variables: 
        slug: state.slug,
        description: state.description,
        link: state.link
      
    );
    setState(
      slug: "",
      description: "",
      link: ""
    );