```typescript
"use client"
import React, { useState } from "react"
import dynamic from "next/dynamic"
import {
  defaultShouldDehydrateQuery,
  isServer,
  MutationCache,
  QueryClient,
  QueryClientProvider,
} from "@tanstack/react-query"

// Conditional DevTools import
const ReactQueryDevtools = dynamic(
  async () => {
    if (process.env.NEXT_PUBLIC_APP_ENV === "production") {
      const d = await import(
        "@tanstack/react-query-devtools/build/modern/production.js"
      )
      return {
        default: d.ReactQueryDevtools,
      }
    }
    const d = await import("@tanstack/react-query-devtools")
    return {
      default: d.ReactQueryDevtools,
    }
  },
  {
    ssr: false,
  }
)

let browserQueryClient: QueryClient | undefined = undefined

function makeQueryClient() {
  return new QueryClient({
    mutationCache: new MutationCache({
      onSuccess: async () => {
        await browserQueryClient?.invalidateQueries()
      },
    }),
    defaultOptions: {
      queries: {
        staleTime: 1000 * 60 * 24, // 24 hours
        gcTime: 1000 * 60 * 24, // 24 hours
        refetchOnWindowFocus: false,
        refetchOnReconnect: true,
        retry: 5,
      },
      mutations: {
        onSuccess: async () => {
          await browserQueryClient?.invalidateQueries()
        },
      },
      dehydrate: {
        shouldDehydrateQuery: (query) =>
          defaultShouldDehydrateQuery(query) ||
          query.state.status === "pending",
      },
    },
  })
}

function getQueryClient() {
  if (isServer) {
    return makeQueryClient()
  }
  return (browserQueryClient = browserQueryClient ?? makeQueryClient())
}

export default function ReactQueryProvider({
  children,
}: {
  children: React.ReactNode
}) {
  const [queryClient] = useState(() => getQueryClient())

  return (
    <QueryClientProvider client={queryClient}>
      {children}
      {process.env.NEXT_PUBLIC_APP_ENV !== "production" && (
        <ReactQueryDevtools initialIsOpen={false} />
      )}
    </QueryClientProvider>
  )
}
```