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:{} } } 可选,用于水化查询的默认配置
react-query 水化hydration/Hydrate、脱水hydration/dehydrate
最新推荐文章于 2024-04-10 23:10:49 发布