Common strategies for cache invalidations?

[yss14]

We successfully integrated react-query in our constantly growing frontend codebase since v1 with great success!
Over the recent months, as our codebase is becoming more and more complex from sprint to sprint, we encounter more and more bugs due to missing cache invalidations after a successful mutation result, which the author accidentally forget or didn't think about.

The way how we handle cache invalidations after successful mutations looks often like this:

const someMutation = useMutation(() => backendService.mutateSomething(), {
  onSuccess: () => {
    queryCache.invalidateQueries("matches")
    queryCache.invalidateQueries(["user.matches", userID])
    // at this point the author of the mutation forget to call a third cache invalidation, resulting in some old data displayed somewhere in our dashboard
  }
})

Are there some common practices or strategies to mitigate missing cache invalidations?
I'm also unsure if we only encounter those issues due to some way of carelessness of our developers, or if this is a common problem with growing frontend complexity.

[TkDodo]

The only thing that comes to mind right now would be to have everything that should be invalidated together start with the same queryKey to enable the fuzzy matching. in your example, that would be:

- ["user.matches", userID]
+ ["matches", "user", userID]

queryCache.invalidateQueries("matches") would then invalidate both entries (and potentially more) because they have "matches" as the first entry of the Array.

of course, if you have a second mutation that would need to invalidate all "user" related things, this doesn't work anymore - so it only works "one way"