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:
I would like to implement updateLocalData()
but not sure how to set the data without refetching5 Replies
I found a stackoverflow that would probably help you here.
https://stackoverflow.com/questions/75957086/how-to-revalidate-after-mutation-with-react-query
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...
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
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.
Thank you!
Will take a look
as of now with the app arouter is it difficult to revalidate data iwth query keys?