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

Question

首先，感谢您抽出宝贵时间阅读本文。

我已经尝试根据一些方法在突变后更新缓存。

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

我一直在研究这些文档： Making all other cache updates; update cache after a mutation; automatically update Apollo cache after mutation;

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

我有一些问题：

我是否遗漏了一些基本的东西？
这是一个简单的错误吗？就像某处提到的错误变量。
我需要在某处查询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

Answer 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: ""
    });
  }

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

How do I update the cache after a mutation in Apollo / GraphQL?

reactjs

caching

graphql

apollo

react-apollo