After mutation, dont refetch, but update entity (beginner researching if should react-query)

[Noitidart]

Hi all, I'm new to react-query, doing research on whether I should use it. My biggest problem in my app is I have fetched a huge list of items with one query, on-load. Then I allow user a button on each entry, clicking it mutates the entry. After mutation, I don't want to invalidate the cache and refetch the huge list. The mutation returns the updated entity. Is it possible to make the mutation update the cache rather then invalidate and refetch?

The getting started docs show this example below. We see after "adding the todo" item it is refetcthing the entire list. Can we make it not refetch from server? And just add the response of the mutation into the list?

function Todos() {
  // Access the client

  const queryClient = useQueryClient();

  // Queries

  const query = useQuery('todos', getTodos);

  // Mutations

  const mutation = useMutation(postTodo, {
    onSuccess: () => {
      // Invalidate and refetch

      queryClient.invalidateQueries('todos');
    }
  });

  return (
    <div>
      <ul>
        {query.data.map(todo => (
          <li key={todo.id}>{todo.title}</li>
        ))}
      </ul>

      <button
        onClick={() => {
          mutation.mutate({
            id: Date.now(),

            title: 'Do Laundry'
          });
        }}
      >
        Add Todo
      </button>
    </div>
  );
}

[TkDodo]

Yes, you can write to the cache directly in onSuccess. Have a look here: https://react-query.tanstack.com/guides/updates-from-mutation-responses

[Noitidart]

Thanks very much! So in this example, we write a custom onSuccess. Shouldn't this queryClient.setQueryData(['todo', { id: 5 }], data) be the same always for editTodo query? Is it possible to associate this behavior anytime it succeeds?

 const mutation = useMutation(editTodo, {

   onSuccess: data => {

     queryClient.setQueryData(['todo', { id: 5 }], data)

   }

 })```

[TkDodo]

You can couple it by creating a custom hook

[Noitidart]

Oh got it, thanks very much for your work!