Frontend Blocks typescript Intermediate

React Query Mutation with Optimistic Update

Optimistically update the UI before a mutation resolves, then rollback on error.

typescript

import { useMutation, useQueryClient } from "@tanstack/react-query";

export function useToggleLike(moduleId: string) {
  const qc = useQueryClient();
  return useMutation({
    mutationFn: () => fetch(`/api/modules/${moduleId}/like`, { method: "POST" }),
    onMutate: async () => {
      await qc.cancelQueries({ queryKey: ["module", moduleId] });
      const prev = qc.getQueryData(["module", moduleId]);
      qc.setQueryData(["module", moduleId], (old: any) => ({ ...old, liked: !old.liked }));
      return { prev };
    },
    onError: (_, __, ctx) => qc.setQueryData(["module", moduleId], ctx?.prev),
    onSettled: () => qc.invalidateQueries({ queryKey: ["module", moduleId] }),
  });
}