react-query 插件persistQueryClient、broadcastQueryClient

雨点打透心脏的1/2处 2021-07-24 16:03 331阅读 0赞

这些插件目前都是实验阶段
    
    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'
    		 })