✨ Add localstorage caching with React Query

2025-11-12 00:15:48 +01:00 · 2023-04-05 15:23:37 +09:00
parent 7cf6fe53fc
commit 42ce621197
4 changed files with 101 additions and 28 deletions
--- a/package.json
+++ b/package.json
@@ -41,9 +41,13 @@
    "@mantine/notifications": "^6.0.0",
    "@nivo/core": "^0.80.0",
    "@nivo/line": "^0.80.0",
+    "@react-native-async-storage/async-storage": "^1.18.1",
    "@tabler/icons": "^1.106.0",
+    "@tanstack/query-async-storage-persister": "^4.27.1",
+    "@tanstack/query-sync-storage-persister": "^4.27.1",
    "@tanstack/react-query": "^4.2.1",
    "@tanstack/react-query-devtools": "^4.24.4",
+    "@tanstack/react-query-persist-client": "^4.28.0",
    "@vitejs/plugin-react": "^3.1.0",
    "axios": "^0.27.2",
    "consola": "^2.15.3",
--- a/src/components/Dashboard/Views/DashboardView.tsx
+++ b/src/components/Dashboard/Views/DashboardView.tsx
@@ -17,33 +17,24 @@ export const DashboardView = () => {

  return (
    <Group align="top" h="100%" spacing="xs">
-      {sidebarsVisible.isLoading ? (
-        <Center w="100%">
-          <Loader />
-        </Center>
-      ) : (
-        <>
-          {sidebarsVisible.left ? (
-            <DashboardSidebar location="left" isGridstackReady={isReady} />
-          ) : null}
+      {sidebarsVisible.left ? (
+        <DashboardSidebar location="left" isGridstackReady={isReady} />
+      ) : null}

-          <Stack ref={mainAreaRef} mx={-10} style={{ flexGrow: 1 }}>
-            {!isReady
-              ? null
-              : wrappers.map((item) =>
-                  item.type === 'category' ? (
-                    <DashboardCategory key={item.id} category={item as unknown as CategoryType} />
-                  ) : (
-                    <DashboardWrapper key={item.id} wrapper={item as WrapperType} />
-                  )
-                )}
-          </Stack>
+      <Stack ref={mainAreaRef} mx={-10} style={{ flexGrow: 1 }}>
+        {isReady &&
+          wrappers.map((item) =>
+            item.type === 'category' ? (
+              <DashboardCategory key={item.id} category={item as unknown as CategoryType} />
+            ) : (
+              <DashboardWrapper key={item.id} wrapper={item as WrapperType} />
+            )
+          )}
+      </Stack>

-          {sidebarsVisible.right ? (
-            <DashboardSidebar location="right" isGridstackReady={isReady} />
-          ) : null}
-        </>
-      )}
+      {sidebarsVisible.right ? (
+        <DashboardSidebar location="right" isGridstackReady={isReady} />
+      ) : null}
    </Group>
  );
 };
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -2,7 +2,6 @@ import { ColorScheme, ColorSchemeProvider, MantineProvider, MantineTheme } from
 import { useColorScheme, useHotkeys, useLocalStorage } from '@mantine/hooks';
 import { ModalsProvider } from '@mantine/modals';
 import Consola from 'consola';
-import { QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { getCookie } from 'cookies-next';
 import { GetServerSidePropsContext } from 'next';
@@ -12,6 +11,9 @@ import Head from 'next/head';
 import { useEffect, useState } from 'react';
 import { Notifications } from '@mantine/notifications';
 import 'video.js/dist/video-js.css';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client';
+import { createAsyncStoragePersister } from '@tanstack/query-async-storage-persister';
 import { ChangeAppPositionModal } from '../components/Dashboard/Modals/ChangePosition/ChangeAppPositionModal';
 import { ChangeWidgetPositionModal } from '../components/Dashboard/Modals/ChangePosition/ChangeWidgetPositionModal';
 import { EditAppModal } from '../components/Dashboard/Modals/EditAppModal/EditAppModal';
@@ -77,6 +79,10 @@ function App(
  const toggleColorScheme = (value?: ColorScheme) =>
    setColorScheme(value || (colorScheme === 'dark' ? 'light' : 'dark'));

+  const asyncStoragePersister = createAsyncStoragePersister({
+    storage: AsyncStorage,
+  });
+
  useHotkeys([['mod+J', () => toggleColorScheme()]]);

  return (
@@ -84,7 +90,10 @@ function App(
      <Head>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
      </Head>
-      <QueryClientProvider client={queryClient}>
+      <PersistQueryClientProvider
+        client={queryClient}
+        persistOptions={{ persister: asyncStoragePersister }}
+      >
        <ColorSchemeProvider colorScheme={colorScheme} toggleColorScheme={toggleColorScheme}>
          <ColorTheme.Provider value={colorTheme}>
            <MantineProvider
@@ -131,7 +140,7 @@ function App(
          </ColorTheme.Provider>
        </ColorSchemeProvider>
        <ReactQueryDevtools initialIsOpen={false} />
-      </QueryClientProvider>
+      </PersistQueryClientProvider>
    </>
  );
 }
--- a/yarn.lock
+++ b/yarn.lock
@@ -1503,6 +1503,17 @@ __metadata:
  languageName: node
  linkType: hard

+"@react-native-async-storage/async-storage@npm:^1.18.1":
+  version: 1.18.1
+  resolution: "@react-native-async-storage/async-storage@npm:1.18.1"
+  dependencies:
+    merge-options: ^3.0.4
+  peerDependencies:
+    react-native: ^0.0.0-0 || 0.60 - 0.72 || 1000.0.0
+  checksum: 58c8497fafdd4d112c4a70b0976783abdc6fa487f0cffca196901efd146fc838dee0cf498fdc4ef67a4634ba4ca97d60fec5a24720aea1d46f1999b0ba8b249b
+  languageName: node
+  linkType: hard
+
 "@react-spring/animated@npm:~9.4.5":
  version: 9.4.5
  resolution: "@react-spring/animated@npm:9.4.5"
@@ -1642,6 +1653,15 @@ __metadata:
  languageName: node
  linkType: hard

+"@tanstack/query-async-storage-persister@npm:^4.27.1":
+  version: 4.27.1
+  resolution: "@tanstack/query-async-storage-persister@npm:4.27.1"
+  dependencies:
+    "@tanstack/query-persist-client-core": 4.27.0
+  checksum: f98da672c6a61c65a58dc3d1b6e4416800bbd61747f806cc8cfceecb9f8bf4fa6be4133036f0b2efd5177e6f93031bb84e2ee53d888e9d6c34cc11f8aede97f4
+  languageName: node
+  linkType: hard
+
 "@tanstack/query-core@npm:4.27.0":
  version: 4.27.0
  resolution: "@tanstack/query-core@npm:4.27.0"
@@ -1649,6 +1669,24 @@ __metadata:
  languageName: node
  linkType: hard

+"@tanstack/query-persist-client-core@npm:4.27.0":
+  version: 4.27.0
+  resolution: "@tanstack/query-persist-client-core@npm:4.27.0"
+  dependencies:
+    "@tanstack/query-core": 4.27.0
+  checksum: 9a2df41744269d666bc0c1a5684a1d9d327e7994b57f9c1a71ea86d169dbde94f9d4af4b4ebe258d0085e0aa2cd563460b06513eccc4b016c0c5d416122d0275
+  languageName: node
+  linkType: hard
+
+"@tanstack/query-sync-storage-persister@npm:^4.27.1":
+  version: 4.27.1
+  resolution: "@tanstack/query-sync-storage-persister@npm:4.27.1"
+  dependencies:
+    "@tanstack/query-persist-client-core": 4.27.0
+  checksum: 16cdef50af43cf854ec1244f43609c04f9a9fcb7bbb36c763ce3146aeb85095c62da098fb4c4876d76496fa5830d54c6e79691d2b353919b1e5f274a3c34a97e
+  languageName: node
+  linkType: hard
+
 "@tanstack/react-query-devtools@npm:^4.24.4":
  version: 4.28.0
  resolution: "@tanstack/react-query-devtools@npm:4.28.0"
@@ -1664,6 +1702,17 @@ __metadata:
  languageName: node
  linkType: hard

+"@tanstack/react-query-persist-client@npm:^4.28.0":
+  version: 4.28.0
+  resolution: "@tanstack/react-query-persist-client@npm:4.28.0"
+  dependencies:
+    "@tanstack/query-persist-client-core": 4.27.0
+  peerDependencies:
+    "@tanstack/react-query": 4.28.0
+  checksum: 8177b41ae644774f380154ec09588cce21b6bf75f45d58691cc86fd58002927989f47e278170a1ae9c3c02638a7e26d67a29106c768d325a54cef9219115839d
+  languageName: node
+  linkType: hard
+
 "@tanstack/react-query@npm:^4.2.1":
  version: 4.28.0
  resolution: "@tanstack/react-query@npm:4.28.0"
@@ -4857,9 +4906,13 @@ __metadata:
    "@next/eslint-plugin-next": ^12.1.4
    "@nivo/core": ^0.80.0
    "@nivo/line": ^0.80.0
+    "@react-native-async-storage/async-storage": ^1.18.1
    "@tabler/icons": ^1.106.0
+    "@tanstack/query-async-storage-persister": ^4.27.1
+    "@tanstack/query-sync-storage-persister": ^4.27.1
    "@tanstack/react-query": ^4.2.1
    "@tanstack/react-query-devtools": ^4.24.4
+    "@tanstack/react-query-persist-client": ^4.28.0
    "@testing-library/jest-dom": ^5.16.5
    "@testing-library/react": ^14.0.0
    "@types/dockerode": ^3.3.9
@@ -5354,6 +5407,13 @@ __metadata:
  languageName: node
  linkType: hard

+"is-plain-obj@npm:^2.1.0":
+  version: 2.1.0
+  resolution: "is-plain-obj@npm:2.1.0"
+  checksum: cec9100678b0a9fe0248a81743041ed990c2d4c99f893d935545cfbc42876cbe86d207f3b895700c690ad2fa520e568c44afc1605044b535a7820c1d40e38daa
+  languageName: node
+  linkType: hard
+
 "is-regex@npm:^1.1.4":
  version: 1.1.4
  resolution: "is-regex@npm:1.1.4"
@@ -5875,6 +5935,15 @@ __metadata:
  languageName: node
  linkType: hard

+"merge-options@npm:^3.0.4":
+  version: 3.0.4
+  resolution: "merge-options@npm:3.0.4"
+  dependencies:
+    is-plain-obj: ^2.1.0
+  checksum: d86ddb3dd6e85d558dbf25dc944f3527b6bacb944db3fdda6e84a3f59c4e4b85231095f58b835758b9a57708342dee0f8de0dffa352974a48221487fe9f4584f
+  languageName: node
+  linkType: hard
+
 "merge2@npm:^1.3.0, merge2@npm:^1.4.1":
  version: 1.4.1
  resolution: "merge2@npm:1.4.1"