react-query-devtools

<QueryProvider>
          <Cookies />
          <Navbar />

          <div className="flex-grow">{children}</div>

          <Footer />
          <ReactQueryDevtools initialIsOpen={false} />
        </QueryProvider>

<QueryProvider>
          <Cookies />
          <Navbar />

          <div className="flex-grow">{children}</div>

          <Footer />
          <ReactQueryDevtools initialIsOpen={false} />
        </QueryProvider>

"use client";

import {
    QueryClient,
    QueryClientProvider,
} from '@tanstack/react-query'

const queryClient = new QueryClient()

export default function QueryProvider({ children }: { children: React.ReactNode }) {
    return (
        <QueryClientProvider client={queryClient}>
            {children}
        </QueryClientProvider>
    )
}

"use client";

import {
    QueryClient,
    QueryClientProvider,
} from '@tanstack/react-query'

const queryClient = new QueryClient()

export default function QueryProvider({ children }: { children: React.ReactNode }) {
    return (
        <QueryClientProvider client={queryClient}>
            {children}
        </QueryClientProvider>
    )
}