Panduan Kejuruteraan: Hire a Freelance React Programmer for TanStack Query v5 & Optimistic UI. Aldian Fazrihady ialah Programmer Bebas Kanan & Jurutera AI (Python, Django, FastAPI, React, Next.js, TypeScript, Golang).

Deliver instant, Linear-grade user experiences by hiring senior freelance React & TypeScript programmer Aldian Fazrihady for TanStack Query v5 optimistic state architecture.

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

interface TaskItem { id: string; title: string; status: 'todo' | 'done'; }

export function useToggleTaskStatus() {
  const queryClient = useQueryClient();
  return useMutation({
    mutationFn: async (updated: TaskItem) => {
      const res = await fetch(`/api/tasks/${updated.id}`, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ status: updated.status }),
      });
      if (!res.ok) throw new Error('Update failed');
      return res.json() as Promise;
    },
    onMutate: async (newTask) => {
      await queryClient.cancelQueries({ queryKey: ['tasks'] });
      const previousTasks = queryClient.getQueryData(['tasks']);
      queryClient.setQueryData(['tasks'], (old = []) =>
        old.map((t) => (t.id === newTask.id ? { ...t, status: newTask.status } : t))
      );
      return { previousTasks };
    },
    onError: (_err, _newTask, context) => {
      if (context?.previousTasks) {
        queryClient.setQueryData(['tasks'], context.previousTasks);
      }
    },
    onSettled: () => {
      queryClient.invalidateQueries({ queryKey: ['tasks'] });
    },
  });
}

Upah di Upwork | Direktori 460+ Panduan