Theo's Typesafe Cult•5mo ago

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•5mo ago

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...

AldiBoi•5mo 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•5mo ago

https://trpc.io/docs/client/react/getQueryKey

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•5mo ago

Thank you! Will take a look

Matt•5mo ago

as of now with the app arouter is it difficult to revalidate data iwth query keys?

Gaming

Programming

Update local data from useQuery