Per-mutate()-call mutationKey

[mnbroatch]

I know this is related to several discussions, but I didn't see one for this precise feature. I really would like it if I could set a cache key per mutate() call. I would like to be able to use filters to retrieve all cached useAddThing().mutate() results, for instance. This would help do a "half-optimistic" update, where we show a new thing as soon as we know the server accepted it, but before a refetch finishes (some of my fetches are slow).

I don't like the common solution of editing the cached result of a getThings() query (my server data is sacred, dangnabbit!), or imperatively adding arbitrary keys to the cache, which just feels like doing local state operations but in the wrong place. I am instead using local state to store mutation results, which feels like the best of bad options but counter- to the goal of react-query. Especially when an idiomatic solution feels so close.

[TkDodo]

I don't think I fully understand the question. How would a mutation key per mutate call solve the problem? can you show some example code?

[mnbroatch]

OK so I might be a little off because I haven't messed around too much with pulling things directly from cache (since this feature doesn't exist), but what I want to do is:

function useThings () {
  const things = useThings().data || [] // thin wrapper around query
  const queryClient = useQueryClient
  const editedThings = queryClient.getQueriesData('editThing')
  const newThings = queryClient.getQueriesData('addThing')

  // dedupe function not shown for brevity
  return dedupe([
    ...things,
    ...editedThings,
    ...newThings,
  ])
}

[mnbroatch]

I do still see complications if "removeThings" was an option in my app, but it isn't; also, I think those are present in other solutions (besides "don't do optimistic updates").