I don't understand the example of the new Optimistic Update method in v5

[stakbucks]

const { isPending, submittedAt, variables, mutate, isError } = useMutation({
    mutationFn: (newTodo: string) => axios.post('/api/data', { text: newTodo }),
    // make sure to _return_ the Promise from the query invalidation
    // so that the mutation stays in `pending` state until the refetch is finished
    onSettled: async () => {
      return await queryClient.invalidateQueries({ queryKey: ['todos'] })
    },
  })

<ul>
  {todoQuery.items.map((todo) => (
    <li key={todo.id}>{todo.text}</li>
  ))}
  {isPending && (
    <li style={{ opacity: 0.5 }}>
      {variables}
    </li>
  )}
</ul>

The codes are the examples shown in the v5 doc on Optimistic Updates.
The point I don't understand about is the part where you put 'variables' when 'isPending'

  {isPending && (
    <li style={{ opacity: 0.5 }}>
      {variables}
    </li>
  )}

I am not trying to say that this is a wrong code. I know it works perfect. But I don't get why you put 'variables' instead of 'newTodo' when you have the value of newTodo.

  {isPending && (
    <li style={{ opacity: 0.5 }}>
      {newTodo}
    </li>
  )}

What would be the problem with the code right above? I am talking about a situation where the mutation and query live in the same component.

[TkDodo]

1. You don't always have access to newTodo where you call the mutation:

const { variables, isPending, mutate } = useMutation({
  mutationFn: addTodo
})

return <AddTodoForm onSubmit={(newTodo) => mutate(newTodo) />

2. If the Query and the Mutation don't live in the same component, you also don't have access to the local newTodo state. But with useMutationState, you can access all the variables.

[stakbucks]

Thanks for the quick reply.

Do you mean if I have the newTodo value and the useMutation hook in the same component, I can just use newTodo instead of variables?

I am asking this because I am in a situation where the variables I pass are not the exact value I want to show on my UI.

For example if I want to click a mutate like counter when I click 'Like' button.
But the I variable I pass to the mutationFn is only the id of the user who clicked, and not the value count.
In this case I wanted to write my code like this:

  const { variables, isPending, mutate } = useMutation({
    mutationFn: (userId) => axios.post(`.../${userId}`),
    onSettled: async () =>
      await queryClient.invalidateQueries({ queryKey: ['likeCounts'] }),
  });

  return (
    <>
      <div>{isPending ? count + 1 : count}</div>
      <LikeBtn onClick={() => mutate(userId)} />
    </>
  );

I was wondering if this is also a right way to do optimistic updates.

[TkDodo]

sure

[stakbucks]

Thank you