TanStack Query使用总结
TanStack Query 是一个开源、功能齐全、支持 TypeScript 的库,它支持React，Vue,Svelte，Solid框架
非常适合用于处理客户端状态，处理异步或服务器状态。它非常好用，开箱即用，无需配置，并且可以随着应用的增长而根据自己的喜好进行定制。
查询 Queries
至少需要二个参数
- 查询唯一键值
- 一个Promise 的函数
用例：
queryKey和要调用的promise方法可以不用对象的形式包裹传入，直接直接以多个参数的方式传入
多个参数形式传入
const dataSourceQuery = useQuery(['dataSourceQuery'], () => api.getUseList())
参数用一个对象形式传入
const dataSourceQuery = useQuery({ queryKey: ["dataSourceQuery"], queryFn: api.getUseList })
查询后直接获取参数和状态
const { isLoading, isError, data, error } = useQuery(['dataSourceQuery'], () => api.getUseList())
console.log('isLoading, isError, data, error---',isLoading, isError, data, error)
由于 Vue Query 的获取机制不可知地(agnostically)建立在 Promises 上,因此您可以将 Vue Query 与字面上的任何异步数据获取客户端（包括 GraphQL）一起使用！
const dataSourceQuery = useQuery(['dataSourceQuery'], async () => {
return await api.getUseList()
})
result对象包含一些非常重要的状态
-
isLoading 或者 status === 'loading' - 查询暂时还没有数据
-
isError 或者 status === 'error' - 查询遇到一个错误
-
isSuccess 或者 status === 'success' - 查询成功，并且数据可用
-
除了这些主要状态之外，取决于具体查询的状态，还有更多信息可用：
-
error - 如果查询处于isError状态，则可以通过error属性获取该错误
-
data - 如果查询处于success状态，则可以通过data属性获得数据
查询的键值
Vue Query 在内部基于查询键值来管理查询缓存。 传递给 Vue Query 的查询键值必须是一个数组。
查询功能依赖于变量，则将其包含在查询键值中
const dataSourceQuery = useQuery(['dataSourceQuery',userId], async () => {
return await api.getUseList()
})
依赖查询
使用enabled来进行依赖查询
多个参数形式传入
const dataSourceQuery = useQuery(['dataSourceQuery'], () => api.getUseList(),{enabled: !!userId})
参数用于一个对象形式传入
const dataSourceQuery = useQuery({
queryKey: ["dataSourceQuery"], queryFn: ()=> api.getUseList(),enabled: !!userId
})
查询重试
当useQuery查询失败（查询函数引发错误）时，如果该查询的请求未达到最大连续重试次数（默认 3 次
-
设置retry = false将禁用重试
-
设置retry = 6该函数抛出最终错误前，将重试 6 次
-
设置retry = true将无限次重试失败的请求
-
设置retry =（failureCount，error）=> ...允许基于请求失败的原因进行自定义逻辑
多个参数形式传入
const dataSourceQuery = useQuery(['dataSourceQuery'], () => api.getUseList(),{enabled: !!userId,retry: 6})
对象形式传入
const dataSourceQuery = useQuery({
queryKey: ["dataSourceQuery"], queryFn: ()=> api.getUseList(),enabled: !!userId,retry: 6
})
重试延迟
默认情况下，React Query 不会在请求失败后立即重试。按照标准，后退延迟将逐渐应用于每次重试。
默认的retryDelay设置为以二的倍数递增（从1000ms开始），但不超过 30 秒：
// 为所有查询配置
import { VueQueryPlugin } from "@tanstack/vue-query";
const vueQueryPluginOptions = {
queryClientConfig: {
defaultOptions: {
queries: {
retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000),
},
},
},
};
app.use(VueQueryPlugin, vueQueryPluginOptions);
单个查询设置
const dataSourceQuery = useQuery(['dataSourceQuery'], () => api.getUseList(),{
enabled: !!userId,
retry: 6,
retryDelay: 1000, // 无论重试多少次，都会始终等待1000毫秒然后重试
})
分页/滞后查询
常用分页的UI会在success和loading状态之间来回跳转，因为每个新页面都被视为一个全新的查询。这种体验并不是最佳的，
Vue Query 带有一个称为keepPreviousData的强大功能，从而使得这个问题可以被轻易的解决。
使用keepPreviousData的更好的分页查询
通过将keepPreviousData设置为true，我们可以得到一些新的东西：
-
请求新数据时，即使查询键值已更改，上次成功获取的数据仍可用
-
当新数据到达时，先前的数据将被无缝交换以显示新数据
-
可以使用isPreviousData来了解当前查询提供的是什么数据
const dataSourceQuery = useQuery(['dataSourceQuery'], () => api.getUseList(),{
keepPreviousData: true,
})
预取数据
如果对用户将做的事情有足够的了解，以便能够在需要之前预取他们所需的数据！
在这种情况下，可以使用prefetchQuery方法预取要放入缓存的查询结果：
const prefetchTodos = async () => {
// 该查询的结果将像普通查询一样被缓存
await queryClient.prefetchQuery(["dataSourceQuery"], api.getUseList);
};
- 如果此查询的数据已经在缓存中并且没有失效，则将不会获取该数据
- 如果一个staleTime被传递，例如：prefetchQuery(['todos'], fn, {staleTime：5000})，当数据早于指定的 staleTime 时，则查询将去尝试获取新值
- 如果一个预取的查询没有出现useQuery实例，则将在cacheTime指定的时间之后被删除并被垃圾回收
添加或更新查询的缓存结果。
queryClient.setQueryData(["todos"], todos);