diff --git a/packages/web/package.json b/packages/web/package.json index c4ff22b35..b3faeda59 100644 --- a/packages/web/package.json +++ b/packages/web/package.json @@ -32,7 +32,9 @@ "@radix-ui/react-switch": "^1.0.1", "@sentry/nextjs": "^7.42.0", "@stitches/react": "^1.2.5", - "@tanstack/react-query": "^5.51.15", + "@tanstack/query-sync-storage-persister": "^5.51.21", + "@tanstack/react-query": "^5.51.21", + "@tanstack/react-query-persist-client": "^5.51.21", "allotment": "^1.20.2", "antd": "4.24.3", "axios": "^1.2.0", diff --git a/packages/web/pages/_app.tsx b/packages/web/pages/_app.tsx index e3ab489fc..4dcbd24b9 100644 --- a/packages/web/pages/_app.tsx +++ b/packages/web/pages/_app.tsx @@ -23,7 +23,33 @@ import { updateTheme } from '../lib/themeUpdater' import { ThemeId } from '../components/tokens/stitches.config' import { posthog } from 'posthog-js' import { GoogleReCaptchaProvider } from '@google-recaptcha/react' +import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister' import { QueryClient, QueryClientProvider } from '@tanstack/react-query' +import { persistQueryClient } from '@tanstack/react-query-persist-client' +import React from 'react' + +const queryClient = new QueryClient() + +if (typeof window !== 'undefined') { + const localStoragePersister = createSyncStoragePersister({ + storage: window.localStorage, + }) + + persistQueryClient({ + queryClient, + persister: localStoragePersister, + // 60 min + maxAge: 60 * 60 * 1000, + dehydrateOptions: { + shouldDehydrateQuery: ({ queryKey }) => { + console.log('queryKey: ', queryKey) + // Don't cache the library items in local storage + const [firstKey] = queryKey + return firstKey !== 'library-items' + }, + }, + }) +} TopBarProgress.config({ barColors: { @@ -75,13 +101,13 @@ const ConditionalCaptchaProvider = (props: { return <>{props.children} } -const queryClient = new QueryClient({ - defaultOptions: { - queries: { - gcTime: 1000 * 60 * 60 * 24, - }, - }, -}) +// const queryClient = new QueryClient({ +// defaultOptions: { +// queries: { +// gcTime: 1000 * 60 * 60 * 24, +// }, +// }, +// }) export function OmnivoreApp({ Component, pageProps }: AppProps): JSX.Element { const router = useRouter() diff --git a/yarn.lock b/yarn.lock index 61ad70178..f2580e223 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7575,17 +7575,39 @@ dependencies: defer-to-connect "^1.0.1" -"@tanstack/query-core@5.51.15": - version "5.51.15" - resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-5.51.15.tgz#7aee6a2d5d3f64de3e54096607233b1132dc6afd" - integrity sha512-xyobHDJ0yhPE3+UkSQ2/4X1fLSg7ICJI5J1JyU9yf7F3deQfEwSImCDrB1WSRrauJkMtXW7YIEcC0oA6ZZWt5A== +"@tanstack/query-core@5.51.21": + version "5.51.21" + resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-5.51.21.tgz#a510469c6c30d3de2a8b8798e340169a4b0fd08f" + integrity sha512-POQxm42IUp6n89kKWF4IZi18v3fxQWFRolvBA6phNVmA8psdfB1MvDnGacCJdS+EOX12w/CyHM62z//rHmYmvw== -"@tanstack/react-query@^5.51.15": - version "5.51.15" - resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-5.51.15.tgz#059bb2966f828263adb355de81410d107e22b5bc" - integrity sha512-UgFg23SrdIYrmfTSxAUn9g+J64VQy11pb9/EefoY/u2+zWuNMeqEOnvpJhf52XQy0yztQoyM9p6x8PFyTNaxXg== +"@tanstack/query-persist-client-core@5.51.21": + version "5.51.21" + resolved "https://registry.yarnpkg.com/@tanstack/query-persist-client-core/-/query-persist-client-core-5.51.21.tgz#5ee605f730c28ebdf3e2bf075257f65ceab80ccb" + integrity sha512-W/H3SFIMPjxgiwkrl511pG2JhvKnFWtLCgO+AlNqk9keyClMbm9tb3oLUHveLuzviCaROpmFShW+eSP5zYwk4g== dependencies: - "@tanstack/query-core" "5.51.15" + "@tanstack/query-core" "5.51.21" + +"@tanstack/query-sync-storage-persister@^5.51.21": + version "5.51.21" + resolved "https://registry.yarnpkg.com/@tanstack/query-sync-storage-persister/-/query-sync-storage-persister-5.51.21.tgz#da752c35fb0edd8584984355ee812892f4158401" + integrity sha512-I/J9Z22jLNyeKg8LNnduvJVPywYGL30JcCYqYcg1rl26AL6oiFrHezrCpTNUeahWbT3p4XEQRryC5Ikoeq7rNA== + dependencies: + "@tanstack/query-core" "5.51.21" + "@tanstack/query-persist-client-core" "5.51.21" + +"@tanstack/react-query-persist-client@^5.51.21": + version "5.51.23" + resolved "https://registry.yarnpkg.com/@tanstack/react-query-persist-client/-/react-query-persist-client-5.51.23.tgz#f4f4d7ba854907c43a864614eea94579a20f0651" + integrity sha512-SwTNwxhG4zgpji3B8oLZqZuaOXYtOjbuqVerMQkOX/vGroIU6dGh1SzOwy4glW3IVr+G3kUKMcS3JYibWPQZiQ== + dependencies: + "@tanstack/query-persist-client-core" "5.51.21" + +"@tanstack/react-query@^5.51.21": + version "5.51.23" + resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-5.51.23.tgz#83c223f4cb6054b206de8856b73ca7e41a63ba1f" + integrity sha512-CfJCfX45nnVIZjQBRYYtvVMIsGgWLKLYC4xcUiYEey671n1alvTZoCBaU9B85O8mF/tx9LPyrI04A6Bs2THv4A== + dependencies: + "@tanstack/query-core" "5.51.21" "@testing-library/cypress@^8.0.2": version "8.0.2"