Update local data from useQuery

am using trpc to make a query to load recipe information in my nextjs application: const { data, isLoading } = api.recipes.getDetails.useQuery({ id: id }); I also have a mutation to update the recipe: const { mutateAsync: updateRecipe } = api.recipes.update.useMutation({}); How can I update the local state of data (that comes from the getDetails query) without having to refetch that data once the mutation response comes back? Here is my mutation handler:
await updateRecipe(updatedRecipe, {
onSuccess(data, variables, context) {
console.log(JSON.stringify(data));
!!data && updateLocalData();
},
});
await updateRecipe(updatedRecipe, {
onSuccess(data, variables, context) {
console.log(JSON.stringify(data));
!!data && updateLocalData();
},
});
I would like to implement updateLocalData() but not sure how to set the data without refetching
5 Replies
AldiBoi
AldiBoi10mo ago
Stack Overflow
How to revalidate after mutation with react-query?
I've a basic implementation of data fetching and updating using react-query on next.js app. My goal is to update the data after mutation. Currently the data updates only on tab refresh. But without...
AldiBoi
AldiBoi10mo ago
I believe trpc hides the queryKey thats used in its wrapping of react-query, so next steps would be to find out how to re-expose it
AldiBoi
AldiBoi10mo ago
getQueryKey | tRPC
We provide a getQueryKey helper that accepts a router or procedure so that you can easily provide the native function the correct query key.
tyler4949
tyler494910mo ago
Thank you! Will take a look
Matt
Matt10mo ago
as of now with the app arouter is it difficult to revalidate data iwth query keys?
Want results from more Discord servers?
Add your server