Delete Mutation after results to update client cache

App Development
,
2

:bulb:

What about possibly making a custom hook that adds on a update function that grabs the mutation results and evicts them from the cache and then runs the garbage collector to clean up any dangling references. Then when I want to run a delete mutation and update the cache I will call my custom hook in place of the useMutation hook.

const useDelete = (MUTATION, options = {}) => {
  options.update = (cache, results) => {
    const data = results.data || {}
    for (const [, m] of Object.entries(data) {
      for(const [, r] of Object.entries(m)) {
        if (Array.isArray(r)) {
          r.forEach(i => {
            const id = cache.identify(i)
            cache.evist({ id })
          })
        }
      }
    }
    cache.gc()
  }
  return useMutation(MUTATION, options)
}

UPDATE, This works! Just be sure that you only use delete mutations with this or else you will end up deleting data from your cache unintentionally. For this to work the delete mutation needs to return the id of the deleted object(s). If your id is anything other than _id or id you may need to configure your apollo client to map your ids.

Thoughts? Any react experts? This is sort of off topic, but something that anyone developing with the GraphQL endpoint and react will run into.