TanStack Query — Quản Lý Server State Cho React

// ❌ Phải tự làm mọi thứ
function Posts() {
  const [data, setData] = useState(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState(null)

  useEffect(() => {
    setLoading(true)
    fetch('/api/posts')
      .then(r => r.json())
      .then(d => { setData(d); setLoading(false) })
      .catch(e => { setError(e); setLoading(false) })
  }, [])

  // ❌ Không cache: chuyển trang → gọi lại API
  // ❌ Không background refetch
  // ❌ Không stale management
  // ❌ Loading flash mỗi lần
}

const queryClient = useQueryClient()

const mutation = useMutation({
  mutationFn: (newPost) =>
    fetch('/api/posts', {
      method: 'POST',
      body: JSON.stringify(newPost),
    }).then(r => r.json()),

  onSuccess: (data) => {
    // Invalidate cache → tự động refetch
    queryClient.invalidateQueries({ queryKey: ['posts'] })

    // Hoặc set cache trực tiếp (optimistic)
    queryClient.setQueryData(['posts', data.id], data)
  },

  onError: (error) => {
    toast.error(`Failed: ${error.message}`)
  },
})

// Dùng mutation
mutation.mutate({ title: 'New Post', content: '...' })
mutation.mutateAsync({ title: '...' }).then(data => ...)

// Trạng thái
mutation.isPending   // Đang gửi
mutation.isError     // Lỗi
mutation.isSuccess   // Thành công

function PostsPage() {
  const [page, setPage] = useState(1)

  const { data, isFetching } = useQuery({
    queryKey: ['posts', { page }],
    queryFn: () => fetchPosts(page),
    placeholderData: keepPreviousData,
    // Giữ data cũ trong khi fetch trang mới
    // → không bị loading flash
  })

  return (
    <div>
      {data?.posts.map(post => <PostCard key={post.id} post={post} />)}

      {isFetching && <Spinner />}

      <button onClick={() => setPage(p => p - 1)} disabled={page === 1}>
        Previous
      </button>
      <span>Page {page}</span>
      <button onClick={() => setPage(p => p + 1)} disabled={!data?.hasMore}>
        Next
      </button>
    </div>
  )
}

function InfinitePosts() {
  const {
    data,
    fetchNextPage,
    hasNextPage,
    isFetchingNextPage,
  } = useInfiniteQuery({
    queryKey: ['posts'],
    queryFn: ({ pageParam = 1 }) => fetchPosts(pageParam),
    getNextPageParam: (lastPage) =>
      lastPage.hasMore ? lastPage.page + 1 : undefined,
    initialPageParam: 1,
  })

  return (
    <div>
      {data?.pages.map(page =>
        page.posts.map(post => <PostCard key={post.id} post={post} />)
      )}

      <button
        onClick={() => fetchNextPage()}
        disabled={!hasNextPage || isFetchingNextPage}
      >
        {isFetchingNextPage ? 'Loading...' : hasNextPage ? 'Load More' : 'All loaded'}
      </button>

      <div ref={sentinelRef} /> {/* Intersection Observer */}
    </div>
  )
}

const mutation = useMutation({
  mutationFn: (updatedTodo) =>
    fetch(`/api/todos/${updatedTodo.id}`, {
      method: 'PATCH',
      body: JSON.stringify(updatedTodo),
    }).then(r => r.json()),

  // Khi mutate, cập nhật cache ngay — trước khi API trả về
  onMutate: async (newTodo) => {
    // Cancel refetch đang chạy để tránh overwrite
    await queryClient.cancelQueries({ queryKey: ['todos'] })

    // Snap old value để rollback nếu lỗi
    const previousTodos = queryClient.getQueryData(['todos'])

    // Optimistic update
    queryClient.setQueryData(['todos'], (old) =>
      old?.map(todo =>
        todo.id === newTodo.id ? { ...todo, ...newTodo } : todo
      )
    )

    return { previousTodos } // Pass cho onError
  },

  // Nếu lỗi → rollback
  onError: (err, newTodo, context) => {
    queryClient.setQueryData(['todos'], context?.previousTodos)
    toast.error('Update failed — rolled back')
  },

  // Refetch để đảm bảo UI khớp server
  onSettled: () => {
    queryClient.invalidateQueries({ queryKey: ['todos'] })
  },
})

// hooks/usePosts.ts
export function usePosts() {
  return useQuery({
    queryKey: ['posts'],
    queryFn: fetchPosts,
    staleTime: 5 * 60 * 1000,
  })
}

export function usePost(id: number) {
  return useQuery({
    queryKey: ['posts', id],
    queryFn: () => fetchPost(id),
    enabled: !!id,
  })
}

export function useCreatePost() {
  const queryClient = useQueryClient()

  return useMutation({
    mutationFn: (data: CreatePostInput) =>
      fetch('/api/posts', {
        method: 'POST',
        body: JSON.stringify(data),
      }).then(r => r.json()),

    onSuccess: (newPost) => {
      queryClient.setQueryData(['posts', newPost.id], newPost)
      queryClient.invalidateQueries({ queryKey: ['posts'] })
      toast.success('Post created!')
    },
  })
}

// Trước: useEffect + useState + loading + error + cache
function Posts() {
  const [data, setData] = useState(null)
  const [loading, setLoading] = useState(true)
  useEffect(() => {
    fetch('/api/posts')
      .then(r => r.json())
      .then(setData)
      .finally(() => setLoading(false))
  }, [])
  if (loading) return <Spinner />
  return <PostsList posts={data} />
}

// Sau: useQuery
function Posts() {
  const { data, isLoading } = useQuery({
    queryKey: ['posts'],
    queryFn: () => fetch('/api/posts').then(r => r.json()),
  })
  if (isLoading) return <Spinner />
  return <PostsList posts={data} />
}

// + Cache, refetch, stale management, retry, devtools — miễn phí

## Tài liệu tham khảo

- [TanStack Query Documentation](https://tanstack.com/query/latest)
- [TanStack Query — useQuery Guide](https://tanstack.com/query/latest/docs/framework/react/guides/queries)
- [TanStack Query — useMutation Guide](https://tanstack.com/query/latest/docs/framework/react/guides/mutations)
- [TanStack Query — Optimistic Updates](https://tanstack.com/query/latest/docs/framework/react/guides/optimistic-updates)
- [TanStack Query — Infinite Queries](https://tanstack.com/query/latest/docs/framework/react/guides/infinite-queries)
- [TanStack Query Devtools](https://tanstack.com/query/latest/docs/framework/react/devtools)