title: How do I update the cache after a mutation in Apollo / GraphQL?
body: <p>Firstly, thank you for your time reading this through.</p>
  <p>I've tried to update the cache after a mutation based on a few methods.</p>
  <p>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.</p>
  <p>I've been exploring these documents:
  <a href="https://www.apollographql.com/docs/react/data/mutations/#making-all-other-cache-updates" rel="nofollow noreferrer">Making all other cache updates</a>; <a href="https://dev.to/lucis/update-apollo-cache-after-a-mutation-and-get-instant-benefits-on-your-ui-1c3b" rel="nofollow noreferrer">update cache after a mutation</a>; <a href="https://dev.to/aerogear/automatically-update-apollo-cache-after-mutations-20n7" rel="nofollow noreferrer">automatically update Apollo cache after mutation</a>; <a href="https://stackoverflow.com/questions/58255167/react-apollo-updating-client-cache-after-mutation">updating client cache after mutation</a></p>
  <p>I'm leaning into the method mentioned in the first link since it's the official documentation.</p>
  <p>Some questions I have:</p>
  <ol>
  <li>Am I missing something fundamental?</li>
  <li>Is it a simple bug? Like the wrong variable mentioned somewhere.</li>
  <li>Do I need to query GET_LINKS somewhere?</li>
  </ol>
  <p>Here is the code block for reference:</p>
  <pre><code>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: &quot;&quot;,
        description: &quot;&quot;,
        link: &quot;&quot;
      });
    }
  </code></pre>
  <p>Here is the full codebase for reference:
  <a href="https://codesandbox.io/s/gifted-liskov-tkhtm?file=/src/components/CreateLink.js" rel="nofollow noreferrer">codesandbox.io</a></p>