🚀(frontend) Adds api caching

Query-results are automatically stored in localstorage.
This leverages caching in a controlled way,
improves render-blocking loading times
and unnecessary repeated requests.

- Adds @tanstack/react-query-persist-client
- Adds @tanstack/query-sync-storage-persister
- Updates @tanstack/react-query

Signed-off-by: Robin Weber <[email protected]>

Author: rvveber

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to
 
 ## Added
 
+- 🚀(frontend) Adds api caching #961
 - ✨(back) allow theme customnization using a configuration file #948
 - ✨ Add a custom callout block to the editor #892
 - 🚩(frontend) version MIT only #911

src/frontend/apps/impress/package.json

@@ -31,7 +31,9 @@
     "@openfun/cunningham-react": "3.0.0",
     "@react-pdf/renderer": "4.3.0",
     "@sentry/nextjs": "9.15.0",
-    "@tanstack/react-query": "5.75.4",
+    "@tanstack/query-sync-storage-persister": "5.76.0",
+    "@tanstack/react-query": "5.75.5",
+    "@tanstack/react-query-persist-client": "5.76.0",
     "canvg": "4.0.3",
     "clsx": "2.1.1",
     "cmdk": "1.1.1",

src/frontend/apps/impress/src/core/AppProvider.tsx

@@ -1,7 +1,11 @@
 import { CunninghamProvider } from '@openfun/cunningham-react';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister';
+import { QueryClient } from '@tanstack/react-query';
+import type { Persister } from '@tanstack/react-query-persist-client';
+import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client';
+import debug from 'debug';
 import { useRouter } from 'next/router';
-import { useEffect } from 'react';
+import { useEffect, useMemo } from 'react';
 
 import { useCunninghamTheme } from '@/cunningham';
 import { Auth, KEY_AUTH, setAuthUrl } from '@/features/auth';
@@ -18,6 +22,7 @@ import { ConfigProvider } from './config/';
  */
 const defaultOptions = {
   queries: {
+    staleTime: debug.enabled('no-cache') ? 0 : 1000 * 60 * 3, // 3 minutes
     staleTime: 1000 * 60 * 3,
     retry: 1,
   },
@@ -29,11 +34,21 @@ const queryClient = new QueryClient({
 export function AppProvider({ children }: { children: React.ReactNode }) {
   const { theme } = useCunninghamTheme();
   const { replace } = useRouter();
-
   const initializeResizeListener = useResponsiveStore(
     (state) => state.initializeResizeListener,
   );
 
+  const persister = useMemo(() => {
+    // Create persister only when the browser is available
+    if (typeof window !== 'undefined') {
+      return createSyncStoragePersister({
+        storage: window.localStorage,
+      });
+    }
+    // Return undefined otherwise (PersistQueryClientProvider handles undefined persister gracefully)
+    return undefined;
+  }, []);
+
   useEffect(() => {
     return initializeResizeListener();
   }, [initializeResizeListener]);
@@ -60,12 +75,15 @@ export function AppProvider({ children }: { children: React.ReactNode }) {
   }, [replace]);
 
   return (
-    <QueryClientProvider client={queryClient}>
+    <PersistQueryClientProvider
+      client={queryClient}
+      persistOptions={{ persister: persister as Persister }}
+    >
       <CunninghamProvider theme={theme}>
         <ConfigProvider>
           <Auth>{children}</Auth>
         </ConfigProvider>
       </CunninghamProvider>
-    </QueryClientProvider>
+    </PersistQueryClientProvider>
   );
 }

src/frontend/yarn.lock

@@ -4881,29 +4881,56 @@
   dependencies:
     "@typescript-eslint/utils" "^8.18.1"
 
-"@tanstack/[email protected]":
-  version "5.75.4"
-  resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-5.75.4.tgz#e05f2fe4145fb5354271ad19e63eec61f6ce3012"
-  integrity sha512-pcqOUgWG9oGlzkfRQQMMsEFmtQu0wq81A414CtELZGq+ztVwSTAaoB3AZRAXQJs88LmNMk2YpUKuQbrvzNDyRg==
+"@tanstack/[email protected]":
+  version "5.75.5"
+  resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-5.75.5.tgz#198c27c21b5d15aad09167af8a021f214e194d4b"
+  integrity sha512-kPDOxtoMn2Ycycb76Givx2fi+2pzo98F9ifHL/NFiahEDpDwSVW6o12PRuQ0lQnBOunhRG5etatAhQij91M3MQ==
+
+"@tanstack/[email protected]":
+  version "5.76.0"
+  resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-5.76.0.tgz#3b4d5d34ce307ba0cf7d1a3e90d7adcdc6c46be0"
+  integrity sha512-FN375hb8ctzfNAlex5gHI6+WDXTNpe0nbxp/d2YJtnP+IBM6OUm7zcaoCW6T63BawGOYZBbKC0iPvr41TteNVg==
 
 "@tanstack/[email protected]":
   version "5.74.7"
   resolved "https://registry.yarnpkg.com/@tanstack/query-devtools/-/query-devtools-5.74.7.tgz#c9b022b386ac86e6395228b5d6912e6444b3b971"
   integrity sha512-nSNlfuGdnHf4yB0S+BoNYOE1o3oAH093weAYZolIHfS2stulyA/gWfSk/9H4ZFk5mAAHb5vNqAeJOmbdcGPEQw==
 
+"@tanstack/[email protected]":
+  version "5.76.0"
+  resolved "https://registry.yarnpkg.com/@tanstack/query-persist-client-core/-/query-persist-client-core-5.76.0.tgz#a3bcdd687384dc6b5b61b402bef153ad54515321"
+  integrity sha512-xcTZjILf4q49Nsl6wcnhBYZ4O0gpnuNwV6vPIEWIrwTuSNWz2zd/g9bc8SxnXy7xCV8SM1H0IJn8KjLQIUb2ag==
+  dependencies:
+    "@tanstack/query-core" "5.76.0"
+
+"@tanstack/[email protected]":
+  version "5.76.0"
+  resolved "https://registry.yarnpkg.com/@tanstack/query-sync-storage-persister/-/query-sync-storage-persister-5.76.0.tgz#29643062f1a424873afb22032ce70ee72436bb9b"
+  integrity sha512-N8d8voY61XkM+jfXTySduLrevD6wRM3pwQ1kG0syLiWWx/sX2+CpaTMSPr0GggjQuhmjhUPo83LaV+e449tizA==
+  dependencies:
+    "@tanstack/query-core" "5.76.0"
+    "@tanstack/query-persist-client-core" "5.76.0"
+
 "@tanstack/[email protected]":
   version "5.75.4"
   resolved "https://registry.yarnpkg.com/@tanstack/react-query-devtools/-/react-query-devtools-5.75.4.tgz#89614363d63c997ade81ade4a18e90b57512d4d8"
   integrity sha512-CSJZWa316EFtLZtr6RQLAnqWb1MESzyZ7j0bMQjuhYas5FDp/3MA7G6RE4hWauqCCDsNIfIm2Rnm1zJTZVye/w==
   dependencies:
     "@tanstack/query-devtools" "5.74.7"
 
-"@tanstack/[email protected]":
-  version "5.75.4"
-  resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-5.75.4.tgz#721e1cdf7debb110671f558dc2b6276f637554a5"
-  integrity sha512-Vf65pzYRkf8fk9SP1ncIZjvaXszBhtsvpf+h45Y/9kOywOrVZfBGUpCdffdsVzbmBzmz6TCFes9bM0d3pRrIsA==
+"@tanstack/[email protected]":
+  version "5.76.0"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-query-persist-client/-/react-query-persist-client-5.76.0.tgz#97718fec844708cb98a5902d4b1eeb72adea555b"
+  integrity sha512-QPKgkHX1yC1Ec21FTQHBTbQcHYI+6157DgsmxABp94H7/ZUJ3szZ7wdpdBPQyZ9VxBXlKRN+aNZkOPC90+r/uA==
+  dependencies:
+    "@tanstack/query-persist-client-core" "5.76.0"
+
+"@tanstack/[email protected]":
+  version "5.75.5"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-5.75.5.tgz#650a6b58c7bcd4c33062426e05c4467571148a4f"
+  integrity sha512-QrLCJe40BgBVlWdAdf2ZEVJ0cISOuEy/HKupId1aTKU6gPJZVhSvZpH+Si7csRflCJphzlQ77Yx6gUxGW9o0XQ==
   dependencies:
-    "@tanstack/query-core" "5.75.4"
+    "@tanstack/query-core" "5.75.5"
 
 "@tanstack/[email protected]":
   version "8.20.6"