React Query là một thư viện mạnh mẽ và tiện lợi cho việc quản lý dữ liệu từ server trong các dự án. Nhờ khả năng lưu trữ dữ liệu vào cache, đồng bộ hóa, và quản lý trạng thái API, React Query ngày càng được sử dụng rộng rãi. Hãy cùng tìm hiểu về các khái niệm quan trọng và cách sử dụng cơ bản của thư viện này.

Khái niệm về React Query

React Query giúp xử lý dữ liệu từ server, đồng bộ hóa và quản lý trạng thái API (như loading, error, success,…) hiệu quả. Dưới đây là một số khái niệm cơ bản cần nắm rõ khi làm việc với thư viện này:

• Query: Dùng để lấy dữ liệu từ server hoặc nguồn dữ liệu khác. Sử dụng useQuery để định nghĩa một query với key và hàm fetcher.
• Mutation: Dùng để thay đổi dữ liệu như thêm, sửa hoặc xóa. Được sử dụng thông qua useMutation.
• Cache: React Query tự động lưu trữ dữ liệu trong bộ nhớ cache để cải thiện hiệu suất và giảm số lần gửi request đến server.
• Query Invalidation: Khi dữ liệu thay đổi, cần làm mới các query liên quan để cập nhật giao diện. Thư viện này cung cấp các phương thức để vô hiệu hóa query và cập nhật dữ liệu.
• Background Fetching: React Query hỗ trợ việc lấy dữ liệu trong nền, đảm bảo rằng dữ liệu luôn được cập nhật mà không làm gián đoạn trải nghiệm người dùng.

Cách sử dụng React Query trong dự án

Cách cài đặt khá đơn giản. Dưới đây là hướng dẫn cơ bản:

1. Khai Báo

javascriptCopy codeimport React from 'react';
import { QueryClientProvider, QueryClient } from 'react-query';
import Main from './Main';

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: 0,
      cacheTime: 0,
      refetchOnWindowFocus: false,
    },
  },
});

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Main />
    </QueryClientProvider>
  );
}

export default App;

QueryClientProvider bao bọc ứng dụng và cung cấp các query, mutation.

2. Sử dụng useQuery

useQuery dùng để lấy dữ liệu từ server và quản lý các trạng thái của dữ liệu.

javascriptCopy codeimport { useQuery } from 'react-query';

function Example() {
  const { isPending, error, data } = useQuery({
    queryKey: ['repoData'],
    queryFn: () => fetch('https://example.com').then(res => res.json()),
  });

  if (isPending) return 'Loading...';
  if (error) return `An error has occurred: ${error.message}`;

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.description}</p>
      <strong>{data.subscribers_count}</strong>
      <strong>{data.stargazers_count}</strong>
      <strong>{data.forks_count}</strong>
    </div>
  );
}

3. Sử dụng useMutation

useMutation giúp thực hiện các hành động thay đổi dữ liệu như thêm, sửa hoặc xóa.

javascriptCopy codeimport React from 'react';
import { useMutation } from 'react-query';

function SubmitButton() {
  const mutation = useMutation(data => 
    fetch('https://example.com/api/submit', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data),
    }), {
      onSuccess: () => alert('Data submitted successfully!'),
      onError: error => alert(`Error: ${error.message}`),
    }
  );

  const handleSubmit = () => {
    mutation.mutate({ value: '' });
  };

  return (
    <div>
      <button onClick={handleSubmit} disabled={mutation.isLoading}>
        {mutation.isLoading ? 'Submitting...' : 'Submit'}
      </button>
      {mutation.isError && <div>Error: {mutation.error.message}</div>}
      {mutation.isSuccess && <div>Data submitted successfully!</div>}
    </div>
  );
}

export default SubmitButton;

Lưu ý: Bên trên chỉ là ví dụ cơ bản nhất, nếu muốn tìm hiểu thêm về revalidate, cache,… Vui lòng tham khảo tài liệu tại đây.