editE
tRPC•8mo ago•
3 replies
edit

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:
    const queryClient = useQueryClient();
    const trpc = useTRPC();

    const queryOptions = trpc.getTodaysMindsetMatters.queryOptions({ authToken });
    const { data: mindsetMatters, isPending } = useQuery(queryOptions);
    const queryKey = trpc.getTodaysMindsetMatters.queryKey();

    const mutationOptions = trpc.submitMindsetMattersFeedback.mutationOptions({
        onSettled: () => queryClient.invalidateQueries({ queryKey })
    });

    const { mutate } = useMutation(mutationOptions);

    const onFeedbackPositive = async () => {
        mutate({ authToken, sentiment: 1 });
    };

    const onFeedbackNegative = async () => {
        mutate({ authToken, sentiment: -1 });
    };


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:
    const { mutate, variables } = useMutation(mutationOptions);

and then just checked for variables to be non-nullish to render my submitted state optimistically
mindsetMatters?.feedbackSubmitted || variables ?
  <div className="text-xs text-base-content/70 w-fit text-right">Thanks for your feedback!</div>
:
  <ThumbFeedbackButtonSet onFeedbackPositive={onFeedbackPositive} onFeedbackNegative={onFeedbackNegative} />
Jump to solution
Was this page helpful?