edit•2w ago

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 });
    };

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

Jump to solution

1 Reply

Solution

edit•2w ago

    const { mutate, variables } = useMutation(mutationOptions);

    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} />

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} />

Optimistic updates using tRPC 11 with TanStack React Query 5

Did you find this page helpful?