Tính năng nâng cao của React Query: Quản lý trạng thái dữ liệu

React Query là thư viện hỗ trợ quản lý trạng thái máy chủ mạnh mẽ trong các ứng dụng React. Nó giúp tối ưu hóa việc lấy và cập nhật dữ liệu từ server. Sau phần 1 giới thiệu cơ bản, bài viết này sẽ tiếp tục với các tính năng nâng cao của React Query.

1. Caching – Tính năng nâng cao của React Query

React Query tự động lưu trữ dữ liệu vào bộ nhớ đệm (cache) để giảm tải số lượng request không cần thiết. Bạn có thể cấu hình thời gian lưu trữ dữ liệu trong cache với thuộc tính cacheTime:

javascriptCopy codeconst { data } = useQuery({
  queryKey: ['repoData'],
  queryFn: fetchRepoData,
  cacheTime: 1000 * 60 * 5, // Cache dữ liệu trong 5 phút
});

Tính năng caching giúp tiết kiệm tài nguyên và cải thiện hiệu suất ứng dụng của bạn khi dùng React Query.

2. Revalidation – Tính năng nâng cao của React Query

Với React Query, dữ liệu sẽ luôn được cập nhật qua các tùy chọn làm mới như:

refetchOnWindowFocus: Tự động làm mới khi người dùng quay lại tab.
refetchInterval: Làm mới dữ liệu định kỳ.
refetchOnReconnect: Làm mới khi kết nối mạng được khôi phục.

javascriptCopy codeconst { data } = useQuery({
    queryKey: ['repoData'],   
    queryFn: fetchRepoData,   
    refetchOnWindowFocus: true, 
    refetchInterval: 1000 * 60, // 60 giây
});

3. Stale-While-Revalidate – Tính năng nâng cao của React Query

Stale-While-Revalidate là tính năng cho phép hiển thị dữ liệu từ cache trong khi dữ liệu mới đang được tải. Thuộc tính staleTime giúp xác định khoảng thời gian dữ liệu được coi là “tươi”:

javascriptCopy codeconst { data } = useQuery({
  queryKey: ['repoData'],
  queryFn: fetchRepoData,
  staleTime: 1000 * 60 * 5, // Dữ liệu không stale trong 5 phút
});

4. Pagination – Tính năng nâng cao của React Query

React Query hỗ trợ phân trang qua việc sử dụng queryKey động, giúp quản lý dữ liệu từng trang dễ dàng hơn:

javascriptCopy codeconst { data, isFetching } = useQuery(['repoData', page], () => fetchRepoData(page));

5. Prefetching – Lấy dữ liệu trước

Tính năng prefetching giúp tải trước dữ liệu khi người dùng chưa thực sự cần, cải thiện trải nghiệm khi chuyển trang hoặc xem chi tiết:

javascriptCopy codequeryClient.prefetchQuery(['repoData'], fetchRepoData);

6. Manual Refetch – Làm mới thủ công

React Query cung cấp cách cho người dùng tự làm mới dữ liệu khi cần, thông qua phương thức refetch:

javascriptCopy codeconst { data, refetch } = useQuery(['repoData'], fetchRepoData);

return (
    <button onClick={() => refetch()}>Làm Mới Dữ Liệu</button>
);

7. Optimistic Updates – Cập nhật lạc quan

Tính năng cập nhật lạc quan cho phép hiển thị kết quả ngay lập tức mà không cần đợi phản hồi từ server. Nếu thất bại, cache sẽ phục hồi về trạng thái cũ:

javascriptCopy codeconst mutation = useMutation(updateData, {
  onMutate: async (newData) => {
    await queryClient.cancelQueries(['repoData']);
    const previousData = queryClient.getQueryData(['repoData']);
    queryClient.setQueryData(['repoData'], (oldData) => ({ ...oldData, ...newData }));
    return { previousData };
  },
  onError: (err, newData, context) => {
    queryClient.setQueryData(['repoData'], context.previousData);
  },
  onSettled: () => {
    queryClient.invalidateQueries(['repoData']);
  },
});

8. Retries – Thử lại khi thất bại

Bạn có thể cấu hình số lần thử lại và khoảng thời gian giữa các lần thử khi request gặp lỗi với thuộc tính retry:

javascriptCopy codeconst { data, error, isError } = useQuery(['repoData'], fetchRepoData, {
  retry: 3, // Tối đa 3 lần thử
  retryDelay: 2000, // Đợi 2 giây giữa các lần thử
});

9. Query Cancellation – Hủy bỏ Query

Tính năng hủy bỏ query giúp giảm tài nguyên khi người dùng thay đổi hành động trước khi request hoàn tất:

javascriptCopy codeconst { data, isFetching } = useQuery(['repoData'], fetchRepoData);

useEffect(() => {
  if (isFetching) {
    queryClient.cancelQueries(['repoData']);
  }
}, [isFetching]);

10. Server-Side Rendering (SSR)

React Query hỗ trợ SSR, thích hợp với các ứng dụng Next.js để preload dữ liệu trên server:

javascriptCopy codeexport async function getServerSideProps() {
  const queryClient = new QueryClient();
  await queryClient.prefetchQuery(['repoData'], fetchRepoData);
  return { props: { dehydratedState: dehydrate(queryClient) } };
}

11. Query Selectors – Lọc Dữ Liệu Từ Cache

Với thuộc tính select, bạn có thể lọc hoặc biến đổi dữ liệu trước khi sử dụng:

javascriptCopy codeconst { data } = useQuery(['repoData'], fetchRepoData, {
  select: (data) => data.name, // Chỉ lấy tên repository
});

Kết luận

React Query cung cấp rất nhiều tính năng nâng cao giúp quản lý trạng thái máy chủ hiệu quả hơn, đặc biệt là khi xử lý các tác vụ phức tạp như caching, revalidation, và SSR. Điều này giúp các lập trình viên tối ưu hóa hiệu suất và tạo ra trải nghiệm người dùng tốt hơn trong các ứng dụng React.