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

2 years ago · 4b0fc66ffb
parent ad862b7991
commit 4b0fc66ffb
5 changed files with 101 additions and 12 deletions
--- a/client/shared/cache/Provider.tsx
+++ b/client/shared/cache/Provider.tsx
@ -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>
    );
  }
 );
--- a/client/shared/cache/index.ts
+++ b/client/shared/cache/index.ts
@ -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),
+  },
+});
--- a/client/shared/package.json
+++ b/client/shared/package.json
@ -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",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -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
--- a/server/services/core/user/user.service.ts
+++ b/server/services/core/user/user.service.ts
@ -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, {