(インストールには yarn 必須のようです)
yarn create frourio-app
(アプリ名は後ほどブラウザ画面から入力するのでここではこのまま入力します)
ブラウザ画面が立ち上がって構成セットを選択してインストールを実行します
vscode からフォルダを開いて、「NPMスクリプト」のメニューから「dev」を起動します
ちなみにpackage.json は以下のようになっています
"scripts": {
"dev": "npm run migrate:dev && run-p dev:*",
"dev:client": "next dev -p 8001",
"dev:server": "npm run dev --prefix server",
"dev:aspida": "aspida --watch",
..................
server/prisma/schema.prisma に記述を追加して、
// ● 追加
model Post {
id Int @id @default(autoincrement())
name String
content_name String?
created_at DateTime @default(now())
updated_at DateTime
}
マイグレーションの実行
cd server/prisma/
npx prisma migrate dev --name <マイグレーションにつける名前>
例:
npx prisma migrate dev --name add_model_post
実行後
1. server/prisma/migrations/<実行日時>_add_model_post/migration.sql というファイルが新規作成されます
2. postテーブルがdbに追加されます
Prisma Clientコードを自動で作成
npx prisma generate
実行後
1. server/node_modules/.prisma/client/index.d.ts に post の型が自動生成されます
server/node_modules/.prisma/client/index.d.ts
/**
* Model post
*/
export type post = {
id: number
name: string
content_name: string | null
created_at: Date
updated_at: Date
}
例えばエンドポイントが /post/ なら、対応する定義は server/api/post/index.ts に書きます。
cd app/server/api
mkdir posts
ディレクトリを作成すると作成したディレクトリ以下に3ファイルが自動生成されます
server/api/post/$relay.ts
server/api/post/controller.ts
server/api/post/index.ts
frourioの自動生成処理
server/api/ にディレクトリが追加されたらファイル群を自動生成
server/api/ に変更があったら $server.ts を自動生成
APIのURLをディレクトリとファイルの階層で表現する
パス変数を含むパス /tasks/{taskId}/ は、server/api/tasks/_taskId/index.ts のようになります。
_ から始まるパス変数のデフォルトの型は number | string です。明示的に指定する場合は変数名の後に @number などをつけ、_taskId@number と指定します。
server/api/posts/index.ts
import { defineController } from './$relay'
import type { Post } from '$prisma/client'
export default defineController(() => ({
get: () => {
return { status: 200, body: indexPost() }
},
}))
const indexPost = (): Post[] => {
return [
{
id: 1,
name: 'string',
content_name: 'string',
created_at: new Date,
updated_at: new Date,
}
]
}
(あとで修正しますが一旦これで作成します)
アクセスして確認します。
server/api/$api.ts に サーバーのポートが記述されているのでそれを参考にアクセスします
http://localhost:10928/api/posts
TypeScript エラーが出ている場合は一度サーバーをストップして再起動すると直ることがあります
pages/post/index.tsx
import useAspidaSWR from '@aspida/swr'
import { apiClient } from '~/utils/apiClient'
const Index = () => {
const { data } = useAspidaSWR(
apiClient.posts, {}
);
return (
<>
<h1>post/index</h1>
{data &&
<ul>
{data.map((v, i) => {
return <li key={v.id}>{v.id} : {v.name}</li>;
})}
</ul>
}
</>
)
}
export default Index
アクセスして確認します。
http://localhost:8000/post
Prismaの findMany メソッドを使ってデータ一覧を取得するように修正します
import { defineController } from './$relay'
import type { Post } from '$prisma/client'
import { PrismaClient } from '@prisma/client'
import { depend } from 'velona'
export default defineController(() => ({
get: async () => {
return { status: 200, body: await getIndexPost() }
},
}))
const prisma = new PrismaClient()
export const getIndexPost = depend(
{ prisma: prisma as { post: { findMany(): Promise<Post[]> } } },
() => {
return prisma.post.findMany()
}
)