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

系统管理员 2021-07-25 02:44 701阅读 0赞

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