react-query 辅助性hook、queryClient属性方法、useQueryClient、QueryClientProvider、QueryCache、MutationCache

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()	完全清除缓存并重新启动。