How can I implement optimistic updates with React Query?

How can I implement optimistic updates with React Query?

You can implement optimistic updates in React Query by using the onMutate callback in your mutation function.

Can you give me a code example of that?

Sure! Here's a simple example:

const mutation = useMutation(mutateFunction, {
  onMutate: async (newData) => {
    await queryClient.cancelQueries('data');
    const previousData = queryClient.getQueryData('data');
    queryClient.setQueryData('data', old => [...old, newData]);
    return { previousData };
  },
  onError: (err, newData, context) => {
    queryClient.setQueryData('data', context.previousData);
  },
});

What happens if the mutation fails?

If the mutation fails, the onError callback will be triggered, allowing you to revert the optimistic update by restoring the previous data.