T
TanStack•2y ago
rare-sapphire

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. 
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.
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?