Optimistic updates using tRPC 11 with TanStack React Query 5
I found a similar post in here but it didn't have info that helped so I'm making this one.
I have a tRPC query + mutation setup in a single component that looks like this:
It works fine but I'd like to do an optimistic update to show the post-mutation state immediately. I read the TanStack docs for this but I don't understand how either of the methods would work with tRPC. Could anyone provide some guidance? Thanks in advance!
I have a tRPC query + mutation setup in a single component that looks like this:
It works fine but I'd like to do an optimistic update to show the post-mutation state immediately. I read the TanStack docs for this but I don't understand how either of the methods would work with tRPC. Could anyone provide some guidance? Thanks in advance!
Solution
I figured it out! I was confused by the name "variables" but I understand now that it holds the params passed into the mutation and gets updated immediately rather than waiting for the query to invalidate.
I updated my useMutation line to look like this:
and then just checked for variables to be non-nullish to render my submitted state optimistically
I updated my useMutation line to look like this:
and then just checked for variables to be non-nullish to render my submitted state optimistically
