Fix: Query Client SSR Setup

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>