Tìm hiểu cơ chế caching của React Query như thế nào nghen

  • admin
  • 8 Tháng Hai, 2023
Lại là TúPêVê đây 😜. Bài này mình cùng tìm hiểu một số khái niệm quan trọng cũng như cơ thế caching của React Query như thế nào nhé 💋
Một số khái niệm ae cần lưu ý nhé
  • staleTime (default 0 ms): Thời gian data được cho là đã cũ. Khi get data xong thì sau một thời gian mình quy định thì data nó sẽ tự cũ. Mặc định 0 là khi get xong là nó cũ ròi á
    • Ae có cài react dev tool thì chỗ stale là nó hiển thị data đã cũ (stale) và thêm cái là active nữa thôi (để cho mình biết đang gọi query key nào á kiểu vậy subcribe) mấy cái dưới cũng là cũ nhưng inactive á nghen
  • cacheTime (default 5*60*1000 ms = 5 phút) : Thời gian data sẽ bị xóa ra khỏi bộ nhớ đệm. Data có thể cũ (stale) nhưng nó chưa bị xóa ra khỏi bộ nhớ đệm vì mình set staleTime < cacheTime. Thường thì người ta sẽ set staleTime < cacheTime. Ví dụ lúc phân trang mình ở trang 1 mình call api có page = 1, trang 2 mình call api có page = 2 thì khi sang trang 1 và 2 lại thì nó thấy data 2 page này còn lưu ở bộ nhớ đệm nên sẽ gọi data lưu ở cached ra và fetch ngầm ở dưới nếu có data mới khác data cache thì nó tự update lại data cached cho mình luôn 😍
  • inactive: Là khi data đó không còn component nào subcribe cả

 

Những state về khoảnh khắc của data

  • isLoading hoặc status === ‘loading’: Query chưa có data
  • isError hoặc status === ‘error’: Query xảy ra lỗi
  • isSuccess hoặc status === ‘success’: Query thành công và data đã có sẵn

Những state về data

  • error: Nếu isError === true hoặc hoặc status === ‘error’ thì error sẽ xuất hiện
  • data: Nếu isSuccess === true hoặc status === ‘success’ thì data sẽ xuất hiện

Đặc biệt là fetchStatus

  • isFetching hoặc fetchStatus === ‘fetching’: Đang fetching API
  • isPaused hoặc fetchStatus === ‘paused’: Query muốn fetch API nhưng bị tạm dừng vì 1 số lý do nào đó
  • fetchStatus === ‘idle’: Query không làm gì cả, chạy xong rồi đang rảnh =))

Nói chung đọc tới đây ae cũng rối cmnr kaka. Tóm lại như này cho khỏe

  1. status cho thông tin data có hay không
  2. fetchStatus cho thông tin về queryFn có đang chạy hay không

Ví dụ thực tế ri cho ae dễ hình dung nghen, không hình dung được thì ib hỏi mình 😁 kaka

  • Click trang 1 call api thì loading = true do chưa có call xong rồi thì loading = false, trang 2,3..n cũng vậy
  • Khi quay về trang 1 hoặc những trang trước đó lại thì loading sẽ là false luôn vì nó đã có data trước đó rồi, nhưng nó vẫn call api ngầm ở dưới á nếu có thay đổi thì nó sẽ cập nhật lại data mới thoi => (isFetching = true lúc call api, khi call xong thì tất nhiên isFetching về false rồi)

Cơ chế caching data

  • Một data mà đã stale (cũ) thì khi mà gọi lại query của data đó, nó sẽ fetch lại api. Nếu không stale thì không fetch lại api. Vì mặc định là staleTime là 0 ms call xong nó cũ rồi. Hoặc setiing staleTime lên 60 * 1000 để 1 phút sau nó mới cũ thì click lại trong 1 phút thì nó không call api
  • Một data mà đã bị xóa khỏi bộ nhớ (tức là quá thời gian cacheTime) thì khi gọi lại query của data đó, nó sẽ fetch lại api (Dĩ nhiên roài). Nếu còn chưa bị xóa khỏi bộ nhớ nhưng đã stale thì nó sẽ trả về data cached và detch api ngầm, sau khi fetch xong nó sẽ update lại data cached và trả về data mới cho bạn

Ví dụ siêu dễ hiểu cho ae về vòng đời caching của React Query

  • A component được mount
    • Vì không có query nào với ['todos'] trước đó, nó sẽ fetch data
    • Khi fetch xong, data sẽ được cache dưới key là ['todos']
    • hook đánh dấu data là stale (cũ) vì sau 0s
  • Bây giờ thì B component được mount ở một nơi nào đó
    • Vì cache data ['todos'] đã có trước đó, data từ cache sẽ trả về ngay lập tức cho component B
    • Vì cache data ['todos'] được cho là đã stale nên nó sẽ fetch api tại component B
      • Không quan trọng function fetchTodos ở A và B có giống nhau hay không, việc fetch api tại B sẽ cập nhật tất cả các state query liên quan của B và A vì 2 component cùng key => cùng subcribe đến một data
    • Khi fetch thành công, cache data ['todos'] sẽ được cập nhật, cả 2 comonent A và B cũng được cập nhật data mới
  • Bây giờ thì A và B unmount, không còn sử dụng nữa, không còn subcribe đến cache data ['todos'] nữa nên data ['todos'] bị cho là inactive
    • Vì inactive nên cacheTime sẽ bắt đầu đếm ngược 5 phút
  • Trước khi cacheTime hết thì ông C comopnent được mount. cache data ['todos'] được trả về ngay lập tức cho C và fetchTodos sẽ chạy ngầm. Khi nó hoàn thành thì sẽ cập nhật lại cache với data mới.
  • Cuối cùng thì C unmount
  • Không còn ai subcribe đến cache data ['todos'] trong 5 phút tiếp theo nữa và cache data ['todos'] bị xóa hoàn toàn
guest
1 Bình luận
Cũ nhất
Mới nhất Được bỏ phiếu nhiều nhất
Phản hồi nội tuyến
Xem tất cả bình luận
mhfed
mhfed
6 tháng trước

Bai viet kha hay

icon.png

Nhấn ESC để đóng

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