1、Hook:
(1)useIsFetching
返回应用程序在后台加载或获取的查询的数量(对于应用程序范围内的加载指示器很有用)。
const isFetching = useIsFetching() 返回所有数目
const isFetching = useIsFetching(key,{配置过滤对象}) 返回key开头的数目
配置过滤对象:
exact:true, 是否开启精确匹配
active:ture, 匹配活跃查询
inactive:true, 匹配不活跃查询
stale:true, 匹配stale过时查询,否则匹配fresh新鲜查询
fetching:true, 匹配正在拉取的查询,否则匹配未正在拉取的查询
predicate: (query) =>布尔值, 匹配返回true的query
queryKey:设置此属性以定义要匹配的查询键
(2)useIsMutating
返回应用程序正在获取的mutation数量
和(1)使用方式相同
2、QueryClient:
查询相关:
(1)queryClient.fetchQuery
异步获取,若缓存中没有或过时了,则会去获取最新结果,相当于同步的queryClient.setQueryData
const data = await queryClient.fetchQuery(queryKey, queryFn,{配置对象})
配置对象大部分和useQuery相同:除了enabled, refetchInterval, refetchIntervalInBackground, refetchOnWindowFocus, refetchOnReconnect, notifyOnChangeProps, notifyOnChangePropsExclusions, onSuccess, onError, onSettled, useErrorBoundary, select, suspense, keepPreviousData, placeholderData
(2)queryClient.fetchInfiniteQuery
无限获取,与fetchQuery类似,但可以用于获取和缓存无限查询。
const data = await queryClient.fetchInfiniteQuery(queryKey, queryFn,{配置对象})
(3)queryClient.prefetchQuery
异步预获取,若缓存中没有或过时了,则会去获取最新结果
const data = await queryClient.fetchQuery(queryKey, queryFn,{配置对象})
配置对象和(1)相同
(4)queryClient.prefetchInfiniteQuery
无限预获取
const data = await queryClient.prefetchInfiniteQuery(queryKey, queryFn,{配置对象})
(5)queryClient.getQueryData
从缓存中获取数据
const data = queryClient.getQueryData(queryKey,{配置过滤对象})
(6)queryClient.setQueryData
设置缓存查询数据,如果在默认的5分钟的cacheTime中查询钩子没有利用该查询,则该查询将被垃圾收集
queryClient.setQueryData(key,值/返回值的方法)
(7)queryClient.getQueryState
const state = queryClient.getQueryState(queryKey,{配置过滤对象})
(8)queryClient.invalidateQueries
使得匹配的查询失效并重新获取
await queryClient.invalidateQueries(key,{
exact:true, 精确匹配key
refetchActive: true, 是否重新获取活跃查询
refetchInactive: true 是否重新获取不活跃查询
},{
throwOnError:true 任何查询重取任务失败都会抛出错误
})
(9)queryClient.refetchQueries
再次获取匹配的查询
await queryClient.refetchQueries()
await queryClient.refetchQueries(key,{配置过滤对象},{
throwOnError:true 任何查询重取任务失败都会抛出错误
})
(10)queryClient.cancelQueries
取消匹配的查询,若是取消axios/fetch等,需要添加额外的cancel属性,详情看之前的文章
await queryClient.cancelQueries(key, {配置过滤对象})
(11)queryClient.removeQueries
从缓存中删除查询
ueryClient.removeQueries(queryKey, {配置过滤对象})
(12)queryClient.resetQueries
将缓存的查询重置为初始状态,如果查询具有initialData,该查询的数据将被重置为该数据,如果查询是活动的会被重新获取
ueryClient.resetQueries(queryKey, {配置过滤对象},{
throwOnError:true 任何查询重取任务失败都会抛出错误
})
(13)queryClient.isFetching
获取缓存中正在background-fetching, loading new pages, or loading more infinite query进行查询的条数
const num=queryClient.isFetching();
const num=queryClient.isFetching(key,{过滤配置对象});
(14)queryClient.isMutating
获取正在提交的mutation的条数
const num=queryClient.isMutating();
const num=queryClient.isMutating({过滤配置对象});
配置相关:
(15)queryClient.getDefaultOptions
获取默认配置,从QueryClient中设置的和setDefaultOptions方法设置的内容
const defaultOptions = queryClient.getDefaultOptions()
(16)queryClient.setDefaultOptions
动态设置QueryClient的默认选项。
queryClient.setDefaultOptions({
queries: {
staleTime: Infinity,
},
})
(17)queryClient.getQueryDefaults
获取指定查询的配置
const defaultOptions = queryClient.getQueryDefaults(key)
(18)queryClient.setQueryDefaults
设置指定查询配置
queryClient.setQueryDefaults(key, { queryFn: fetchPosts })
const { data } = useQuery(key)
(19)queryClient.getMutationDefaults
获取指定mutation的配置
const defaultOptions = queryClient.getMutationDefaults(key)
(20)queryClient.setMutationDefaults
设置指定mutation的配置
queryClient.setMutationDefaults(key, { mutationFn: addPost })
const { data,mutate } = useMutation('addPost')
缓存设置:
(21)queryClient.getQueryCache
获取缓存了的查询
const queryCache = queryClient.getQueryCache()
(22)queryClient.getMutationCache
获取缓存了的mutation
const mutationCache = queryClient.getMutationCache()
(23)queryClient.clear
清除缓存
queryClient.clear()
3、QueryClientProvider:
使用QueryClientProvider组件连接并提供一个QueryClient到你的应用程序:
<QueryClientProvider client={queryClient} contextSharing={false}>
contextSharing:默认为false,若为true,将共享第一个和至少一个实例的上下文窗口,以确保在不同的包或microfrontends他们都使用相同的实例的上下文,不管模块范围。
...
</QueryClientProvider>
4、useQueryClient:
返回当前QueryClient的实例
const queryClient = useQueryClient()
5、QueryCache
存储包含的所有数据、元信息和查询状态,通常是使用queryClient对缓存的操作,而不是直接操作
const queryCache = new QueryCache({
onError: (error,query) => { 某个查询遇到错误触发
console.log(error)
}
})
方法:
.find(key) 用于从缓存获取现有的查询实例,包含查询的所有状态,还包含所有实例和查询的底层内容
.findAll(key,{过滤配置对象}) 返回数组集合
.subscribe((query)=>{...}) 监听订阅缓存中的所有查询,如查询状态更改或查询被更新、添加或删除
const unsubscribe = queryCache.subscribe(callback); 返回一个取消订阅方法
.clear() 完全清除缓存并重新开始
6、MutationCache
存储mutations,通常是使用queryClient对缓存的操作,而不是直接操作
const mutationCache = new MutationCache({
onError: (error,variables, context, mutation) => { 提交错误时触发
console.log(error)
}
})
方法:
.getAll() 返回缓存中所有的mutations
.subscribe.((mutation)=>{ 监听订阅缓存中所有的mutation,如变化的mutation状态或正在更新、添加或删除的mutation
返回一个取消监听订阅的方法
...
})
const unsubscribe = mutationCache.subscribe(callback)
.clear() 完全清除缓存并重新启动。
react-query 辅助性hook、queryClient属性方法、useQueryClient、QueryClientProvider、QueryCache、MutationCache
最新推荐文章于 2024-06-03 21:59:30 发布