feat: add ability to create react query client options based on page …

…context (#154) Co-authored-by: Romuald Brillout <[email protected]>
vikejs · Nov 25, 2024 · 7e50f90 · 7e50f90
1 parent 0d69de9
commit 7e50f90
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 3 deletions.
diff --git a/packages/vike-react-query/README.md b/packages/vike-react-query/README.md
@@ -254,7 +254,23 @@ export default {
 }
 ```
 
-You can apply settings to all pages, a group of pages, or only one page. See [Vike Docs > Config > Inheritance](https://vike.dev/config#inheritance).
+You can access [`pageContext`](https://vike.dev/pageContext):
+
+```js
+// +queryClientConfig.js
+
+export default (pageContext) => ({
+  defaultOptions: {
+    queries: {
+      staleTime: pageContext.data.staleTime,
+      retry: pageContext.routeParams.userId ? true : false
+    }
+  }
+})
+```
+
+> [!NOTE]
+> You can apply settings to all pages, a group of pages, or only one page. See [Vike Docs > Config > Inheritance](https://vike.dev/config#inheritance).
 
 <br/>
 

diff --git a/packages/vike-react-query/integration/+config.ts b/packages/vike-react-query/integration/+config.ts
@@ -33,7 +33,7 @@ const config = {
 declare global {
   namespace Vike {
     interface Config {
-      queryClientConfig?: QueryClientConfig
+      queryClientConfig?: QueryClientConfig | ((pageContext: PageContext) => QueryClientConfig)
       FallbackErrorBoundary?: ((props: { children: ReactNode }) => ReactNode) | ImportString
     }
   }

diff --git a/packages/vike-react-query/integration/Wrapper.tsx b/packages/vike-react-query/integration/Wrapper.tsx
@@ -8,7 +8,10 @@ import { usePageContext } from 'vike-react/usePageContext'
 function Wrapper({ children }: { children: ReactNode }) {
   const pageContext = usePageContext()
   const { queryClientConfig, FallbackErrorBoundary = PassThrough } = pageContext.config
-  const [queryClient] = useState(() => new QueryClient(queryClientConfig))
+  const [queryClient] = useState(() => {
+    const config = typeof queryClientConfig === 'function' ? queryClientConfig(pageContext) : queryClientConfig
+    return new QueryClient(config)
+  })
 
   return (
     <QueryClientProvider client={queryClient}>