frourio

● frourioアプリの初期化

(インストールには yarn 必須のようです)

yarn create frourio-app

(アプリ名は後ほどブラウザ画面から入力するのでここではこのまま入力します)

ブラウザ画面が立ち上がって構成セットを選択してインストールを実行します

● frourioの起動方法

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",
    ..................

● Prismaでテーブルを作成する

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
}

● aspida の APIを書く

例えばエンドポイントが /post/ なら、対応する定義は server/api/post/index.ts に書きます。

1. ディレクトリ server/api/posts/ を新規作成する

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 と指定します。

引用: https://bit.ly/35x5YE3

2. server/api/post/index.ts を次の内容で保存する

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

● server/api/post/index.ts を Prismaを使って実際にDBからデータをSELECTするように修正

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()
  }
)
No.2147
01/28 22:45

edit