🔥 Remove caching and async persistance storage

2026-01-03 14:19:51 +01:00 · 2023-07-30 22:30:49 +02:00
parent f61d0f5f8d
commit 0575cd475c
6 changed files with 37 additions and 172 deletions
--- a/package.json
+++ b/package.json
@@ -44,11 +44,8 @@
    "@nivo/core": "^0.83.0",
    "@nivo/line": "^0.83.0",
    "@prisma/client": "^5.0.0",
-    "@react-native-async-storage/async-storage": "^1.18.1",
    "@t3-oss/env-nextjs": "^0.6.0",
    "@tabler/icons-react": "^2.18.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",
--- a/src/components/Settings/Common/CacheButtons.tsx
+++ b/src/components/Settings/Common/CacheButtons.tsx
@@ -1,63 +0,0 @@
-import { Button, Group, MultiSelect, Stack, Title } from '@mantine/core';
-import { notifications } from '@mantine/notifications';
-import { IconTrash } from '@tabler/icons-react';
-import { useState } from 'react';
-
-import { queryClient } from '../../../tools/server/configurations/tanstack/queryClient.tool';
-
-const data = [
-  { value: 'ping', label: 'Ping queries' },
-  { value: 'repository-icons', label: 'Remote/Local icons' },
-  { value: 'calendar/medias', label: 'Medais from the Calendar' },
-  { value: 'weather', label: 'Weather data' },
-];
-
-export function CacheButtons() {
-  const [value, setValue] = useState<string[]>([]);
-  return (
-    <Stack spacing="xs">
-      <Title order={4}>Cache cleaning</Title>
-      <MultiSelect
-        value={value}
-        searchable
-        onChange={setValue}
-        data={data}
-        label="Select the cache(s) to clear"
-      />
-      <Group>
-        <Button
-          color="red"
-          variant="light"
-          onClick={() =>
-            queryClient.invalidateQueries(value).then(() =>
-              notifications.show({
-                title: 'Cache cleared',
-                message: `Cache for ${value.join(', ')} has been cleared`,
-                color: 'teal',
-                icon: <IconTrash />,
-                autoClose: 5000,
-              })
-            )
-          }
-        >
-          Clear selected queries
-        </Button>
-        <Button
-          onClick={() =>
-            queryClient.invalidateQueries().then(() =>
-              notifications.show({
-                title: 'Cache cleared',
-                message: 'All cache has been cleared',
-                color: 'teal',
-                icon: <IconTrash />,
-                autoClose: 5000,
-              })
-            )
-          }
-        >
-          Clear all cache
-        </Button>
-      </Group>
-    </Stack>
-  );
-}
--- a/src/components/Settings/Common/CommonSettings.tsx
+++ b/src/components/Settings/Common/CommonSettings.tsx
@@ -26,7 +26,6 @@ export default function CommonSettings() {
        <Space />
        <LanguageSelect />
        <ConfigChanger />
-        <CacheButtons />
        <ConfigActions />
      </Stack>
    </ScrollArea>
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,10 +1,7 @@
 import { ColorScheme as MantineColorScheme, MantineProvider, MantineTheme } from '@mantine/core';
 import { ModalsProvider } from '@mantine/modals';
 import { Notifications } from '@mantine/notifications';
-import AsyncStorage from '@react-native-async-storage/async-storage';
-import { createAsyncStoragePersister } from '@tanstack/query-async-storage-persister';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
-import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client';
 import Consola from 'consola';
 import { getCookie, setCookie } from 'cookies-next';
 import 'flag-icons/css/flag-icons.min.css';
@@ -29,7 +26,6 @@ import { ConfigProvider } from '../config/provider';
 import '../styles/global.scss';
 import { usePackageAttributesStore } from '../tools/client/zustands/usePackageAttributesStore';
 import { ColorTheme } from '../tools/color';
-import { queryClient } from '../tools/server/configurations/tanstack/queryClient.tool';
 import {
  ServerSidePackageAttributesType,
  getServiceSidePackageAttributes,
@@ -73,59 +69,50 @@ function App(
    setInitialPackageAttributes(props.pageProps.packageAttributes);
  }, []);

-  const asyncStoragePersister = createAsyncStoragePersister({
-    storage: AsyncStorage,
-  });
-
  return (
    <>
      <Head>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
      </Head>
      <SessionProvider session={pageProps.session}>
-        <PersistQueryClientProvider
-          client={queryClient}
-          persistOptions={{ persister: asyncStoragePersister }}
-        >
-          <ColorSchemeProvider {...pageProps}>
-            {(colorScheme) => (
-              <ColorTheme.Provider value={colorTheme}>
-                <MantineProvider
-                  theme={{
-                    ...theme,
-                    components: {
-                      Checkbox: {
-                        styles: {
-                          input: { cursor: 'pointer' },
-                          label: { cursor: 'pointer' },
-                        },
-                      },
-                      Switch: {
-                        styles: {
-                          input: { cursor: 'pointer' },
-                          label: { cursor: 'pointer' },
-                        },
+        <ColorSchemeProvider {...pageProps}>
+          {(colorScheme) => (
+            <ColorTheme.Provider value={colorTheme}>
+              <MantineProvider
+                theme={{
+                  ...theme,
+                  components: {
+                    Checkbox: {
+                      styles: {
+                        input: { cursor: 'pointer' },
+                        label: { cursor: 'pointer' },
                      },
                    },
-                    primaryColor,
-                    primaryShade,
-                    colorScheme,
-                  }}
-                  withGlobalStyles
-                  withNormalizeCSS
-                >
-                  <ConfigProvider {...props.pageProps}>
-                    <Notifications limit={4} position="bottom-left" />
-                    <ModalsProvider modals={modals}>
-                      <Component {...pageProps} />
-                    </ModalsProvider>
-                  </ConfigProvider>
-                </MantineProvider>
-              </ColorTheme.Provider>
-            )}
-          </ColorSchemeProvider>
-          <ReactQueryDevtools initialIsOpen={false} />
-        </PersistQueryClientProvider>
+                    Switch: {
+                      styles: {
+                        input: { cursor: 'pointer' },
+                        label: { cursor: 'pointer' },
+                      },
+                    },
+                  },
+                  primaryColor,
+                  primaryShade,
+                  colorScheme,
+                }}
+                withGlobalStyles
+                withNormalizeCSS
+              >
+                <ConfigProvider {...props.pageProps}>
+                  <Notifications limit={4} position="bottom-left" />
+                  <ModalsProvider modals={modals}>
+                    <Component {...pageProps} />
+                  </ModalsProvider>
+                </ConfigProvider>
+              </MantineProvider>
+            </ColorTheme.Provider>
+          )}
+        </ColorSchemeProvider>
+        <ReactQueryDevtools initialIsOpen={false} />
      </SessionProvider>
    </>
  );
--- a/src/tools/server/configurations/tanstack/queryClient.tool.ts
+++ b/src/tools/server/configurations/tanstack/queryClient.tool.ts
@@ -1,10 +1,3 @@
 import { QueryClient } from '@tanstack/react-query';

-export const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      staleTime: 5 * 60 * 1000, // 5 mins
-      cacheTime: 10 * 60 * 1000, // 10 mins
-    },
-  },
-});
+export const queryClient = new QueryClient();
--- a/yarn.lock
+++ b/yarn.lock
@@ -1657,17 +1657,6 @@ __metadata:
  languageName: node
  linkType: hard

-"@react-native-async-storage/async-storage@npm:^1.18.1":
-  version: 1.19.1
-  resolution: "@react-native-async-storage/async-storage@npm:1.19.1"
-  dependencies:
-    merge-options: ^3.0.4
-  peerDependencies:
-    react-native: ^0.0.0-0 || 0.60 - 0.72 || 1000.0.0
-  checksum: 7367210e16f788999ca8ff96bd04bbd345f44c186cec7c50903d55637f572c73b8a79f9c948a549329ad489c08d77dd49367971691ed54dbc3839285e0194431
-  languageName: node
-  linkType: hard
-
 "@react-spring/animated@npm:~9.7.3":
  version: 9.7.3
  resolution: "@react-spring/animated@npm:9.7.3"
@@ -1831,15 +1820,6 @@ __metadata:
  languageName: node
  linkType: hard

-"@tanstack/query-async-storage-persister@npm:^4.27.1":
-  version: 4.32.0
-  resolution: "@tanstack/query-async-storage-persister@npm:4.32.0"
-  dependencies:
-    "@tanstack/query-persist-client-core": 4.32.0
-  checksum: 21151138fed9620c5752e226d368cfe09cb928102d664f2c2e423ab7ba4c2f61ea9b56b91dfdf1fb50577da2c3c220c4c1e1f6198e5b3b440813fb66eca3ed74
-  languageName: node
-  linkType: hard
-
 "@tanstack/query-core@npm:4.32.0":
  version: 4.32.0
  resolution: "@tanstack/query-core@npm:4.32.0"
@@ -1856,15 +1836,6 @@ __metadata:
  languageName: node
  linkType: hard

-"@tanstack/query-sync-storage-persister@npm:^4.27.1":
-  version: 4.32.0
-  resolution: "@tanstack/query-sync-storage-persister@npm:4.32.0"
-  dependencies:
-    "@tanstack/query-persist-client-core": 4.32.0
-  checksum: 752f884c9525d58cb531fcfdf37938a4eb8aea8f613e5f45f572cf4c4f3c2f25fc9b2b4f3dedffa1cad704e32d570f0617c4d67e9c6fa750281f6c3caeb72430
-  languageName: node
-  linkType: hard
-
 "@tanstack/react-query-devtools@npm:^4.24.4":
  version: 4.32.0
  resolution: "@tanstack/react-query-devtools@npm:4.32.0"
@@ -5845,11 +5816,8 @@ __metadata:
    "@nivo/core": ^0.83.0
    "@nivo/line": ^0.83.0
    "@prisma/client": ^5.0.0
-    "@react-native-async-storage/async-storage": ^1.18.1
    "@t3-oss/env-nextjs": ^0.6.0
    "@tabler/icons-react": ^2.18.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
@@ -6389,13 +6357,6 @@ __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"
@@ -7003,15 +6964,6 @@ __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
-
 "merge-stream@npm:^2.0.0":
  version: 2.0.0
  resolution: "merge-stream@npm:2.0.0"