React Query 是一個(gè)用于在 React 應(yīng)用中管理服務(wù)器狀態(tài)的庫(kù)。它提供了一套簡(jiǎn)單而強(qiáng)大的工具來(lái)處理數(shù)據(jù)獲取、緩存、同步和更新。

關(guān)鍵特性：

1. 數(shù)據(jù)獲取和緩存：自動(dòng)緩存請(qǐng)求的數(shù)據(jù)，并在需要時(shí)重新獲取。

2. 狀態(tài)管理：輕松管理加載、錯(cuò)誤和成功狀態(tài)。

3. 分頁(yè)和無(wú)限加載：支持分頁(yè)和無(wú)限滾動(dòng)的數(shù)據(jù)獲取。

4. 后臺(tái)刷新：可以在后臺(tái)自動(dòng)刷新數(shù)據(jù)以保持最新。

5. SSR 支持：支持服務(wù)器端渲染（SSR）和靜態(tài)站點(diǎn)生成（SSG）。

6. 樂(lè)觀更新：允許在變更前更新 UI，以提高用戶體驗(yàn)。

核心 API

1. QueryClient

   • new QueryClient(): 創(chuàng)建一個(gè)新的 QueryClient 實(shí)例。

2. QueryClientProvider

   • <QueryClientProvider client={queryClient}>: 提供 QueryClient 的上下文。

3. useQuery

   • useQuery(queryKey, queryFn, options): 獲取數(shù)據(jù)的主要鉤子。

4. useMutation

   • useMutation(mutationFn, options): 用于創(chuàng)建或更新數(shù)據(jù)的鉤子。

5. useQueryClient

   • useQueryClient(): 獲取當(dāng)前的 QueryClient 實(shí)例。

高級(jí) API

6. useQueries

   • useQueries(queryConfigs): 并行獲取多個(gè)查詢。

7. useInfiniteQuery

   • useInfiniteQuery(queryKey, queryFn, options): 用于獲取分頁(yè)數(shù)據(jù)。

8. useIsFetching

   • useIsFetching(queryKey): 檢查是否有正在進(jìn)行的查詢。

9. useIsMutating

   • useIsMutating(mutationKey): 檢查是否有正在進(jìn)行的變更。

10. useHydrate

    • useHydrate(state): 用于在 SSR 中恢復(fù)狀態(tài)。

工具函數(shù)

11. QueryClient Methods

    • queryClient.fetchQuery(): 手動(dòng)觸發(fā)查詢。
    • queryClient.prefetchQuery(): 預(yù)取數(shù)據(jù)。
    • queryClient.invalidateQueries(): 使查詢無(wú)效。
    • queryClient.refetchQueries(): 重新獲取查詢。
    • queryClient.setQueryData(): 手動(dòng)設(shè)置查詢數(shù)據(jù)。
    • queryClient.getQueryData(): 獲取查詢數(shù)據(jù)。

12. dehydrate / hydrate

    • dehydrate(queryClient): 序列化查詢狀態(tài)。
    • hydrate(queryClient, dehydratedState): 恢復(fù)查詢狀態(tài)。

配置

13. QueryCache

    • new QueryCache(): 自定義查詢緩存。

14. MutationCache

    • new MutationCache(): 自定義變更緩存。