rival-black

Add tanstack query to tanstack start ssr

I create a query client in the frontend and in the backend. I wrap the rootcomponent with a QueryClientProvider and pass whichever queryclient is available to the provider. When I visit routes other "/" like "/login" without first navigating to the index, it throws an error about a missing queryclient. Is there a detailed guide on how to integrate tanstack query with my start app?

6 Replies

rival-blackOP•5mo ago

Here's what I'm doing exactly for more context

// ssr.tsx
export default createStartHandler({
  createRouter: () => {
    const queryClient = new QueryClient();
    return createRouter({ queryClient, source: "server" });
  },
  getRouterManifest,
})(defaultStreamHandler);

// ssr.tsx
export default createStartHandler({
  createRouter: () => {
    const queryClient = new QueryClient();
    return createRouter({ queryClient, source: "server" });
  },
  getRouterManifest,
})(defaultStreamHandler);

// client.tsx

const queryClient = new QueryClient();
const router = createRouter({ queryClient, source: "client" });

const dehydratedState = dehydrate(queryClient);

hydrateRoot(
  document,
  <QueryClientProvider client={queryClient}>
    <HydrationBoundary state={dehydratedState}>
      <StartClient router={router} />
    </HydrationBoundary>
  </QueryClientProvider>,
);

// client.tsx

const queryClient = new QueryClient();
const router = createRouter({ queryClient, source: "client" });

const dehydratedState = dehydrate(queryClient);

hydrateRoot(
  document,
  <QueryClientProvider client={queryClient}>
    <HydrationBoundary state={dehydratedState}>
      <StartClient router={router} />
    </HydrationBoundary>
  </QueryClientProvider>,
);

// router.tsx
export function createRouter({ queryClient, source }: RouterConfig) {
  const router = createTanStackRouter({
    routeTree,
    scrollRestoration: true,
    context: {
      queryClient,
      source,
    },
  });

  return router;
}

// router.tsx
export function createRouter({ queryClient, source }: RouterConfig) {
  const router = createTanStackRouter({
    routeTree,
    scrollRestoration: true,
    context: {
      queryClient,
      source,
    },
  });

  return router;
}

fascinating-indigo•5mo ago

we have a deep integration already

fascinating-indigo•5mo ago

see https://github.com/TanStack/router/blob/main/examples%2Freact%2Fstart-basic-react-query%2Fsrc%2Frouter.tsx

GitHub

router/examples/react/start-basic-react-query/src/router.tsx at mai...

🤖 Fully typesafe Router for React (and friends) w/ built-in caching, 1st class search-param APIs, client-side cache integration and isomorphic rendering. - TanStack/router

rival-blackOP•5mo ago

@Manuel Schiller thank you!! question about the client: if we declare it at the base router level, would the query client be shared across requests and be polluted with data across sessions? if not, then is what im doing by defining multiple clients per environment moot?

fascinating-indigo•5mo ago

not shared between requests created per request

rival-blackOP•5mo ago

Thank you for your help! I was able to resolve the issue. 10/10!

Gaming

Programming

Add tanstack query to tanstack start ssr

Did you find this page helpful?