TanStack Start createServerFn sample

TanStack Start の createServerFn を、同一アプリ内の型付き API 境界として扱う最小サンプルです。

Stack

• TanStack Start
• Drizzle ORM
• SQLite (@libsql/client)
• Zod

Run

pnpm を使います。

pnpm install
pnpm dev

http://localhost:3000/todos を開くと、Todo アプリが動きます。

SQLite の DB ファイルは初回アクセス時に .data/todos.sqlite として作成されます。

Colocation

Todo route の近くに API 境界を置いています。

src/routes/todos/
  route.tsx
  -api/
    schemas.ts          # input / output schemas
    *.server.ts         # server-only use cases
    functions.ts        # createServerFn wrappers

src/db/
  client.server.ts      # @libsql/client + drizzle
  schema.server.ts      # Drizzle table definitions

loader は listTodos() を呼ぶだけです。DB に触る read/write は createServerFn の内側に閉じ込めています。*.server.ts は各操作のユースケース本体です。

TanStack Query

このサンプルでは最小構成にするため TanStack Query は使っていません。

実アプリで cache、background refetch、optimistic update、query invalidation を使いたい場合は、loader で queryClient.ensureQueryData() を呼び、component では useQuery() / useMutation() を使う構成にすると扱いやすくなります。