Closed2022/01/27にクローズ11

frourioをためしてみる

Next.js

Hidden comment

Hi MORISHIGE 2021/12/17

APIの生やし方

tasksを拡張する場合の対象ファイル
- server/api/tasks/index.ts
- server/types/index.ts
- server/validators/index.ts
  - https://frourio.io/docs/validation/custom-validation
- server/prisma/schema.prisma （DBとの接続が必要なエンドポイントの場合）

Tasksの拡張

POST /tasks に完了の初期値（done: boolean）も投稿したい場合

server/api/tasks/index.ts

        import type { Task } from '$prisma/client'
        
        export type Methods = {
          get: {
            query?: {
              limit?: number
              message?: string
            }
        
            resBody: Task[]
          }
          post: {
            reqBody: Pick<Task, 'label' | 'done'> // doneを追加
            resBody: Task
          }
        }

server/api/tasks/controller.ts

        import { defineController } from './$relay'
        import { getTasks, createTask } from '$/service/tasks'
        
        const print = (text: string) => console.log(text)
        
        export default defineController({ getTasks, print }, ({ getTasks, print }) => ({
          get: async ({ query }) => {
            if (query?.message) print(query.message)
        
            return { status: 200, body: await getTasks(query?.limit) }
          },
          post: async ({ body }) => ({
            status: 201,
            body: await createTask(body)
          })
        }))

server/service/tasks.ts

        export const createTask = (body: Pick<Task, 'label' | 'done'>) =>
          prisma.task.create({ data: { ...body } })

Validatorを利用する場合

POSTされる内容をバリデートする方法

server/validators/index.ts

        export class TaskBody {
          @IsString({message: '文字で'})
          @Length(1, 5, { message: '1-5文字でOK' })
          label: string
        
          @IsBoolean()
          done: boolean
        }

server/api/tasks/index.ts

        import { TaskBody } from '$/validators'
        import type { Task } from '$prisma/client'
        
        export type Methods = {
          get: {
            query?: {
              limit?: number
              message?: string
            }
        
            resBody: Task[]
          }
          post: {
            reqBody: TaskBody
            resBody: Task
          }
        }

今までにない項目を追加する場合

Prisma経由でDBへ項目を追加

server/prisma/schema.prisma

        model Task {
          id    Int     @id @default(autoincrement())
          label String
          body  String
          done  Boolean @default(false)
        }

        $ yarn dev もしくは $ yarn migrate:dev でマイグレーションを実行
        $ yarn prisma migrate reset
        $ yarn prisma studio

server/validators/index.ts

        export class TaskBody {
          @IsString()
          @Length(1, 5, { message: '1-5文字でOK' })
          label: string
        
          @IsString()
          body: string
        
          @IsOptional()
          @IsBoolean()
          done: boolean
        }

server/service/tasks.ts

        export const createTask = (body: Pick<Task, 'label' | 'body'>) =>
          prisma.task.create({ data: { ...body } })
        
        または、
        
        export const createTask = (body: Prisma.TaskCreateInput) =>
          prisma.task.create({ data: { ...body } })

このスクラップは2022/01/27にクローズされました