Một số khái niệm cơ bản trong React Query

Chào các bạn đã trở lại bài 2 của mình về React Query. Ở bài này mình sẽ nói sơ qua về một số khái niệm cơ bản có trong React Query. Mình tin sau khi đọc hết bài viết này, các bạn sẽ hiểu rõ hơn về các khái niệm cơ bản về React Query và cách sử dụng nó để quản lý dữ liệu trong React.

React Query là một thư viện tập hợp cho việc quản lý trạng thái và dữ liệu trong React. Nó cung cấp các tính năng và API để giúp cho việc lấy dữ liệu từ API, lưu trữ dữ liệu và quản lý trạng thái giữa các component.

• State Management: React Query cung cấp một cách quản lý trạng thái cho dữ liệu trong app, bao gồm cả việc quản lý trạng thái loading, error, và kết quả trả về.
• Query: Là một đối tượng chứa các thông tin liên quan đến việc lấy dữ liệu và trạng thái hiện tại của việc lấy dữ liệu.
• Query Cache: Là một kho dữ liệu để lưu trữ các Query. Nó cung cấp các tính năng để truy cập và quản lý các Query.
• Query Hooks: Là các hook cung cấp cho việc sử dụng Query trong React component. Các hook này giúp cho việc lấy dữ liệu, cập nhật trạng thái và quản lý lỗi.
• Query Key: Query Key là một chuỗi dùng để định danh mỗi yêu cầu dữ liệu. Nó giúp React Query tìm và quản lý các yêu cầu trong Query Cache.
• Refetching: Là việc tái lấy dữ liệu một cách tự động hoặc bằng cách gọi một function.
• Suspense: Là một tính năng của React Query cho phép việc hiển thị nội dung trong khi đang chờ đợi dữ liệu.
• Revalidation: Revalidation là việc kiểm tra xem dữ liệu trong Query Cache còn hợp lệ hay không. Nếu dữ liệu không hợp lệ, React Query sẽ gửi yêu cầu dữ liệu mới.

Ví Dụ

Ví dụ 1

Chúng ta có một ứng dụng cần tải danh sách sản phẩm từ API. Chúng ta có thể sử dụng React Query để tải dữ liệu và quản lý cache của dữ liệu đó.

 import { useQuery } from 'react-query';

function ProductList() {
  const { data, status } = useQuery('products', async () => {
    const response = await fetch('https://api.example.com/products');
    return response.json();
  });

  if (status === 'loading') {
    return <div>Loading...</div>;
  }

  if (status === 'error') {
    return <div>Error: {error.message}</div>;
  }

  return (
    <ul>
      {data.map((product) => (
        <li key={product.id}>{product.name}</li>
      ))}
    </ul>
  );
}

Trong ví dụ trên, chúng ta sử dụng hook useQuery để tải dữ liệu sản phẩm từ API. Nếu dữ liệu đã được cache, nó sẽ được trả về từ cache mà không cần tải lại. Nếu chưa, nó sẽ tải dữ liệu mới và cache dữ liệu đó.

Ví dụ 2

Bạn có một mảng chứa các đối tượng của nhân viên với thông tin về tên, trình độ và lương. Bạn muốn tìm tất cả những nhân viên có trình độ "senior". Bạn có thể sử dụng React Query để thực hiện việc này.

import { useQuery } from 'react-query';

function getSeniorEmployees() {
  return fetch('/api/employees')
    .then(res => res.json())
    .then(data => data.filter(employee => employee.level === 'senior'));
}

function EmployeesList() {
  const { isLoading, error, data } = useQuery('seniorEmployees', getSeniorEmployees);

  if (isLoading) return 'Loading...';
  if (error) return 'An error has occurred';

  return (
    <ul>
      {data.map(employee => (
        <li key={employee.name}>{employee.name}</li>
      ))}
    </ul>
  );
}

Trong ví dụ trên, chúng ta sử dụng hàm useQuery để thực hiện truy vấn cho dữ liệu nhân viên có trình độ "senior". Chúng ta sử dụng hàm getSeniorEmployees để truy xuất dữ liệu từ API và lọc các nhân viên có trình độ "senior".

Kết Bài

Ở bài này mình đã nói sơ qua những khái niệm cơ bản của React Query. Ở bài tới mình sẽ bắt đầu setup một project nhỏ và hướng dẫn từng hàm để giúp các bạn nắm rõ hơn về React Query. Cảm ơn đã quan tâm về Series React Query.