Fix: Query Client SSR Setup

2026-06-01 16:24:30 +02:00
parent ab272a68ec
commit 2b21ffd170
3 changed files with 46 additions and 35 deletions
--- a/src/routes/__root.tsx
+++ b/src/routes/__root.tsx
@@ -5,6 +5,7 @@ import {
  createRootRouteWithContext,
 } from "@tanstack/solid-router";
 import { TanStackRouterDevtools } from "@tanstack/solid-router-devtools";
+import { QueryClientProvider, QueryClient } from "@tanstack/solid-query";

 import "@fontsource/inter/400.css";

@@ -15,12 +16,16 @@ import styleCss from "~/styles.css?url";
 import Header from "~/components/Header";
 import { ThemeProvider } from "~/components/theme-provider";

+export interface MyRouterContext {
+  queryClient: QueryClient;
+}
+
 export function ErrorComponent({ error }: { error: Error }) {
  console.log(error);
  return <div>Error: {error.message}</div>;
 }

-export const Route = createRootRouteWithContext()({
+export const Route = createRootRouteWithContext<MyRouterContext>()({
  head: () => ({
    links: [{ rel: "stylesheet", href: styleCss }],
  }),
@@ -29,6 +34,7 @@ export const Route = createRootRouteWithContext()({
 });

 function RootComponent() {
+  const context = Route.useRouteContext();
  return (
    <html>
      <head>
@@ -36,14 +42,16 @@ function RootComponent() {
        <HeadContent />
      </head>
      <body>
-        <Suspense>
-          <ThemeProvider>
-            <Header />
-            <Outlet />
-          </ThemeProvider>
+        <QueryClientProvider client={context().queryClient}>
+          <Suspense>
+            <ThemeProvider>
+              <Header />
+              <Outlet />
+            </ThemeProvider>

-          <TanStackRouterDevtools />
-        </Suspense>
+            <TanStackRouterDevtools />
+          </Suspense>
+        </QueryClientProvider>
        <Scripts />
      </body>
    </html>