TanStack Query + useOptimistic

// TanStack Query でデータ取得
const { data: posts } = useQuery({ queryKey: ["posts"], queryFn: fetchPosts });

// useOptimistic で即時UI更新
const [optimisticPosts, addOptimistic] = useOptimistic(posts, updateFn);

// useMutation で楽観的更新
const mutation = useMutation({
  mutationFn: likePost,
  onMutate: async (postId) => {
    // 楽観的にUIを更新
    addOptimistic({ id: postId, increment: 1 });
  },
  onSuccess: () => {
    // キャッシュを再取得
    queryClient.invalidateQueries({ queryKey: ["posts"] });
  },
});