Query Prefetch strips off local storage theme
Hello. I've launched my site to production and noticed a bug where I use prefetchQuery and dehydrate to get live data from DB , after page refresh it removed my theme from <html lang="en" class="dark">. It's my first experience with TanStack so im not sure where exacly the issue might be.
Root Layout:
But that only happens in production, I can't recreate it on localhost. Any tips or help would be appreciated.
export default async function Page() {
const queryClient = new QueryClient();
await queryClient.prefetchQuery({
queryKey: ["logs"],
queryFn: supabaseBLC,
});
return (
<main className="px-4 py-10 sm:px-6 lg:px-8 lg:py-6">
<AuthAccess roles={[]} />
<h1>Binom link changer</h1>
<div className="mx-auto w-full grow lg:flex xl:px-2">
<div className="flex-1 xl:flex">
<div className="px-4 py-6 sm:px-6 lg:pl-8 xl:flex-1 xl:pl-6 ">
<p>Main area</p>
<BinomLinkChangerForm />
</div>
</div>
<HydrationBoundary state={dehydrate(queryClient)}>
<BLCLogs />
</HydrationBoundary>
</div>
</main>export default async function Page() {
const queryClient = new QueryClient();
await queryClient.prefetchQuery({
queryKey: ["logs"],
queryFn: supabaseBLC,
});
return (
<main className="px-4 py-10 sm:px-6 lg:px-8 lg:py-6">
<AuthAccess roles={[]} />
<h1>Binom link changer</h1>
<div className="mx-auto w-full grow lg:flex xl:px-2">
<div className="flex-1 xl:flex">
<div className="px-4 py-6 sm:px-6 lg:pl-8 xl:flex-1 xl:pl-6 ">
<p>Main area</p>
<BinomLinkChangerForm />
</div>
</div>
<HydrationBoundary state={dehydrate(queryClient)}>
<BLCLogs />
</HydrationBoundary>
</div>
</main>Root Layout:
<html lang="en">
<head>
<script
dangerouslySetInnerHTML={{
__html: `
try {
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark');
document.querySelector('meta[name="theme-color"]').setAttribute('content', '#020');
} else {
document.documentElement.classList.remove('dark')
document.querySelector('meta[name="theme-color"]').setAttribute('content', '#FFFFFF');
}
} catch (_) {}
`,
}}
/>
</head>
<JotaiProvider>
<ReactQueryClientProvider>
//Rest of the layout
</ReactQueryClientProvider> <html lang="en">
<head>
<script
dangerouslySetInnerHTML={{
__html: `
try {
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark');
document.querySelector('meta[name="theme-color"]').setAttribute('content', '#020');
} else {
document.documentElement.classList.remove('dark')
document.querySelector('meta[name="theme-color"]').setAttribute('content', '#FFFFFF');
}
} catch (_) {}
`,
}}
/>
</head>
<JotaiProvider>
<ReactQueryClientProvider>
//Rest of the layout
</ReactQueryClientProvider>But that only happens in production, I can't recreate it on localhost. Any tips or help would be appreciated.
