58 lines
1.4 KiB
TypeScript
58 lines
1.4 KiB
TypeScript
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 = createQuery(() => todoQueryOptions);
|
|
|
|
return (
|
|
<div>
|
|
<Switch fallback={<div>Loading...</div>}>
|
|
<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>
|
|
);
|
|
}
|