Optimistic Updates

Use React Query optimistic mutation patterns with ZapAction mutations.

Optimistic Updates

Pattern

1. Cancel active queries.
2. Snapshot previous cache.
3. Apply optimistic value.
4. Roll back on error.
5. Invalidate on settle.

Example

components/todo-toggle.tsx

"use client";

import { useQueryClient } from "@tanstack/react-query";
import { useActionMutation } from "@zapaction/query";

import { toggleTodo } from "../app/actions";
import { todoKeys } from "../app/query-keys";

const queryClient = useQueryClient();

const mutation = useActionMutation(toggleTodo, {
  onMutate: async (variables) => {
    await queryClient.cancelQueries({ queryKey: todoKeys.all() });
    const previous = queryClient.getQueryData(todoKeys.all());

    queryClient.setQueryData(todoKeys.all(), (current: any[] = []) =>
      current.map((todo) =>
        todo.id === variables.id ? { ...todo, done: !todo.done } : todo
      )
    );

    return { previous };
  },
  onError: (_error, _variables, context) => {
    if (context?.previous) {
      queryClient.setQueryData(todoKeys.all(), context.previous);
    }
  },
  onSettled: async () => {
    await queryClient.invalidateQueries({ queryKey: todoKeys.all() });
  }
});