Cùng tìm hiểu React Query là gì nghen

  • admin
  • 8 Tháng Hai, 2023

Hello mấy ae bài viết là bài đầu tiên trong chuỗi React Query cùng TúPêVê nghen. Gét Gô thuiiii

TanStack Query là cái tên gọi mới hay có thể gọi React Query là thư viện giúp quản lý các state bất đồng bộ như data từ api
Nó có ưu điểm gì
  • Quản lý cache data và cập nhật cực kỳ đơn giản
  • Không dùng global state, reducer để quản lý, không khó hiểu như redux
  • Có khả năng tương thích và mở rộng với mọi use-case gặp trong thực tế

Vậy nó dùng gì để gọi api

Tanstack Query không đảm nhận việc gọi API, việc gọi API sẽ thực hiện thông qua các thư viện bạn dùng như axios, fetch API. Còn Tanstack Query chỉ đảm nhận việc quản lý data và trigger gọi api khi cần thiết thôi
Như cách thông thường mình dùng useEffect để call api thì sao hè. Mình vd đoạn code mẫu dưới nhé

Với cách này khá dài dòng chúng ta phải set đi set lại state rất là mệt. Còn với react query thì tương đối gọn hơn với code demo mẫu ở dưới

Thấy gọn quá hè, có được data, isLoading mà không cần phải cái useEffect dài dòng nữa =))

Query Key là gì: Nó là 1 cái key định danh cho cái query của mình và React Query nó sẽ quản lý việc query caching dựa trên Query keys của mình. Nó có thể là 1 mảng hoặc 1 số hoặc cái gì cũng được miễn sao để người khác nhìn vào biết được query của mình có nhiệm vụ gì
Query Functions: Nó là 1 function return về promise, promise này có thể return về resolve hoặc error
guest
0 Góp ý
Phản hồi nội tuyến
Xem tất cả bình luận

Nhấn ESC để đóng

0
Rất thích suy nghĩ của bạn, hãy bình luận.x