Add tanstack query to tanstack start ssr

foolish-indigo · 2025-04-12T18:28:20.899Z

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?

F

foolish-indigoOP•4/12/25, 6:33 PM

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);

// 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>,
);

// 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;
}

// 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;
}

S

still-lime•4/12/25, 6:38 PM

we have a deep integration already

S

still-lime•4/12/25, 6:38 PM

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

F

foolish-indigoOP•4/12/25, 6:43 PM

@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?

S

still-lime•4/12/25, 6:45 PM

not shared between requests

S

still-lime•4/12/25, 6:45 PM

created per request

F

foolish-indigoOP•4/12/25, 6:59 PM

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

Add tanstack query to tanstack start ssr

Similar Threads

Similar Threads

Similar Threads