CODEWITHSUNDEEP
reactjscachinggraphqlapolloreact-apollo
peyo
peyo

Reputation: 371

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

Firstly, thank you for your time reading this through.

I've tried to update the cache after a mutation based on a few methods.

At first, I was thinking of using context, but as I read through documents, I realized that this approach would be unnecessary with Apollo since the state is stored in the cache.

I've been exploring these documents: Making all other cache updates; update cache after a mutation; automatically update Apollo cache after mutation; updating client cache after mutation

I'm leaning into the method mentioned in the first link since it's the official documentation.

Some questions I have:

  1. Am I missing something fundamental?
  2. Is it a simple bug? Like the wrong variable mentioned somewhere.
  3. Do I need to query GET_LINKS somewhere?

Here is the code block for reference:

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

Here is the full codebase for reference: codesandbox.io

Upvotes: 1

Views: 6976

Answers (1)

peyo
peyo

Reputation: 371

Thank you xadm for your thoughts. I ended up using update. I moved the update code block into the useMutation function out of the handleSubmit function.

Working code block:

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

Upvotes: 1

Related Questions