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

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:{} } }	可选,用于水化查询的默认配置

猜你喜欢

转载自blog.csdn.net/weixin_43294560/article/details/115056341
今日推荐