Manually update the cache after a mutation or a subscription

[nuragic]

I'm not sure if such thing is possible right now. There's nothing on the docs about it.

I found this issue, on where an updateCache method is proposed, but seems it has not been implemented.

#52

[simoneb]

If I understand what you mean this was done in #686. If so, please close this issue.

[nuragic]

No, I mean manually update the cache, like in the proposed example:

import { LIST_USERS_QUERY } from "./somewhere";

const CREATE_USER_MUTATION = `...`;

function CreateNewUser() {
  const [createUser] = useMutation(CREATE_USER_MUTATION, {
    updateCache: (cache, result) => {
      const cacheKey = client.getCacheKey({ query: LIST_USERS_QUERY });
      const existingResult = cache.get(cacheKey);
      cache.set(cacheKey, {
        ...existingResult,
        data: {
          users: [...existingResult.data.users, result.data.createUser]
        }
      });
    }
  });
}

As far as I understand, this is not possible right now?

[simoneb]

As you can see in the source code this is not supported right now.

[simoneb]

All the options were discussed in #52 and we decided to implement one of them in #686. They obtain similar results but in different ways.

[gdorsi]

We can currently handle this kind of scenarios using the mutationsEmitter:

import { useContext, useEffect } from "react"
import { ClientContext } from "graphql-hooks"
import { CREATE_USER_MUTATION } from "./somewhere"

const LIST_USERS_QUERY = `...`

function Users() {
  const client = useContext(ClientContext)
  const { data, cacheKey, refetch } = useQuery(LIST_USERS_QUERY)

  useEffect(() => {
    if (!client.cache) return

    const handler = ({ result }) => {
      const existingResult = cache.get(cacheKey)
      cache.set(cacheKey, {
        ...existingResult,
        data: {
          users: [...existingResult.data.users, result.data.createUser],
        },
      })
      refetch({ skipCache: false })
    }

    client.mutationsEmitter.on(CREATE_USER_MUTATION, handler)

    return () =>
      client.mutationsEmitter.removeListener(CREATE_USER_MUTATION, handler)
  })
}

We could build an hook on top of mutationsEmitter to simplify it's usage (something like useMutationListener)

With it we can do pretty much everything related to the cache management (I'm using it for invalidating without refetching)

[nuragic]

Ohh it’s great to know we have this mechanism, thanks @gdorsi! Yeah I think it would be great to provide a simpler abstraction on top of this before making it public/official.

Interested to know more about this…

something like useMutationListener

I mean, I never used an hook for this use case. I only have experience with Apollo Client and React Query, but I think their API is good, even though it is imperative?

• https://www.apollographql.com/docs/react/caching/cache-interaction/#using-updatequery-and-updatefragment
• https://react-query.tanstack.com/reference/QueryClient#queryclientsetquerydata

[gdorsi]

I was thinking about this kind of API:

import { useContext, useEffect } from "react"
import { useMutationListener } from "graphql-hooks"
import { CREATE_USER_MUTATION } from "./somewhere"

const LIST_USERS_QUERY = `...`

function Users() {
  const client = useContext(ClientContext)
  const { data, cacheKey, refetch } = useQuery(LIST_USERS_QUERY)
  
  useMutationListener(CREATE_USER_MUTATION, ({ result, cache }) => {
    const existingResult = cache.get(cacheKey)
      cache.set(cacheKey, {
        ...existingResult,
        data: {
          users: [...existingResult.data.users, result.data.createUser],
        },
      })
      // This also need to be simplified in some way
      refetch({ skipCache: false })
  })
}

the impact for the codebase would be small and with proper documentation I think this API could be pretty usable.

EDIT:

In the example comments I said I'm using the cacheKey directly because the match here is by reference that is wrong, because the key is serialized here

[nuragic]

Uhm so it's like an inversion of control actually, I mean, usually you have:

useMutation + updateCache

But you're proposing:

useQuery + useMutationListener

After thinking about it... I think it's not gonna work.

The cache update must happen right after the mutation completes. The mutation is always fired from the actual running code, usually from a user action... even if the query corresponding to cacheKey is not mounted, its cache has been updated, so when it mounts it will have the correct state.

With the proposed approach you would be only able to "listen mutations" from mounted components... I mean, imagine that you have 2 separate pages (only 1 page will be mounted at a given time, not both):

• page 1 (list of items) - useQuery(GET_LIST)
• page 2 (item detail, edit, remove...) - useMutation(EDIT_ITEM)

The mutation will happen on page 2. But you can't listen to it from page 1 because it is unmounted -- hence not running.

Right?