用 React Query 來管理數(shù)據(jù)請求

1、用 react query 來管理數(shù)據(jù)請求背景 在項(xiàng)目中，通常都需要跟服務(wù)端舉行異步的數(shù)據(jù)交互，這包括查詢和變更。 以一個容易的列表查詢?yōu)槔?，我們通過 axios 去哀求服務(wù)端的列表數(shù)據(jù)： ok ! 數(shù)據(jù)已經(jīng)勝利的取到了，也就是我們完成了跟服務(wù)端的一次查詢交互了?，F(xiàn)在我們來嘗試更進(jìn)一步，在 react 中可以通過實(shí)現(xiàn)一個 hooks 把查詢做的更優(yōu)雅一點(diǎn)： perfect !? 并沒有! 我們遺漏了十分重要的哀求狀態(tài)的處理，包括異樣和哀求舉行中的狀況，讓我們繼續(xù)完美 uselistquery: 以上，就是一個典型的哀求處理的場景，為了實(shí)現(xiàn)它，我們寫了近 30 行代碼 . 用來刷代碼行數(shù)也是極其

2、不錯的 . 那莫非沒有一種標(biāo)準(zhǔn)的哀求處理模式嗎？固然有！接下來我們進(jìn)入正題，來看看 reactquery的解決計劃。 哀求處理模式 初識 reactquery 的第一印象，通常都源于它提供的開箱即用的 query 和 mutation 的 api. 哦，react 有一個哀求庫了 這就是 reactquery 能力的第一重境界 - 哀求處理。 它通過 usequery、usemutation 等 hooks api, 提供了一系列標(biāo)準(zhǔn)的哀求處理模式。 那么首先來看看 reactquery 是怎么處理我們的列表哀求的： usequery 通常包含兩個參數(shù)： 一個能唯一標(biāo)識這個哀求的 query

3、key 一個真正執(zhí)行哀求并返回數(shù)據(jù)的異步辦法 reactquery 的緩存策略是基于這個 key 來實(shí)現(xiàn)的。key 值除了字符串外，還可以是一個數(shù)組或者對象： usequery(&39;list&39;, .) usequery(&39;list&39;, .) / 數(shù)組或?qū)ο笞鳛?key 時通常都包含查詢條件 usequery(&39;list&39;, 1, .) userquery(&39;list&39;, page: 1 ) usequery( type: &39;list&39;, page: 1 )

4、query key 唯一的要求就是可以被序列化。 而對于哀求辦法，usequery 要求是一個 then-able 的函數(shù)即可，在我們?nèi)粘Ｓ梅顩r中，通常指代的就是返回 promise, 而 promise 的返回值即哀求的響應(yīng)數(shù)據(jù)。 更多關(guān)于 userquery 的使用可挺直參考 userquery api reference 與 usequery 類似，reactquery 也提供了數(shù)據(jù)變更的 hooks api: usemutation 的參數(shù)通常包含一個真正執(zhí)行哀求的異步辦法，返回值第一項(xiàng)為規(guī)律完備的 mutate 異步辦法，在按鈕點(diǎn)擊后，可以通過調(diào)用 mutate 提交數(shù)據(jù)以及狀態(tài)的

5、處理。 更多關(guān)于 usemutation 的使用可挺直參考 usemutation api reference reactquery 在哀求處理上給我們提供了一個標(biāo)準(zhǔn)的處理計劃，但是它的角色遠(yuǎn)不止哀求庫這么容易。在官方文檔的 overview 中作者就給了一個定位： react query is often described as the missing data-fetching library for react, but in more technical terms, it makes fetching, caching, synchronizing and updating ser

6、ver state in your react applications a breeze. 那么接下來，進(jìn)入 reactquery 的其次重境界 - 全局服務(wù)端狀態(tài)管理。 global server state management 什么是 server state 首先，我們需要知道什么是服務(wù)端狀態(tài)。在無意識的行為中，我們通常都將全部的組件渲染所需要的數(shù)據(jù)都放在一起管理，比如放在 state 中或者通過 redux 這類狀態(tài)管理庫來管理。 然而，我們再來斟酌一下我們的數(shù)據(jù)，是不是通常都有顯然的來源特征： 列表數(shù)據(jù)、細(xì)節(jié)數(shù)據(jù)等通過調(diào)接口由服務(wù)端提供的數(shù)據(jù)； 選中狀態(tài)、折疊狀態(tài)這類由客戶端來維

7、護(hù)的狀態(tài)； 基于數(shù)據(jù)的來源，我們就可以將組件渲染所需要的狀態(tài)分為服務(wù)端狀態(tài)和客戶端狀態(tài)。 reactquery 的狀態(tài)管理 reactquery 就將我們?nèi)康姆?wù)端狀態(tài)維護(hù)在全局，并協(xié)作它的緩存策略來執(zhí)行數(shù)據(jù)的存儲和更新。借助于這樣的特性，我們就可以將全部跟服務(wù)端舉行交互的數(shù)據(jù)從類似于 redux 這樣的狀態(tài)管理工具中剝離，而所有交給 reactquery 來管理。 reactquery 會在全局維護(hù)一個服務(wù)端狀態(tài)樹，按照 query key 去查找狀態(tài)樹中是否有可用的數(shù)據(jù)，假如有則挺直返回，否則則會發(fā)起哀求，并將哀求結(jié)果以 query key 為主鍵存儲到狀態(tài)樹中。 緩存 reactque

8、ry 的緩存策略用法了 stale-while-revalidate. 在 mdn 的 cache control 中對這個緩存策略的說明是： 客戶端情愿接受陳舊的響應(yīng)，同時在后臺異步檢查新的響應(yīng) 在 reactquery 中的體現(xiàn)是，可以接受狀態(tài)樹中存儲的 stale 狀態(tài)數(shù)據(jù), 并且會在緩存失效、新的查詢實(shí)例被構(gòu)建或 refetch 等行為后執(zhí)行更新狀態(tài)。 關(guān)于 reactquery 緩存的處理過程，官方給了一個具體的示例 reactquery 還能解決這些問題 刷新列表狀態(tài) 日常開發(fā)工作中常常需要處理在添加、刪除或者編輯后刷新列表的數(shù)據(jù)。為了實(shí)現(xiàn)這個行為，我們通常需要將列表數(shù)據(jù)的狀態(tài)抽取

9、到列表和細(xì)節(jié)的父組件中去管理： 然而，在模式上，列表數(shù)據(jù)的只是 list 組件的數(shù)據(jù)源，應(yīng)當(dāng)收斂到 list 組件中去管理，而不應(yīng)當(dāng)放在父組件中。那假如這樣的話，兄弟組件之間如何通信以達(dá)到更新列表數(shù)據(jù)的目的？似乎問題變得越來越復(fù)雜 . 不怕！reactquery 來幫我們解這個問題—— 前面我們說過 reactquery 維護(hù)的是一個全局的狀態(tài)樹，那既然是全局的，問題不就容易了： 喂！細(xì)節(jié)頁數(shù)據(jù)已經(jīng)提交了，幫我更新下 query key 為 list 的數(shù)據(jù)吧！ reactquery 提供了 querycache.invalidatequeries 可以

10、挺直指定某個 query key 的緩存數(shù)據(jù)失效，這樣 reactquery 就會在后臺自動重新拉取最新的數(shù)據(jù)并更新到狀態(tài)樹中，這樣列表組件中就渲染最新的數(shù)據(jù)了！完善！ usepaginatedquery 和 useinfinitequery 除了基礎(chǔ)的 usequery 外，reactquery 還提供了 usepaginatedquery 和 useinfinitequery, 分離來處理 分頁 和 無限加載 兩個細(xì)分場景下的查詢。 通過上述 api, 可以讓我們在代碼中免去維護(hù)類似于 分頁 這樣的客戶端狀態(tài)。 const pagination, setpagination = react.usestate( currentpage: 1, pagesize: 10, totalsize: 0 ); 在用法 usepaginatedquery 和 useinfinitequery 時，一定要保證 query key 的唯一性，否則會造成難以預(yù)料的分頁數(shù)據(jù)的混亂。 更多 除了本文中提到的這些基礎(chǔ)能力外，reactquery 還提供了 prefetching、ssr、optimistic updates 等高級特性。 另外，除了我們上面用到的 querycache.invalidatequeries , querycache 還包含無數(shù) api 來便利我們做一些手動的的狀