fix: Clear tanstack query cache after logging out (#294)

Author: PedroChaparro

src/hooks/useSession.tsx

@@ -1,4 +1,5 @@
 import { whoamiService } from "@/services/session/whoami.service";
+import { useQueryClient } from "@tanstack/react-query";
 import { useEffect, useState } from "react";
 
 export type SessionRole = "admin" | "student" | "teacher";
@@ -39,8 +40,13 @@ export const useSession = () => {
     setUser(user);
   };
 
+  const queryClient = useQueryClient();
   const logout = () => {
+    // Remove user from state
     setUser(null);
+
+    // Clear the cache to prevent showing other user's data
+    queryClient.clear();
   };
 
   return {

src/main.tsx

@@ -100,8 +100,8 @@ const queryClient = new QueryClient({
 });
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
-  <AuthContextProvider>
-    <QueryClientProvider client={queryClient}>
+  <QueryClientProvider client={queryClient}>
+    <AuthContextProvider>
       <BrowserRouter>
         <Toaster expand closeButton richColors />
         <Navbar />
@@ -300,6 +300,6 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
         <Footer />
       </BrowserRouter>
       <ReactQueryDevtools initialIsOpen={false} buttonPosition="bottom-right" />
-    </QueryClientProvider>
-  </AuthContextProvider>
+    </AuthContextProvider>
+  </QueryClientProvider>
 );