Blog

Cách sử dụng ReactJS Query để lấy dữ liệu từ API

Hãy học cách sử dụng ReactJS Query, một thư viện giúp đơn giản hóa việc lấy và lưu trữ dữ liệu cho các ứng dụng React, để lấy dữ liệu từ API và hiển thị trên website của bạn.

Minh Triết

Minh Triết

5 tháng 6 2025

Cách sử dụng ReactJS Query để lấy dữ liệu từ API

Trong bài viết blog này, tôi sẽ cho bạn thấy cách sử dụng ReactJS Query để lấy dữ liệu từ API và hiển thị nó trên trang web của bạn cũng như cách tạo mã ReactJS Query của bạn với Apidog

button

ReactJS Query là gì và Tại sao Bạn Nên Sử Dụng Nó?

ReactJS Query là một thư viện giúp bạn quản lý việc lấy dữ liệu, lưu trữ và cập nhật trong các ứng dụng React của bạn. Nó dựa trên ý tưởng về truy vấn, là các hàm lấy dữ liệu từ một API hoặc bất kỳ nguồn nào khác. ReactJS Query xử lý việc tải, lưu trữ, lấy lại và xử lý lỗi của các truy vấn này cho bạn, vì vậy bạn không cần phải lo lắng về chúng.

ReactJS Query cũng cung cấp cho bạn bộ biến đổi, là các hàm cập nhật dữ liệu trên máy chủ hoặc bất kỳ nguồn nào khác. ReactJS Query xử lý các cập nhật lạc quan, hoàn tác và xử lý lỗi của các bộ biến đổi này cho bạn, vì vậy bạn cũng không cần phải lo lắng về chúng.

ReactJS Query cũng tích hợp một cách liền mạch với React, sử dụng các hook và component tùy chỉnh cho phép bạn truy cập và thao tác dữ liệu trong các component của bạn. ReactJS Query cũng hỗ trợ các tính năng như phân trang, cuộn vô hạn, lấy dữ liệu nền, truy vấn phụ thuộc và nhiều hơn thế nữa.

REact

Vậy tại sao bạn nên sử dụng ReactJS Query? Dưới đây là một số lợi ích của việc sử dụng ReactJS Query trong các ứng dụng React của bạn:

Cách cài đặt và thiết lập ReactJS

ReactJS là một thư viện JavaScript để xây dựng giao diện người dùng. Để cài đặt và thiết lập ReactJS trên máy tính của bạn, bạn có thể làm theo các bước sau:

npx create-react-app my-app

Lệnh này sẽ tạo một thư mục có tên my-app trong thư mục hiện tại, và tạo cấu trúc dự án ban đầu cũng như cài đặt các dependencies phụ.

cd my-app
npm start

Các lệnh này sẽ khởi động máy chủ phát triển và mở ứng dụng của bạn trong trình duyệt tại http://localhost:3000/. Bạn có thể chỉnh sửa các tệp trong thư mục src và xem các thay đổi trong trình duyệt.

Chỉ vậy thôi! Bạn đã cài đặt và thiết lập thành công ReactJS trên máy tính của bạn, và bạn đã tạo và chạy ứng dụng ReactJS đầu tiên của mình. Bạn có thể tìm hiểu thêm về ReactJS từ trang web chính thức, nơi bạn có thể tìm thấy tài liệu, ví dụ, hướng dẫn và hơn thế nữa.

Cách tạo và sử dụng truy vấn với ReactJS Query

Bây giờ bạn đã biết cách cài đặt và thiết lập ReactJS Query, hãy xem cách tạo và sử dụng truy vấn với ReactJS Query. Các truy vấn là khái niệm cốt lõi của ReactJS Query, và chúng là cách chính để lấy và hiển thị dữ liệu từ API.

Như chúng ta đã thấy ở phần trước, bạn có thể sử dụng hook useQuery để tạo và sử dụng các truy vấn trong các component React của bạn. Hook useQuery nhận hai tham số: một khóa truy vấn và một hàm truy vấn. Khóa truy vấn là một định danh duy nhất cho truy vấn của bạn, và hàm truy vấn là một hàm lấy dữ liệu từ một điểm cuối API và trả về một promise.

Hook useQuery trả về một đối tượng chứa các thuộc tính sau:

Cách Lấy Dữ Liệu với ReactJS Query

Tính năng cốt lõi của ReactJS Query là lấy dữ liệu với các truy vấn. Các truy vấn là các hàm lấy dữ liệu từ một API hoặc bất kỳ nguồn nào khác. ReactJS Query cung cấp cho bạn một hook tùy chỉnh gọi là useQuery, cho phép bạn sử dụng các truy vấn trong các component của bạn.

Hook useQuery nhận hai tham số: một khóa truy vấn và một hàm truy vấn. Khóa truy vấn là một định danh duy nhất cho truy vấn của bạn, có thể là một chuỗi hoặc một mảng. Hàm truy vấn là một hàm trả về một promise mà sẽ giải quyết với dữ liệu bạn muốn lấy.

Ví dụ, giả sử bạn muốn lấy danh sách các bài đăng từ một API giả mạo bằng cách sử dụng ReactJS Query. Bạn có thể tạo một hàm truy vấn sử dụng API fetch để lấy dữ liệu:

// Định nghĩa một hàm truy vấn lấy bài đăng
const fetchPosts = async () => {
  // Sử dụng API fetch để lấy dữ liệu
  const response = await fetch('https://jsonplaceholder.typicode.com/posts')
  // Phân tích phản hồi thành JSON
  const data = await response.json()
  // Trả về dữ liệu
  return data
}

Rồi, bạn có thể sử dụng hook useQuery trong component của bạn, truyền khóa truy vấn 'posts' và hàm truy vấn fetchPosts:

// Sử dụng hook useQuery để lấy bài đăng
const { data, isLoading, isError, error } = useQuery('posts', fetchPosts)

Hook useQuery trả về một đối tượng với một số thuộc tính mà bạn có thể sử dụng để truy cập và thao tác dữ liệu. Những thuộc tính quan trọng nhất là:

Bạn có thể sử dụng các thuộc tính này để render component của bạn dựa trên trạng thái của truy vấn. Ví dụ, bạn có thể hiển thị một biểu tượng loading trong khi truy vấn đang tải, một thông báo lỗi nếu truy vấn có lỗi, hoặc một danh sách bài đăng nếu truy vấn thành công:

// Render component dựa trên trạng thái của truy vấn
return (
  <div>
    {isLoading && <div>Đang tải...</div>}
    {isError && <div>Lỗi: {error.message}</div>}
    {data && (
      <ul>
        {data.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    )}
  </div>
)

Đó là cách bạn lấy dữ liệu với ReactJS Query. ReactJS Query sẽ tự động lưu trữ dữ liệu cho bạn và lấy lại khi component được gắn, tháo gỡ hoặc khi khóa truy vấn thay đổi. Bạn cũng có thể tùy chỉnh hành vi của truy vấn bằng cách sử dụng nhiều tùy chọn khác nhau, chẳng hạn như staleTime, refetchOnWindowFocus, retry, và nhiều hơn nữa. Bạn có thể tìm thấy danh sách đầy đủ các tùy chọn và mô tả của chúng trong tài liệu ReactJS Query.

Cách sử dụng Apidog để tạo mã client ReactJS Query

Apidog là một nền tảng web giúp bạn khám phá, kiểm tra và tích hợp các API web một cách dễ dàng. Một trong những tính năng mà Apidog cung cấp là khả năng tạo mã client Fetch chỉ với một cú nhấp chuột, dựa trên thông số kỹ thuật API mà bạn cung cấp hoặc chọn.

button
Apidog
Apidog

Bạn có thể sử dụng mã được tạo trong dự án của riêng bạn, hoặc sửa đổi nó theo ý muốn. Bạn cũng có thể kiểm tra mã với máy chủ giả lập Apidog, mô phỏng các phản hồi API dựa trên thông số kỹ thuật của bạn.

Kết luận

ReactJS Query là một thư viện mạnh mẽ và linh hoạt có thể làm cho trải nghiệm lấy dữ liệu của chúng ta trở nên dễ dàng và tốt hơn rất nhiều. Nó có thể làm việc với bất kỳ điểm cuối API nào trả về dữ liệu JSON, và nó có thể tích hợp với bất kỳ component hoặc thư viện React nào.

Trong bài viết blog này, chúng tôi đã học cách sử dụng ReactJS Query để lấy dữ liệu từ API và hiển thị nó trên trang web của chúng tôi. Chúng tôi đã thấy cách ReactJS Query đơn giản hóa việc lấy dữ liệu và lưu trữ cho các ứng dụng React, và cách tạo mã ReactJS Query với Apidog. Cảm ơn bạn đã đọc và chúc bạn lập trình vui vẻ!

button

Thực hành thiết kế API trong Apidog

Khám phá cách dễ dàng hơn để xây dựng và sử dụng API

Đăng ký miễn phíTải xuống