When dealing with mutations that update objects on the server, it's common for the new object to be automatically returned in the response of the mutation. Instead of refetching any queries for that item and wasting a network call for data we already have, we can take advantage of the object returned by the mutation function and update the existing query with the new data immediately using the Query Client's setQueryData method:
const queryClient = useQueryClient()
const mutation = useMutation(editTodo, { onSuccess: data => { queryClient.setQueryData(['todo', { id: 5 }], data) }})
mutation.mutate({ id: 5, name: 'Do the laundry',})
// The query below will be updated with the response from the// successful mutationconst { status, data, error } = useQuery(['todo', { id: 5 }], fetchTodoById)You might want to tie the onSuccess logic into a reusable mutation, for that you can
create a custom hook like this:
const useMutateTodo = () => { const queryClient = useQueryClient()
return useMutation(editTodo, { // Notice the second argument is the variables object that the `mutate` function receives onSuccess: (data, variables) => { queryClient.setQueryData(['todo', { id: variables.id }], data) }, })}Fast track your learning and
take the offical React Query course ↗️
Your weekly dose of JavaScript news. Delivered every Monday to over 100,000 devs, for free.