Tương tự với RTK Query, ta cũng gọi các request thực hiện truy vấn dữ liệu từ API ở trong React Query là các query. Một số option hữu dụng khi làm việc với query của React Query:
Query Key
Ta nên đặt giá trị của query key tương ứng với API endpoint mà ta muốn sử dụng.
Giả sử ta có các API endpoint sau:
/products
/products/1
/products?color="red"
/products/2/ratingsQuery key tương ứng với chúng sẽ là:
;["products"][("products", productId)][("products", { color: "red" })][
("products", productId, "ratings")
]Query Function
Query function có thể nhận vào một object. Thuộc tính queryKey ở trong object này cho phép ta truy cập đến giá trị của query key:
const productsQuery = useQuery({
queryKey: ["products"],
queryFn: async ({ queryKey }) => {
console.log(queryKey) // ["products"]
},
})Refetch Interval
Ta cũng có thể dùng thuộc tính refetchInterval để re-fetch query theo chu kỳ (tương tự như pollingInterval) của RTK Query (xem thêm Queries in RTK Query).
Ví dụ, query bên dưới sẽ được re-fetch sau mỗi 1 giây.
const productsQuery = useQuery({
// ...
refetchInterval: 1000,
})Enable
Thuộc tính enabled có thể giúp ngăn cản sự thực thi của query.
const productsQuery = useQuery({
// ...
enabled: loggedIn,
})Trong ví dụ trên, query productsQuery chỉ được thực thi khi nào giá trị của biến loggedIn là true.
Placeholder Data
Chúng ta có thể dùng thuộc tính placeholderData để chỉ định placeholder data được hiển thị trong khi chờ xử lý query:
const productQuery = useQuery({
// ...
placeholderData: { name: "The Best Shoe", price: 100 },
})