refactor: move query client provider to a client component

pedrolivaresanchez · Nov 6, 2024 · 80f4abf · 80f4abf
1 parent db47958
commit 80f4abf
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -6,32 +6,30 @@ import { TownsProvider } from '@/context/TownProvider';
 import { createClient } from '@/lib/supabase/server';
 import { SessionProvider } from '@/context/SessionProvider';
 import { townsService } from '@/lib/service';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Toaster } from 'sonner';
 import { PropsWithChildren } from 'react';
+import { QueryClientProvider } from '@/context/QueryClientProvider';
 
 export const metadata = {
   title: 'Ajuda Dana - Sistema de Coordinación',
   description: 'Sistema de coordinación para emergencias en la Comunidad Valenciana',
 };
 
-const queryClient = new QueryClient();
-
 const getSession = async () => {
   const supabase = await createClient();
   const { data, error } = await supabase.auth.getUser();
   return data;
 };
 
-export default async function RootLayout({ children }: PropsWithChildren<{}>) {
+export default async function RootLayout({ children }: PropsWithChildren) {
   const session = await getSession();
   const towns = await townsService.getTowns();
   return (
     <html lang="es">
       <body suppressHydrationWarning={true}>
         <Toaster position="bottom-left" richColors />
         <SessionProvider session={session}>
-          <QueryClientProvider client={queryClient}>
+          <QueryClientProvider>
             <TownsProvider towns={towns}>
               <EmergencyProvider>
                 <EmergencyLayout>{children}</EmergencyLayout>

diff --git a/src/context/QueryClientProvider.tsx b/src/context/QueryClientProvider.tsx
@@ -0,0 +1,10 @@
+'use client';
+
+import { PropsWithChildren, useState } from 'react';
+import { QueryClient, QueryClientProvider as TanstackQueryClientProvider } from '@tanstack/react-query';
+
+export const QueryClientProvider = ({ children }: PropsWithChildren) => {
+  const [client] = useState(new QueryClient());
+
+  return <TanstackQueryClientProvider client={client}>{children}</TanstackQueryClientProvider>;
+};