From 37cf7ad7933fbd5eb2944ffbbeaefba4f336a0a0 Mon Sep 17 00:00:00 2001 From: requinard Date: Mon, 26 Feb 2024 22:51:40 +0100 Subject: [PATCH] persist stuff to cache --- package.json | 3 ++ src/main.tsx | 18 ++----- src/providers/index.ts | 1 + .../queryclient/AppQueryClientProvider.tsx | 26 +++++++++ src/providers/queryclient/index.ts | 1 + yarn.lock | 53 +++++++++++++++++++ 6 files changed, 89 insertions(+), 13 deletions(-) create mode 100644 src/providers/queryclient/AppQueryClientProvider.tsx create mode 100644 src/providers/queryclient/index.ts diff --git a/package.json b/package.json index 15b622a..aa02904 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,10 @@ "@mui/x-date-pickers": "^6.19.5", "@react-spring/web": "^9.7.3", "@reduxjs/toolkit": "^2.2.1", + "@tanstack/query-sync-storage-persister": "^5.24.1", "@tanstack/react-query": "^5.24.1", + "@tanstack/react-query-devtools": "^5.24.1", + "@tanstack/react-query-persist-client": "^5.24.1", "@zodios/core": "^10.9.6", "ahooks": "^3.7.10", "axios": "^1.6.7", diff --git a/src/main.tsx b/src/main.tsx index 6cdf7f1..366187e 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,30 +1,22 @@ import "@fontsource/roboto/latin.css"; - -import "./i18n"; import "./utilities/dayjs"; + import React from "react"; import ReactDOM from "react-dom/client"; import { CssBaseline } from "@mui/material"; import { BrowserRouter } from "react-router-dom"; import { Provider as StoreProvider } from "react-redux"; import { PersistGate } from "redux-persist/integration/react"; -import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; +import { LocaleProvider } from "./i18n"; import { App } from "./App"; import { persistor, store } from "./store"; -import { LocaleProvider } from "./i18n/LocalizationProvider"; - -import { AppThemeProvider } from "~providers"; -const queryClient = new QueryClient({ - defaultOptions: { - queries: { staleTime: 5 * 60 * 1000 /* 5 minutes */ }, - }, -}); +import { AppQueryClientProvider, AppThemeProvider } from "~providers"; ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( - + @@ -37,6 +29,6 @@ ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( - + ); diff --git a/src/providers/index.ts b/src/providers/index.ts index 3797aea..34165ac 100644 --- a/src/providers/index.ts +++ b/src/providers/index.ts @@ -1 +1,2 @@ export * from "./theme"; +export * from "./queryclient"; diff --git a/src/providers/queryclient/AppQueryClientProvider.tsx b/src/providers/queryclient/AppQueryClientProvider.tsx new file mode 100644 index 0000000..74a0c25 --- /dev/null +++ b/src/providers/queryclient/AppQueryClientProvider.tsx @@ -0,0 +1,26 @@ +import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; +import { PropsWithChildren } from "react"; +import { persistQueryClient } from "@tanstack/react-query-persist-client"; +import { ReactQueryDevtools } from "@tanstack/react-query-devtools"; +import { createSyncStoragePersister } from "@tanstack/query-sync-storage-persister"; + +const queryClient = new QueryClient({ + defaultOptions: { + queries: { staleTime: 1000 * 60 * 60 * 24 /* 24 hours minutes */ }, + }, +}); + +const localStoragePersister = createSyncStoragePersister({ + storage: window.localStorage, +}); + +persistQueryClient({ + queryClient: queryClient, + persister: localStoragePersister, +}); +export const AppQueryClientProvider = ({ children }: PropsWithChildren) => ( + + {children} + + +); diff --git a/src/providers/queryclient/index.ts b/src/providers/queryclient/index.ts new file mode 100644 index 0000000..35b257d --- /dev/null +++ b/src/providers/queryclient/index.ts @@ -0,0 +1 @@ +export * from "./AppQueryClientProvider"; diff --git a/yarn.lock b/yarn.lock index ce1c897..4d9fe2c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4959,6 +4959,56 @@ __metadata: languageName: node linkType: hard +"@tanstack/query-devtools@npm:5.24.0": + version: 5.24.0 + resolution: "@tanstack/query-devtools@npm:5.24.0" + checksum: 10/92a4faed16ca86bb2e65fec5c47295f537322c6fb16e5e694c66c99a1e6fcb4e0a757b2cd27d73c8315798503299d6959923cdfd17013b038f18772784bf7aec + languageName: node + linkType: hard + +"@tanstack/query-persist-client-core@npm:5.24.1": + version: 5.24.1 + resolution: "@tanstack/query-persist-client-core@npm:5.24.1" + dependencies: + "@tanstack/query-core": "npm:5.24.1" + checksum: 10/2d662be758b1fc9213bb00e6ed512bce34c906d1aa5a728e799777831b3965e22667aaf66f2184c2f3c70b4b6ab8c2a81bea140eb21bce7569111453cf15bc3c + languageName: node + linkType: hard + +"@tanstack/query-sync-storage-persister@npm:^5.24.1": + version: 5.24.1 + resolution: "@tanstack/query-sync-storage-persister@npm:5.24.1" + dependencies: + "@tanstack/query-core": "npm:5.24.1" + "@tanstack/query-persist-client-core": "npm:5.24.1" + checksum: 10/dc14843f55abd24d3ea2e32070d662c2b4f6e701f2f0f0be520c9979ed1cd59d99fad3f46866f2b97380723d7bfb6d30a662063d0a13362f775db55dea309e23 + languageName: node + linkType: hard + +"@tanstack/react-query-devtools@npm:^5.24.1": + version: 5.24.1 + resolution: "@tanstack/react-query-devtools@npm:5.24.1" + dependencies: + "@tanstack/query-devtools": "npm:5.24.0" + peerDependencies: + "@tanstack/react-query": ^5.24.1 + react: ^18.0.0 + checksum: 10/7e255d9a9c58aec5fa986c489b5075019962c825ace4e64bdf6bb7e7b2b53ec5677da2895d34be1b610f5e9523ed7e0628286eab368f8cfb606faa30dcb1e0e7 + languageName: node + linkType: hard + +"@tanstack/react-query-persist-client@npm:^5.24.1": + version: 5.24.1 + resolution: "@tanstack/react-query-persist-client@npm:5.24.1" + dependencies: + "@tanstack/query-persist-client-core": "npm:5.24.1" + peerDependencies: + "@tanstack/react-query": ^5.24.1 + react: ^18.0.0 + checksum: 10/5db544b60b3c8780121f94a375750d3bf0d19a02aaceaf7572e869944853c172206f30ecc791b518bf8c7e290244462cebfe5819e9e5ee6c3959d1bb2e49c964 + languageName: node + linkType: hard + "@tanstack/react-query@npm:^5.24.1": version: 5.24.1 resolution: "@tanstack/react-query@npm:5.24.1" @@ -8839,7 +8889,10 @@ __metadata: "@storybook/test": "npm:^7.6.17" "@svgr/core": "npm:^8.1.0" "@svgr/plugin-jsx": "npm:^8.1.0" + "@tanstack/query-sync-storage-persister": "npm:^5.24.1" "@tanstack/react-query": "npm:^5.24.1" + "@tanstack/react-query-devtools": "npm:^5.24.1" + "@tanstack/react-query-persist-client": "npm:^5.24.1" "@types/lodash": "npm:^4.14.202" "@types/mui-image": "npm:^1.0.5" "@types/react": "npm:^18.2.58"