TanStackT
TanStack•2mo ago•
4 replies
dangerous-fuchsia

Need staletime or SSR does not work correctly

Hey, my team and I were wondering why do we need a staletime OR refetchOnMount: false and refetchOnWindowFocus: false, to make the SSR work correctly ?

If we do not put it, double fetch : data is SSR but a query do trigger in network too. However in the tanstack start sample, there is no staletime nor refetch params to false in hooks and I don't get why. ( https://tanstack.com/start/latest/docs/framework/react/examples/start-basic-react-query?path=examples%2Freact%2Fstart-basic-react-query%2Fsrc%2Futils%2Fposts.tsx )

Heres our hook :
export const previewCategoriesQueryOptions = () => {
  return queryOptions({
    queryKey: ['preview-categories-offers'],
    queryFn: async () => {
      return await fetchBrowser<(Category & { offers: Offer[] })[]>({
        url: '/preview',
        method: 'GET',
      });
    },
    staleTime: 0,
    refetchOnMount: false,
    refetchOnWindowFocus: false,
  });
};

and where it's used : 
export const Route = createFileRoute('/')({
  component: RouteComponent,
  loader: async ({ context }) => {
    const categories = await context.queryClient.ensureQueryData(
      categoriesQueryOptions(),
    );

    await context.queryClient.prefetchQuery(
      previewCategoriesQueryOptions(),
    );

    return {
      categories,
    };
  },
});

function RouteComponent() {
  const { categories } = Route.useLoaderData();
  const { data: preview } = useSuspenseQuery(
    previewCategoriesQueryOptions(),
  );

  return (
    <Container>
      <Slider />
      <Categories categories={categories} />

      {preview?.map((category) => (
        <CategoryOffers key={category.id} {...category} />
      ))}
    </Container>
  );
}


Thank you if you take the time to help us
Was this page helpful?