这些插件目前都是实验阶段
1、persistQueryClient
用于持久化queryClient的状态及其缓存以供以后使用。
可以使用不同的持久程序persistors来存储客户端和缓存到许多不同的存储层
使用:
(1)导入
import { persistQueryClient } from 'react-query/persistQueryClient-experimental'
import { createLocalStoragePersistor } from 'react-query/createLocalStoragePersistor-experimental'
(2)创建带有cacheTime的QueryClient实例和一个persistor
QueryClient实例:
const queryClient = new QueryClient({
defaultOptions: {
queries: {
cacheTime: 1000 * 60 * 60 * 24, 24 hours
},
},
})
persistor:
const localStoragePersistor = createLocalStoragePersistor() 缓存到磁盘
可传入的配置参数:
{
localStorageKey:'将缓存存储到localstorage时要使用的键', 默认为REACT_QUERY_OFFLINE_CACHE
throttleTime:以毫秒为单位通过一段时间来节省缓存到磁盘, 默认为1000
}
(3)进行缓存
persistQueryClient({
queryClient,
persistor: localStoragePersistor,
})
其他配置参数:
maxAge:最大缓存的时间,默认为1000 * 60 * 60 * 24,cacheTime设置的值应该比maxAge相等或更高,将cacheTime设置成Infinity可禁止回收缓存
buster:'如果现有的缓存不共享相同的buster字符串,使其失效', 默认为''
2、broadcastQueryClient
用于在同源的浏览器选项卡/窗口之间广播和同步queryClient状态的工具
(1)导入
import { broadcastQueryClient } from 'react-query/broadcastQueryClient-experimental'
(2)使用
const queryClient = new QueryClient()
broadcastQueryClient({
queryClient,
broadcastChannel: 'my-app', 在选项卡和窗口之间进行通信使用的唯一通道名,默认为'react-query'
})
react-query 插件persistQueryClient、broadcastQueryClient
猜你喜欢
转载自blog.csdn.net/weixin_43294560/article/details/115048429
今日推荐
周排行