Add setQueryData to QueryResult

[gavinwahl]

Since I can call refetch() and remove() on a query result, I should be able to call queryClient.setQueryData too. I would prefer to call it on the query result so I don't have to repeat the query key.

What do you think?

[TkDodo]

What use-case do you have where you would call setQueryData from within the same component that calls useQuery ?

Usually, writing to the query cache should be done rarely, because whatever you write will be overwritten with the next update. The two cases I know are:

• writing in onMutate for optimistic updates. This is usually further away from the actual query, so you wouldn't have that function.
• priming a new query with data in onSuccess. Here, you write do a different query, so it also wouldn't help.

[gavinwahl]

It's a non-optimistic update on a combined detail/edit page.

const thingQ = useQuery(['thing', id], () => getThing(id));
const updateThingMutation = useMutation(async () => 
  const newThingFromServer = await saveThing(id, formData); 
  thingQ.setQueryData(newThingFromServer);
)

[TkDodo]

if the code is that colocated, I think you can just extract the queryKey into a const. I often advise to have a custom hook for the query, another one for the mutation and share the keys via a queryKeyFactory

https://tkdodo.eu/blog/effective-react-query-keys

[gavinwahl]

The other advantage of having it as a method on the query result is that it can be strongly typed. queryClient.setQueryData can be used to set the query to an object of the wrong type.