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>
--- a/src/routes/todo.tsx
+++ b/src/routes/todo.tsx
@@ -1,25 +1,29 @@
-import { queryOptions, useQuery } from "@tanstack/solid-query";
+import { queryOptions, createQuery } from "@tanstack/solid-query";
 import { createFileRoute } from "@tanstack/solid-router";
 import { For, Match, Switch } from "solid-js";

+const todoQueryOptions = queryOptions({
+  queryKey: ["todo"],
+  queryFn: () => {
+    console.log("Fetching todos...");
+    return fetch("https://jsonplaceholder.typicode.com/todos").then((res) =>
+      res.json(),
+    );
+  },
+});
+
 export const Route = createFileRoute("/todo")({
  component: RouteComponent,
+  loader: ({ context }) =>
+    context.queryClient.ensureQueryData(todoQueryOptions),
 });

 function RouteComponent() {
-  const query = useQuery(() =>
-    queryOptions({
-      queryKey: ["todo"],
-      queryFn: () =>
-        fetch("https://jsonplaceholder.typicode.com/todos").then((res) =>
-          res.json(),
-        ),
-    }),
-  );
+  const query = createQuery(() => todoQueryOptions);

  return (
    <div>
-      <Switch fallback={<>Loading...</>}>
+      <Switch fallback={<div>Loading...</div>}>
        <Match when={query.isError}>
          <div>Error: {query.error?.message}</div>
        </Match>