edit Comments

edit

•Created by edit on 5/13/2025 in #❓-help

Optimistic updates using tRPC 11 with TanStack React Query 5

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

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

4 replies