react-query 插件persistQueryClient、broadcastQueryClient

这些插件目前都是实验阶段

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'
		 })

猜你喜欢

转载自blog.csdn.net/weixin_43294560/article/details/115048429