Implementing Optimistic Updates for a Like Button

Show how to implement optimistic updates in a social media app's 'like' button, allowing the UI to update immediately while the mutation request is being processed.

const queryClient = new QueryClient();

Initializes a new instance of the QueryClient which will be used by React Query for fetching, caching, and updating data.

const useLikePostMutation = () => {
  return useMutation(likePost, {
    onMutate: async (postId) => {
      await queryClient.cancelQueries(['post', postId]);
      const previousPost = queryClient.getQueryData(['post', postId]);
      queryClient.setQueryData(['post', postId], (old) => {
        return {...old, likes: old.likes + 1};
      });
      return { previousPost };
    },
    onError: (err, postId, context) => {
      queryClient.setQueryData(['post', postId], context.previousPost);
    },
    onSettled: (postId) => {
      queryClient.invalidateQueries(['post', postId]);
    }
  });
};

Defines a mutation using the useMutation hook from React Query that handles the optimistic update for liking a post. Before the mutation is sent to the server, the number of likes is optimistically incremented. If the mutation fails, the previous state is restored.

const LikeButton = ({postId}) => {
  const mutation = useLikePostMutation();

  const handleLike = () => {
    mutation.mutate(postId);
  };

  return (
    <button onClick={handleLike} disabled={mutation.isLoading}>
      Like
    </button>
  );
};

This component renders a like button that uses the useLikePostMutation hook. On click, it triggers the mutation for a specific postId. The button is disabled while the mutation is in progress to prevent duplicate submissions.