React Query optimistic update for likes

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

type Snip = { id: string; liked: boolean; likesCount: number };

export function useToggleLike(snipId: string) {
  const qc = useQueryClient();

  return useMutation({
    mutationFn: async () => {
      const res = await fetch(`/api/snips/${snipId}/like`, { method: 'POST' });
      if (!res.ok) throw new Error('Like failed');
      return (await res.json()) as Snip;
    },
    onMutate: async () => {
      await qc.cancelQueries({ queryKey: ['snip', snipId] });
      const prev = qc.getQueryData<Snip>(['snip', snipId]);
      if (prev) {
        qc.setQueryData<Snip>(['snip', snipId], {
          ...prev,
          liked: !prev.liked,
          likesCount: prev.likesCount + (prev.liked ? -1 : 1)
        });
      }
      return { prev };
    },
    onError: (_err, _vars, ctx) => {
      if (ctx?.prev) qc.setQueryData(['snip', snipId], ctx.prev);
    },
    onSettled: () => {
      qc.invalidateQueries({ queryKey: ['snip', snipId] });
    }
  });
}