From e77e4852fc2eca50082a578d4c733089cd24ec18 Mon Sep 17 00:00:00 2001
From: Sten Levasseur <levasseur.sten@gmail.com>
Date: Sat, 4 Jan 2025 18:05:23 +0100
Subject: [PATCH] chore: setup tanstack query

---
 apps/web/package.json |  2 +-
 apps/web/src/main.tsx | 24 ++++++++++++++++++++----
 pnpm-lock.yaml        |  2 +-
 3 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/apps/web/package.json b/apps/web/package.json
index 7b1edc5..6f93264 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@tanstack/react-query": "^5.0.0",
+    "@tanstack/react-query": "^5.62.7",
     "@tanstack/react-router": "^1.89.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
diff --git a/apps/web/src/main.tsx b/apps/web/src/main.tsx
index 96fe950..9f9d3dc 100644
--- a/apps/web/src/main.tsx
+++ b/apps/web/src/main.tsx
@@ -1,13 +1,27 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { RouterProvider, createRouter } from '@tanstack/react-router';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
-
-// Import the generated route tree
 import { routeTree } from './routeTree.gen';
 
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 1000 * 10,
+    },
+  },
+});
+
 // Create a new router instance
-const router = createRouter({ routeTree });
+const router = createRouter({
+  routeTree,
+  context: { queryClient },
+  defaultPreload: 'intent',
+  // Since we're using React Query, we don't want loader calls to ever be stale
+  // This will ensure that the loader is always called when the route is preloaded or visited
+  defaultPreloadStaleTime: 0,
+});
 
 // Register the router instance for type safety
 declare module '@tanstack/react-router' {
@@ -21,6 +35,8 @@ if (!rootElement) throw new Error('Root element not found');
 
 ReactDOM.createRoot(rootElement).render(
   <React.StrictMode>
-    <RouterProvider router={router} />
+    <QueryClientProvider client={queryClient}>
+      <RouterProvider router={router} />
+    </QueryClientProvider>
   </React.StrictMode>
 );
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 690e34e..25e0240 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -121,7 +121,7 @@ importers:
   apps/web:
     dependencies:
       '@tanstack/react-query':
-        specifier: ^5.0.0
+        specifier: ^5.62.7
         version: 5.62.7(react@18.3.1)
       '@tanstack/react-router':
         specifier: ^1.89.0