(fixed) Date fields in prefetch causing hydration issues

import { HydrationBoundary, QueryClient, dehydrate  } from "@tanstack/react-query";
const Provider = ({ children }: { children: React.ReactNode }) => {
  const queryClient = new QueryClient();
  queryClient.prefetchQuery(//queryFn returns data with some Date props);
  return (
      <HydrationBoundary state = {dehydrate(queryClient)}>
        {children}
      </HydrationBoundary>
  );
};

import { HydrationBoundary, QueryClient, dehydrate  } from "@tanstack/react-query";
const Provider = ({ children }: { children: React.ReactNode }) => {
  const queryClient = new QueryClient();
  queryClient.prefetchQuery(//queryFn returns data with some Date props);
  return (
      <HydrationBoundary state = {dehydrate(queryClient)}>
        {children}
      </HydrationBoundary>
  );
};

hi, I have this simple setup where I prefetch the data and pass it to tanstack query client. my data has a field called

dtstart

dtstart

which is a date.

I get hydration error on the client because

dtstart

dtstart

is first displayed in UTC timestamp and then in the user's time zone timestamp, So suppose my timezone is gmt+8 and the date was today, 12am my time, I'd first see yesterday 4pm before seeing today 12am.

TanStack•2mo ago•

6 replies

spotty-amber

(fixed) Date fields in prefetch causing hydration issues

import { HydrationBoundary, QueryClient, dehydrate  } from "@tanstack/react-query";
const Provider = ({ children }: { children: React.ReactNode }) => {
  const queryClient = new QueryClient();
  queryClient.prefetchQuery(//queryFn returns data with some Date props);
  return (
      <HydrationBoundary state = {dehydrate(queryClient)}>
        {children}
      </HydrationBoundary>
  );
};

import { HydrationBoundary, QueryClient, dehydrate  } from "@tanstack/react-query";
const Provider = ({ children }: { children: React.ReactNode }) => {
  const queryClient = new QueryClient();
  queryClient.prefetchQuery(//queryFn returns data with some Date props);
  return (
      <HydrationBoundary state = {dehydrate(queryClient)}>
        {children}
      </HydrationBoundary>
  );
};

hi, I have this simple setup where I prefetch the data and pass it to tanstack query client. my data has a field called

dtstart

dtstart

which is a date.

I get hydration error on the client because

dtstart

dtstart

(fixed) Date fields in prefetch causing hydration issues

Similar Threads

(fixed) Date fields in prefetch causing hydration issues

Similar Threads

Similar Threads

Similar Threads