Tìm Hiểu React-Query

Trong thế giới phát triển ứng dụng web hiện đại, việc quản lý trạng thái và dữ liệu từ server là một trong những thách thức lớn nhất mà các nhà phát triển phải đối mặt. React-Query, một thư viện quản lý trạng thái dành cho React, đã trở thành một giải pháp phổ biến giúp giải quyết vấn đề này. Bài viết này sẽ giới thiệu tổng quan về React-Query, cách sử dụng nó trong các dự án React, và một số ví dụ thực tế.

Giới Thiệu React-Query

React-Query là một thư viện quản lý trạng thái dành cho React được tạo ra để quản lý và tương tác với các dữ liệu từ API hoặc bất kỳ nguồn dữ liệu bất đồng bộ nào khác. Nó cung cấp một cách đơn giản và hiệu quả để fetch, cache và cập nhật dữ liệu trong ứng dụng React mà không cần quản lý trạng thái hoặc viết logic phức tạp

Tại Sao Nên Sử Dụng React-Query?

1. Quản Lý Cache Dễ Dàng: React-Query tự động quản lý cache, giúp giảm thiểu số lần yêu cầu không cần thiết đến server và cải thiện hiệu suất ứng dụng.
2. Tự Động Cập Nhật Dữ Liệu: Thư viện này hỗ trợ refetching dữ liệu khi có sự kiện nhất định, như khi cửa sổ được focus lại hoặc kết nối mạng được khôi phục.
3. Dễ Dàng Tích Hợp: React-Query có thể dễ dàng tích hợp với bất kỳ dự án React nào, giúp quản lý dữ liệu từ server một cách hiệu quả.

Cài Đặt và Cấu Hình

Để bắt đầu sử dụng React-Query, bạn cần cài đặt thư viện thông qua npm hoặc yarn:

npm install react-query
# hoặc
yarn add react-query

Sau khi cài đặt, bạn cần bao bọc ứng dụng của mình trong QueryClientProvider và cung cấp một phiên bản của QueryClient:

import { QueryClient, QueryClientProvider } from 'react-query';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      {/* Các thành phần của ứng dụng */}
    </QueryClientProvider>
  );
}

Fetching Dữ Liệu Với useQuery

useQuery là một hook cung cấp bởi React-Query để fetch dữ liệu. Bạn cần truyền vào một queryKey và một hàm fetch dữ liệu:

import { useQuery } from 'react-query';

function Todos() {
  const { data, error, isLoading } = useQuery('todos', fetchTodos);

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

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

Trong ví dụ trên, useQuery sẽ tự động fetch dữ liệu từ hàm fetchTodos và cung cấp trạng thái và dữ liệu cho component. React-Query sẽ tự động cache dữ liệu và chỉ refetch khi cần thiết.

Cập Nhật Dữ Liệu Với useMutation

useMutation là một hook khác của React-Query giúp bạn cập nhật dữ liệu. Bạn có thể sử dụng nó để thực hiện các yêu cầu POST, PUT, DELETE:

import { useMutation } from 'react-query';

function AddTodo() {
  const mutation = useMutation(addTodo);

  return (
    <button
      onClick={() => {
        mutation.mutate({ id: Date.now(), title: 'Do Laundry' });
      }}
    >
      Create Todo
    </button>
  );
}

Trong ví dụ trên, useMutation được sử dụng để thêm một todo mới. Hàm mutate được gọi với dữ liệu mới, và React-Query sẽ tự động thực hiện yêu cầu và cập nhật cache nếu cần.

Kết Luận

React-Query là một thư viện mạnh mẽ và linh hoạt giúp quản lý dữ liệu từ server trong các ứng dụng React. Với khả năng tự động quản lý cache và cập nhật dữ liệu, React-Query giúp giảm thiểu độ phức tạp và cải thiện hiệu suất ứng dụng. Bằng cách sử dụng các hook như useQuery và useMutation, bạn có thể dễ dàng fetch và cập nhật dữ liệu mà không cần quản lý trạng thái hoặc viết logic phức tạp.