react-query 水化hydration/Hydrate、脱水hydration/dehydrate

àì夳堔傛蜴生んèń 2021-07-24 22:53 166阅读 0赞

import { hydrate,... } from 'react-query/hydration'
    
    脱水:
    	dehydrate
    	创建缓存的冷冻表示,稍后可以用Hydrate、useHydrate或hydrate对其进行水化。
    	这对于将预取的查询从服务器传递到客户机或将查询持久化到localstorage或其他持久化位置非常有用。默认情况下，它只包含当前成功的查询。
    	 const dehydratedState = dehydrate(queryClient, {	要脱水的QueryClient实例
    		dehydrateMutations:true, 将实例内部的mutation都脱水
    		dehydrateQueries:true,	 将实例内部的query都脱水
    		shouldDehydrateMutation: (mutation: Mutation) => boolean, 遍历所有mutation,返回true的脱水,不指定只包含暂停的mutation
    		shouldDehydrateQuery: (query: Query) => boolean, 		  遍历所有query,返回true的脱水,不指定只包含成功的查询
    	
    	 })
    	 返回的内容:包括以后为水化queryClient所需要的一切
    水化:	
    	1、Hydrate
    		将以前的脱水状态添加到queryClient,该状态将通过运行useQueryCache返回。
    		如果客户机已经包含数据，那么将基于更新时间戳智能地合并新的查询。
    		
    		<QueryClientProvider client={queryClient}>
    	      <Hydrate 
    	      	state={dehydratedState} 
    	      	options={
       { defaultOptions: { queries: {},mutations:{} } }}	可选,用于水化查询的默认配置
    	      >
    	      <Example />
    	      <ReactQueryDevtools initialIsOpen={false} position='top-right' />
    	      </Hydrate>
    	    </QueryClientProvider>
    
    	2、useHydrate
    		将以前的脱水状态添加到queryClient中,该状态将由useQueryClient()返回。
    		如果客户机已经包含数据，那么将基于更新时间戳智能地合并新的查询。
    		
    		useHydrate(dehydratedState, options)
    			dehydratedState:脱水数据
    			options:{ defaultOptions: { queries: {},mutations:{} } }	可选,用于水化查询的默认配置
    	
    	3、hydrate
    		将先前的脱水状态添加到缓存中。
    		如果在脱水中包含的查询已经存在于queryCache中,不会覆盖它们。
    		
    		hydrate(queryClient, dehydratedState, options)
    			queryClient:指定QueryClient实例
    			dehydratedState: 脱水数据
    			options:{ defaultOptions: { queries: {},mutations:{} } }	可选,用于水化查询的默认配置