React Query 是什么？
官方 About：Hooks for fetching, caching and updating asynchronous data in React.
翻译过来就是：用于在 React 中获取、缓存和更新异步数据的 hooks
快速上手 useQuery
首先编写fetchPhrase函数以从API中获取数据，该函数看起来像这样
我正在使用fetch()。但是我们也可以使用Axios或其他方法。
const fetchPhrase = async () => {
const res = await fetch("https://international.v1.hitokoto.cn")
return res.json()
}现在从React Query导入useQuery
import { useQuery } from "react-query";现在我们可以使用useQuery钩子来管理数据提取，如下所示
const response = uesQuery("phrase", fetchPhrase);现在，useQuery的响应返回非常重要。它具有以下属性
data,
error,
failureCount,
isError,
isFetched,
isFetchedAfterMount,
isFetching,
isIdle,
isLoading,
isPreviousData,
isStale,
isSuccess,
refetch,
remove,
status,data是我们获取的实际数据。根据响应，status将为loading、error、success、idle。所有这些属性都有不同的用途。有关useQuery挂钩的更多信息，请参考官方文档
在我的示例中，我将仅使用data和status属性，如下所示：
const { data, status } = useQuery('phrase', fetchPhrase)现在我们可以在浏览器中显示他们，完整代码：
import React from 'react';
import './App.css';
import { QueryClient, QueryClientProvider, useQuery } from "react-query";
const queryClient = new QueryClient()
const Phrase = () => {
const fetchPhrase = async () => {
const res = await fetch("https://international.v1.hitokoto.cn")
return res.json()
};
const { data, status, refetch } = useQuery('phrase', fetchPhrase)
const renderPhrase = () => {
switch (status) {
case 'error':
return (
<p>Error fetchPhrase data</p>
)
case 'loading':
return (
<p>Fetching data...</p>
)
case 'success':
return (
<p>{JSON.stringify(data)}</p>
)
default:
return null
}
}
return (
<>
<button onClick={refetch}>refetchPhrase</button>
{renderPhrase()}
</>
)
}
const App = () => {
return (
<QueryClientProvider client={queryClient}>
<div className="App">
<Phrase />
</div>
</QueryClientProvider>
);
}
export default App;主要 API
useQuery
useQuery需要三个参数，分别是queryKeys，queryFunc，options？
- queryKeys：作为
useQuery查询的唯一标识，该值唯一，可以是string、array、object - queryFunc：取数据的异步方法，无特殊配置下，会在某个组件实例第一次执行到
hooks的时候调用，它的返回值就是data的值 - options: 配置项，通过这个参数可以配置很多的内置功能，比如 网络恢复时自动
query、窗口失焦后获得焦点自动query、错误自动重试、缓存过期时间等等
包括上面提到的queryFunc执行时机，就可以通过配置enabled为false来避免调用，可以用于实现一些有前置数据依赖的场景
QueryClientProvider
使用QueryClientProvider组件连接并提供一个QueryClient到你的应用程序:
<QueryClientProvider client={queryClient} contextSharing={false}>
// contextSharing 默认为false
// 若为true，将共享第一个和至少一个实例的上下文窗口，以确保在不同的包或 microfrontends 他们都使用相同的实例的上下文
...
</QueryClientProvider>QueryCache
React Query的支柱，它管理每个查询的所有状态、缓存、生命周期
存储包含的所有数据、元信息和查询状态,通常是使用queryClient对缓存的操作，而不是直接操作
useQueryClient
获得当前使用的queryClient。queryClient是用来储存和调度各种异步操作的状态与数据的核心模块
- getQueryData: 获取缓存中的
key对应的data - setQueryData: 设置缓存中的
key对应的data（可以用作乐观更新！） - fetchQuery: 发起查询
- prefetchQuery: 发起查询，但是不返回数据
const queryClient = useQueryClient()
// 返回上文中的数据
queryClient.getQueryData('phrase')参考文档
React Query 官方文档
React Query （useQuery）用法
react-query 辅助性hook、queryClient属性方法、useQueryClient、QueryClientProvider、QueryCache、MutationCache
版权属于：谁把年华错落成诗 所有，转载请注明出处！
本文链接：https://blog.pomears.com/archives/65.html
如果博客部分链接出现404，请留言或者联系博主修复。
