Initial Commit

src/routes/todo.tsx

@@ -0,0 +1,53 @@
+import { queryOptions, useQuery } from "@tanstack/solid-query";
+import { createFileRoute } from "@tanstack/solid-router";
+import { For, Match, Switch } from "solid-js";
+
+export const Route = createFileRoute("/todo")({
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  const query = useQuery(() =>
+    queryOptions({
+      queryKey: ["todo"],
+      queryFn: () =>
+        fetch("https://jsonplaceholder.typicode.com/todos").then((res) =>
+          res.json(),
+        ),
+    }),
+  );
+
+  return (
+    <div>
+      <Switch fallback={<>Loading...</>}>
+        <Match when={query.isError}>
+          <div>Error: {query.error?.message}</div>
+        </Match>
+        <Match when={query.isLoading}>
+          <div>Loading...</div>
+        </Match>
+        <Match when={query.data}>
+          <For each={query.data}>{(item) => <TodoItem item={item} />}</For>
+        </Match>
+      </Switch>
+    </div>
+  );
+}
+
+interface TodoItemProps {
+  item: {
+    userId: number;
+    id: number;
+    title: string;
+    completed: boolean;
+  };
+}
+
+function TodoItem({ item }: TodoItemProps) {
+  return (
+    <div class="p-2">
+      <div>{item.title}</div>
+      <div>{item.completed ? "Completed" : "Pending"}</div>
+    </div>
+  );
+}