Theo's Typesafe Cult•2y ago

Updates from mutation responses with trpc?

I'm trying to automatically update a list query after updating the list with a mutation. The tanstack query docs show its pretty easy to do with straight up tanstack query: https://tanstack.com/query/v4/docs/react/guides/updates-from-mutation-responses However, with the t3 setup and trpc wrapper, I'm struggling to figure out how to do this. If I try to add a querykey like list: publicProcedure.query("items", async () => {, I get an error saying that query() is only expecting 1 argument, not 2.

Updates from Mutation Responses | TanStack Query Docs

When dealing with mutations that update objects on the server, it's common for the new object to be automatically returned in the response of the mutation. Instead of refetching any queries for that item and wasting a network call for data we already have, we can take advantage of the object returned by the mutation function and update the exis...

6 Replies

Unknown User•2y ago

Message Not Public

Will•2y ago

@nemmtor I think i'd prefer to use the query client method setQueryData, but I just can't figure out how to do that since I don't know where to add the querykeys setQueryData requires a query key to find the query that needs to be updated

Unknown User•2y ago

Message Not Public

Will•2y ago

yes! so I actually just used it to figure out the query key. I tried to follow along some documentation from tanstack query and from trpc, but none of those examples really show the same scenario with the t3 setup

 const createTinyTask = api.tinyTasks.create.useMutation({
    onSuccess: (data) => {
      console.log(data)
      queryClient.setQueryData(["tinyTasks", "list"], (tinyTasks: TinyTask[]) => {
        return [...tinyTasks, data];
      });
    },
  });

 const createTinyTask = api.tinyTasks.create.useMutation({
    onSuccess: (data) => {
      console.log(data)
      queryClient.setQueryData(["tinyTasks", "list"], (tinyTasks: TinyTask[]) => {
        return [...tinyTasks, data];
      });
    },
  });

this is what I'm trying to do, but data is coming through as undefined for some reason my create method is definitely returning the document

anthonylin198•17mo ago

@thisisnotawill did you return data from your endpoint?

Will•17mo ago

yup!

Gaming

Programming

Updates from mutation responses with trpc?