Partial cache reset

[htulipe]

This features comes from the now closed issue: apollographql/apollo-client#3564. I'll paraphrase the original author as he's quite precise in its request:

I've got stuck with a rather common situation with mutations and cache.
In my case I have a query tasks(filters: $filters). It gets fetched and cached several times with different filters. Then I run a mutation createTask(input: $input). It looks like I can't update my cache manually in this case because I don't know for which filters I should update the cache unless I implement all task filtering logic inside of the update function. Additionally I've got another query that fetches the number of tasks opened which should also be updated.
I've seen some issues in the repo and stackoverflow regarding the problem, but no solution found except for running client.resetStore(). Still it clears all the data and makes the app fetch it all right after. Possible solution that I see is providing a method for partial cache clear based on query names (may become a more abstract one keeping the idea), so that clearing tasks would clear all the tasks cache variants.

[ziedHamdi]

I think the most elgant way would be to implement a deletion QL, where we can select with a regular graph query what we want to delete from the cache

[developdeez]

Any movement on this?

[zenVentzi]

I'm just curious, I see caching issues similar to this one staying unresolved for the past 2 years. That wouldn't have been a problem if these features weren't basic, but they are.(e.g. update/invalidate cache after deletion)

My question is, should developers hope for any standard solutions provided by Apollo in the comming weeks/months or keep on using hacks?

I hope this doesn't come off the wrong way, Apollo seems to be doing great work overall!

[fzxt]

100% agreed with @zenVentzi . Not having any cache invalidation / eviction is very inconvenient

[tsarchghs]

I'd think this was a no-brainer feature.

[mmdonaldson]

Interested to know if there is a hacky workaround, also running into this issue

[dylanwulf]

Cache eviction and garbage collection is being worked on for apollo-client v3: apollographql/apollo-client#5310

[slinden2]

I am also looking for a hacky workaround... I've got the exact same problem in my application.

[serhii-ohorodnyk]

@mmdonaldson , @slinden2

I had the same issue and my hacky workaround was to clear cache data by query name and refetch:

const updateMutation = useUpdateMutation()
updateMutation({
  variables: { filters: newFilters },
  update: deleteCacheForQuery('allItems'),
  refetchQueries: ['allItems']
})

...

const deleteCacheForQuery = (queryName: string) => (proxy: DataProxyExt) => {
  const cache = proxy.data
  if (cache) {
    Object.keys(cache.data || {})
      .filter(name => name.startsWith(queryName) || name.startsWith(`$ROOT_QUERY.${queryName}`))
      .forEach(name => cache.delete(name))
  }
}

This is an example with react-hooks but I'm sure you can find update and refetchQueries properties if you are using react-apollo components.

Be aware that deleteCacheForQuery function is using not documented api (at least typescript types are not complete) so I had to extend DataProxy :

import { DataProxy } from 'apollo-cache'

interface DataProxyExt extends DataProxy {
  data?: {
    data?: { [key: string]: string }
    delete: (key: string) => void
  }
}

[x-wk]

How about delete cache by operation name?

[radireddy]

A simple way to reset the cache for a specific query is to call the query again with fetchPolicy: 'network-only'. GraphQL fetches data from API and updates the cache after results are received.

[hwillson]

Cache eviction / garbage collection is now supported - thanks! https://www.apollographql.com/docs/react/caching/garbage-collection/