From 6bbd34d76e0473ad08f879923a4a3c7d859173b1 Mon Sep 17 00:00:00 2001 From: Mariana Sartorato Date: Fri, 19 Jul 2024 17:18:07 -0300 Subject: [PATCH] chore: add cache for react query --- dashboard/package.json | 4 +++- dashboard/pnpm-lock.yaml | 38 ++++++++++++++++++++++++++++++++++++++ dashboard/src/main.tsx | 28 ++++++++++++++++++++++++---- 3 files changed, 65 insertions(+), 5 deletions(-) diff --git a/dashboard/package.json b/dashboard/package.json index 3d50810b..d9b5ecbb 100644 --- a/dashboard/package.json +++ b/dashboard/package.json @@ -20,8 +20,8 @@ "@emotion/styled": "^11.11.5", "@mui/material": "^5.15.20", "@mui/x-charts": "^7.7.1", - "@radix-ui/react-collapsible": "^1.1.0", "@radix-ui/react-checkbox": "^1.1.1", + "@radix-ui/react-collapsible": "^1.1.0", "@radix-ui/react-dialog": "^1.1.1", "@radix-ui/react-dropdown-menu": "^2.1.1", "@radix-ui/react-label": "^2.1.0", @@ -29,7 +29,9 @@ "@radix-ui/react-separator": "^1.1.0", "@radix-ui/react-slot": "^1.1.0", "@radix-ui/react-tabs": "^1.1.0", + "@tanstack/query-sync-storage-persister": "^5.51.9", "@tanstack/react-query": "^5.45.1", + "@tanstack/react-query-persist-client": "^5.51.9", "@tanstack/react-table": "^8.17.3", "@vitejs/plugin-react": "^4.3.1", "axios": "^1.7.2", diff --git a/dashboard/pnpm-lock.yaml b/dashboard/pnpm-lock.yaml index 35624053..70bec7ae 100644 --- a/dashboard/pnpm-lock.yaml +++ b/dashboard/pnpm-lock.yaml @@ -47,9 +47,15 @@ importers: '@radix-ui/react-tabs': specifier: ^1.1.0 version: 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@tanstack/query-sync-storage-persister': + specifier: ^5.51.9 + version: 5.51.9 '@tanstack/react-query': specifier: ^5.45.1 version: 5.50.1(react@18.3.1) + '@tanstack/react-query-persist-client': + specifier: ^5.51.9 + version: 5.51.9(@tanstack/react-query@5.50.1(react@18.3.1))(react@18.3.1) '@tanstack/react-table': specifier: ^8.17.3 version: 8.19.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -1951,6 +1957,21 @@ packages: '@tanstack/query-core@5.50.1': resolution: {integrity: sha512-lpfhKPrJlyV2DSVcQb/HuozH3Av3kws4ge22agx+lNGpFkS4vLZ7St0l3GLwlAD+bqB+qXGex3JdRKUNtMviEQ==} + '@tanstack/query-core@5.51.9': + resolution: {integrity: sha512-HsAwaY5J19MD18ykZDS3aVVh+bAt0i7m6uQlFC2b77DLV9djo+xEN7MWQAQQTR8IM+7r/zbozTQ7P0xr0bHuew==} + + '@tanstack/query-persist-client-core@5.51.9': + resolution: {integrity: sha512-yKvDozZLf+XkXM+0ynx+JnSufD1QMFFdCgfIKrSHozZJoCeLnuf3kECi1T3KEZqdaxUWtZnSPcII9eb8pLJ9cQ==} + + '@tanstack/query-sync-storage-persister@5.51.9': + resolution: {integrity: sha512-fxzKinPGlZfPKiqqIsnH0TZMvAT/CD5a9jKKOIgg/CPCRej90Wy5aWQQ11bq9h3K+njlVdX4BuoxxBMGvLul7g==} + + '@tanstack/react-query-persist-client@5.51.9': + resolution: {integrity: sha512-M8zT/Lej53h36ILFX1dnZHoDlqhmT54SQjVha9RrEq+O0HXg4r93TrNKw8QfNbvAJYCwmNYJ1Q+GW6RN+37VcQ==} + peerDependencies: + '@tanstack/react-query': ^5.51.9 + react: ^18 || ^19 + '@tanstack/react-query@5.50.1': resolution: {integrity: sha512-s0DW3rVBDPReDDovUjVqItVa3R2nPfUANK9nqGvarO2DwTiY9U4EBTsqizMxItRCoGgK5apeM7D3mxlHrSKpdQ==} peerDependencies: @@ -7082,6 +7103,23 @@ snapshots: '@tanstack/query-core@5.50.1': {} + '@tanstack/query-core@5.51.9': {} + + '@tanstack/query-persist-client-core@5.51.9': + dependencies: + '@tanstack/query-core': 5.51.9 + + '@tanstack/query-sync-storage-persister@5.51.9': + dependencies: + '@tanstack/query-core': 5.51.9 + '@tanstack/query-persist-client-core': 5.51.9 + + '@tanstack/react-query-persist-client@5.51.9(@tanstack/react-query@5.50.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@tanstack/query-persist-client-core': 5.51.9 + '@tanstack/react-query': 5.50.1(react@18.3.1) + react: 18.3.1 + '@tanstack/react-query@5.50.1(react@18.3.1)': dependencies: '@tanstack/query-core': 5.50.1 diff --git a/dashboard/src/main.tsx b/dashboard/src/main.tsx index d2f6242a..a133fe2d 100644 --- a/dashboard/src/main.tsx +++ b/dashboard/src/main.tsx @@ -1,12 +1,16 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import { RouterProvider, createBrowserRouter } from 'react-router-dom'; -import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; +import { QueryClient } from '@tanstack/react-query'; import { IntlProvider } from 'react-intl'; import { flatten } from 'flat'; +import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client'; + +import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister'; + import { messages } from './locales/messages/index'; import { LOCALES } from './locales/constants'; @@ -15,7 +19,20 @@ import Root from './routes/Root/Root'; import Trees from './routes/Trees/Trees'; import TreeDetails from './routes/TreeDetails/TreeDetails'; -const queryClient = new QueryClient(); +const queryClient = new QueryClient({ + defaultOptions: { + queries: { + // eslint-disable-next-line no-magic-numbers + gcTime: 1000 * 60 * 30, // 30 minutes, + // eslint-disable-next-line no-magic-numbers + staleTime: 1000 * 60 * 30, // 30 minutes, + }, + }, +}); + +const persister = createSyncStoragePersister({ + storage: window.localStorage, +}); const router = createBrowserRouter([ { @@ -36,10 +53,13 @@ const router = createBrowserRouter([ ReactDOM.createRoot(document.getElementById('root')!).render( - + - + , );