mutate a useQuery result, the proper way

[Jurek-Raben]

Hi,

how do I properly remove an entry from a query result and update the query state/cache?

Currently I use a useQuery definition with querykey "key1". Then later I use a useMutation definition with a different mutationKey "key2". Inside the mutation I remove the entry from the data/array and then updating the query cache of "key1". But this feels like a hack.

Loose example:

useQuery({
  queryKey: ['key1'],
  queryFn: () => {
    ...fetching from api...
    return data;
  }
});

...later:

useMutation({
  mutationKey: ['key2'],
  mutationFn: async ({ data, index }) ) => {
    ... deleting entry from api ...
    queryClient.setQueryData(['key1'], [...data.filter(...remove at index..)]);
  }
});

Is there a proper way to somehow mutate the data of "key1"? Couldn't get my head around the documentation, infos about mutations seem to be spread over several sections and never seem to be complete either...

[TkDodo]

it's just this: https://tanstack.com/query/latest/docs/framework/react/guides/updates-from-mutation-responses#updates-from-mutation-responses

mutations don't need a key btw