perf: add persist option for one day to reduce request by react-query cache

pull/146/head
moonrailgun 2 years ago
parent ad862b7991
commit 4b0fc66ffb

@ -1,6 +1,6 @@
import React, { PropsWithChildren } from 'react';
import { QueryClientProvider } from '@tanstack/react-query';
import { queryClient } from './';
import { asyncStoragePersister, queryClient } from './';
import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client';
/**
*
@ -8,9 +8,12 @@ import { queryClient } from './';
export const CacheProvider: React.FC<PropsWithChildren> = React.memo(
(props) => {
return (
<QueryClientProvider client={queryClient}>
<PersistQueryClientProvider
client={queryClient}
persistOptions={{ persister: asyncStoragePersister }}
>
{props.children}
</QueryClientProvider>
</PersistQueryClientProvider>
);
}
);

@ -1,6 +1,8 @@
import { QueryClient } from '@tanstack/react-query';
import { createAsyncStoragePersister } from '@tanstack/query-async-storage-persister';
import { getStorage } from '../manager/storage';
const queryClient = new QueryClient({
export const queryClient = new QueryClient({
defaultOptions: {
queries: {
staleTime: 10 * 1000, // 默认缓存10s
@ -8,4 +10,12 @@ const queryClient = new QueryClient({
},
});
export { queryClient };
export const asyncStoragePersister = createAsyncStoragePersister({
storage: {
getItem: (key: string) => {
return getStorage().get(key);
},
setItem: (key: string, value: string) => getStorage().set(key, value),
removeItem: (key: string) => getStorage().remove(key),
},
});

@ -8,7 +8,9 @@
"license": "GPLv3",
"dependencies": {
"@reduxjs/toolkit": "^1.7.1",
"@tanstack/react-query": "4.29.3",
"@tanstack/query-async-storage-persister": "4.32.6",
"@tanstack/react-query": "4.33.0",
"@tanstack/react-query-persist-client": "4.33.0",
"axios": "^0.21.1",
"crc": "^3.8.0",
"dayjs": "^1.10.6",

@ -518,9 +518,15 @@ importers:
'@reduxjs/toolkit':
specifier: ^1.7.1
version: 1.8.5(react-redux@8.0.2)(react@18.2.0)
'@tanstack/query-async-storage-persister':
specifier: 4.32.6
version: 4.32.6
'@tanstack/react-query':
specifier: 4.29.3
version: 4.29.3(react-dom@18.2.0)(react@18.2.0)
specifier: 4.33.0
version: 4.33.0(react-dom@18.2.0)(react@18.2.0)
'@tanstack/react-query-persist-client':
specifier: 4.33.0
version: 4.33.0(@tanstack/react-query@4.33.0)
axios:
specifier: ^0.21.1
version: 0.21.4
@ -11578,10 +11584,36 @@ packages:
remove-accents: 0.4.2
dev: false
/@tanstack/query-async-storage-persister@4.32.6:
resolution: {integrity: sha512-wfuLBfsRi9fT5iKnwCc3HSyCArvQpKTjKeIskzn4n8Dp2wJj3vsI3GCyJJ+nk9evfX345+jaueBo3dPDXMd8Rg==}
dependencies:
'@tanstack/query-persist-client-core': 4.32.6
dev: false
/@tanstack/query-core@4.29.1:
resolution: {integrity: sha512-vkPewLEG8ua0efo3SsVT0BcBtkq5RZX8oPhDAyKL+k/rdOYSQTEocfGEXSaBwIwsXeOGBUpfKqI+UmHvNqdWXg==}
dev: false
/@tanstack/query-core@4.32.6:
resolution: {integrity: sha512-YVB+mVWENQwPyv+40qO7flMgKZ0uI41Ph7qXC2Zf1ft5AIGfnXnMZyifB2ghhZ27u+5wm5mlzO4Y6lwwadzxCA==}
dev: false
/@tanstack/query-core@4.33.0:
resolution: {integrity: sha512-qYu73ptvnzRh6se2nyBIDHGBQvPY1XXl3yR769B7B6mIDD7s+EZhdlWHQ67JI6UOTFRaI7wupnTnwJ3gE0Mr/g==}
dev: false
/@tanstack/query-persist-client-core@4.32.6:
resolution: {integrity: sha512-MJJ7CldvT5HOel50h/3wOZZwVlIcroFD5Vxn8vPsfo2C0qQ208ilmN/81JWutm/lWy4n2BjnCrrWv6HvVI7S0w==}
dependencies:
'@tanstack/query-core': 4.32.6
dev: false
/@tanstack/query-persist-client-core@4.33.0:
resolution: {integrity: sha512-3P16+2JjcUU5CHi10jJuwd0ZQYvQtSuzLvCUCjVuAnj3GZjfSso1v8t6WAObAr9RPuIC6vDXeOQ3mr07EF/NxQ==}
dependencies:
'@tanstack/query-core': 4.33.0
dev: false
/@tanstack/react-query-devtools@4.29.3(@tanstack/react-query@4.29.3)(react-dom@18.2.0)(react@18.2.0):
resolution: {integrity: sha512-Ne/K9+gskn8zM4sbLWl4mq5x0ha0JIg7I078K+t6seorL6oq9Y9E30wlP4y/IVa9hgn8DHB1Q6GoPtA2iu6p2g==}
peerDependencies:
@ -11597,6 +11629,30 @@ packages:
use-sync-external-store: 1.2.0(react@18.2.0)
dev: false
/@tanstack/react-query-devtools@4.29.3(@tanstack/react-query@4.33.0)(react-dom@18.2.0)(react@18.2.0):
resolution: {integrity: sha512-Ne/K9+gskn8zM4sbLWl4mq5x0ha0JIg7I078K+t6seorL6oq9Y9E30wlP4y/IVa9hgn8DHB1Q6GoPtA2iu6p2g==}
peerDependencies:
'@tanstack/react-query': 4.29.3
react: ^16.8.0 || ^17.0.0 || ^18.0.0
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
dependencies:
'@tanstack/match-sorter-utils': 8.7.6
'@tanstack/react-query': 4.33.0(react-dom@18.2.0)(react@18.2.0)
react: 18.2.0
react-dom: 18.2.0(react@18.2.0)
superjson: 1.12.2
use-sync-external-store: 1.2.0(react@18.2.0)
dev: false
/@tanstack/react-query-persist-client@4.33.0(@tanstack/react-query@4.33.0):
resolution: {integrity: sha512-B3q0r1tqTTSkd9vctyqFj28xdGZJ+Dnr/7H05Ta1JF1w7EauVQl8ILrmXADecwvILnr1xoZO6lvi2W+mZxMinw==}
peerDependencies:
'@tanstack/react-query': ^4.33.0
dependencies:
'@tanstack/query-persist-client-core': 4.33.0
'@tanstack/react-query': 4.33.0(react-dom@18.2.0)(react@18.2.0)
dev: false
/@tanstack/react-query@4.29.3(react-dom@18.2.0)(react@18.2.0):
resolution: {integrity: sha512-FPQrMu7PbCgBcVzoRJm7WmQnAFv+LUgZM9KBZ7Vk/+yERH2BDLvQRuAgczQd5Tb1s3HbOktECRDaOkUxdyBAjw==}
peerDependencies:
@ -11615,6 +11671,24 @@ packages:
use-sync-external-store: 1.2.0(react@18.2.0)
dev: false
/@tanstack/react-query@4.33.0(react-dom@18.2.0)(react@18.2.0):
resolution: {integrity: sha512-97nGbmDK0/m0B86BdiXzx3EW9RcDYKpnyL2+WwyuLHEgpfThYAnXFaMMmnTDuAO4bQJXEhflumIEUfKmP7ESGA==}
peerDependencies:
react: ^16.8.0 || ^17.0.0 || ^18.0.0
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
react-native: '*'
peerDependenciesMeta:
react-dom:
optional: true
react-native:
optional: true
dependencies:
'@tanstack/query-core': 4.33.0
react: 18.2.0
react-dom: 18.2.0(react@18.2.0)
use-sync-external-store: 1.2.0(react@18.2.0)
dev: false
/@testing-library/dom@8.17.1:
resolution: {integrity: sha512-KnH2MnJUzmFNPW6RIKfd+zf2Wue8mEKX0M3cpX6aKl5ZXrJM1/c/Pc8c2xDNYQCnJO48Sm5ITbMXgqTr3h4jxQ==}
engines: {node: '>=12'}
@ -33101,8 +33175,8 @@ packages:
resolution: {integrity: sha512-y2z1wUaZTFO9MJj+sMJzn9xQ08VvdUwEWgVsRRiUKEaSkTOUHl2qqGDrE961X/gGnGcW/yHdzBYObwL44jUxiA==}
dependencies:
'@arco-design/web-react': 2.51.0(@types/react@18.0.20)(react-dom@18.2.0)(react@18.2.0)
'@tanstack/react-query': 4.29.3(react-dom@18.2.0)(react@18.2.0)
'@tanstack/react-query-devtools': 4.29.3(@tanstack/react-query@4.29.3)(react-dom@18.2.0)(react@18.2.0)
'@tanstack/react-query': 4.33.0(react-dom@18.2.0)(react@18.2.0)
'@tanstack/react-query-devtools': 4.29.3(@tanstack/react-query@4.33.0)(react-dom@18.2.0)(react@18.2.0)
'@types/jsonexport': 3.0.2
'@types/lodash-es': 4.17.7
'@types/node': 18.11.9

@ -183,7 +183,7 @@ class UserService extends TcService {
},
cache: {
keys: ['userId'],
ttl: 60 * 60, // 1 hour
ttl: 6 * 60 * 60, // 6 hour
},
});
this.registerAction('getUserInfoList', this.getUserInfoList, {

Loading…
Cancel
Save