// src/routes/posts/[id]/index.tsx
import { ErrorBoundary } from "solid-js";
import { query, createAsync, type RouteDefinition } from "@solidjs/router";
const getPost = query(async (id: string) => {
"use server";
const post = await fetch(`https://my-api.com/posts/${id}`);
return await post.json();
}, "post");
export const route = {
preload: ({ params }) => getPost(params.id),
} satisfies RouteDefinition;
export default function Page() {
const postId = 1;
const post = createAsync(() => getPost(postId));
return (
<div>
<ErrorBoundary fallback={<div>Something went wrong!</div>}>
<h1>{post().title}</h1>
</ErrorBoundary>
</div>
);
}
// src/routes/posts/[id]/index.tsx
import { ErrorBoundary } from "solid-js";
import { query, createAsync, type RouteDefinition } from "@solidjs/router";
const getPost = query(async (id: string) => {
"use server";
const post = await fetch(`https://my-api.com/posts/${id}`);
return await post.json();
}, "post");
export const route = {
preload: ({ params }) => getPost(params.id),
} satisfies RouteDefinition;
export default function Page() {
const postId = 1;
const post = createAsync(() => getPost(postId));
return (
<div>
<ErrorBoundary fallback={<div>Something went wrong!</div>}>
<h1>{post().title}</h1>
</ErrorBoundary>
</div>
);
}