数据加载 #

SolidStart 数据加载
├── createRouteData    路由级数据
├── createServerData$  服务端函数
├── createResource     组件级数据
└── API Routes         REST API

import { createRouteData, useRouteData } from 'solid-start';

export function routeData() {
  return createRouteData(async () => {
    const response = await fetch('/api/posts');
    return response.json();
  });
}

export default function Blog() {
  const posts = useRouteData();

  return (
    <ul>
      <For each={posts()}>
        {(post) => <li>{post.title}</li>}
      </For>
    </ul>
  );
}

export function routeData({ params }) {
  return createRouteData(async () => {
    const post = await fetchPost(params.slug);
    return post;
  }, { key: () => params.slug });
}

import { createServerData$, createServerAction$ } from 'solid-start/server';

// 读取数据
export const getUsers = createServerData$(async () => {
  return await db.user.findMany();
});

// 操作数据
export const createUser = createServerAction$(async (formData: FormData) => {
  const name = formData.get('name');
  return await db.user.create({ data: { name } });
});

import { createServerData$ } from 'solid-start/server';

export function routeData() {
  return createServerData$(async () => {
    const users = await db.user.findMany();
    return users;
  });
}

// src/routes/api/users.ts
export function GET() {
  return new Response(JSON.stringify({ users: [] }), {
    headers: { 'Content-Type': 'application/json' }
  });
}

export async function POST({ request }) {
  const body = await request.json();
  return new Response(JSON.stringify(body));
}