👌 Blitz.jsで古臭いBBSを作るやつのメモ #02 API Routes / ファイルアップロード編

import { BlitzApiRequest, BlitzApiResponse } from "blitz"

export default async function latest(req: BlitzApiRequest, res: BlitzApiResponse) {
  res.json({ hi: "hi" })
}

import { apiRoute } from "app/utils/apiRoute"
import { db } from "db"

export default apiRoute({
  whenGet: async function latest(req, res) {
    const entries = await db.entry.findMany({ orderBy: { created_at: "desc" } })
    res.status(200).json(entries)
  },
})

import { BlitzApiRequest, BlitzApiResponse, Middleware, MiddlewareRequest, MiddlewareResponse } from "blitz"

type AcceptMethod = "POST" | "GET" | "HEAD"

type MiddlewareOption =
  | Middleware
  | {
      when: AcceptMethod | AcceptMethod[]
      then: Middleware
    }

type Handler = (req: BlitzApiRequest, res: BlitzApiResponse) => void | Promise<void>

interface Options {
  middlewares?: MiddlewareOption[]
  whenGet?: Handler
  whenPost?: Handler
}

export const apiRoute = (opt: Options) => {
  const middlewares = (opt.middlewares ?? []).map((m) => {
    if ("when" in m) {
      return { method: m.when, then: m.then }
    } else {
      return { method: null, then: m }
    }
  })

  return async (req: MiddlewareRequest, res: MiddlewareResponse) => {
    for (const m of middlewares) {
      if (m.method == null || m.method === req.method) {
        await new Promise((resolve, reject) => {
          m.then(req, res, (result) => (result ? reject(result) : resolve()))
        })
      }
    }

    if (req.method === "GET") opt.whenGet?.(req, res)
    else if (req.method === "POST") opt.whenPost?.(req, res)
  }
}

import { apiRoute } from "app/utils/apiRoute"

export default apiRoute({
  whenPost: async function latest(req, res) {
    console.log(req.body)
    res.end()
  },
})

await fetch('/api/entries/new', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ 'hell': 'word' }),
})

import { apiRoute } from "app/utils/apiRoute"
import { getSessionContext } from "@blitzjs/server"
import { db } from "db"

export default apiRoute({
  middlewares: [
    async function signinRequired(req, res, next) {
      const session = await getSessionContext(req, res)
      if (!session.userId) res.status(401).json({ error: "signin required" })
      else next()
    },
  ],
  whenPost: async function latest(req, res) {
    const session = await getSessionContext(req, res)

    const entry = await db.entry.create({
      data: { content: req.body.content, user: { connect: { id: session.userId! } } },
    })

    res.status(200).json(entry)
  },
})

import { BlitzPage, getAntiCSRFToken, useMutation } from "blitz"

// ...
    await fetch("/api/entries/new", {
      method: "POST",
      headers: {
        "anti-csrf": getAntiCSRFToken(),
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ content: textareaRef.current?.value! }),
    })

yarn add multer

export const config = {
  api: {
    bodyParser: false,
  },
}

export default apiRoute({
  middlewares: [
    async function signinRequired(req, res, next) {
      const session = await getSessionContext(req, res)
      if (!session.userId) res.status(401).json({ error: "signin required" })
      else next()
    },
  ],
  whenPost: async function latest(req, res) {
    const session = await getSessionContext(req, res)

    const { fields, files } = await new Promise<{
      fields: formidable.Fields
      files: formidable.Files
    }>((resolve, reject) => {
      const form = new formidable.IncomingForm()

      form.parse(req, (err, fields, files) => {
        err ? reject(err) : resolve({ fields, files })
      })
    })

    const entry = await db.entry.create({
      data: {
        content: fields.content as string,
        user: { connect: { id: session.userId! } },
      },
    })

    res.status(200).json(entry)
  },
})

// 追加
model EntryImage {
  id         Int      @id @default(autoincrement())
  entry_id   Int
  uid        String   @unique @default(uuid())
  size       Int
  mime       String
  created_at DateTime @default(now())
  updated_at DateTime @updatedAt

  entry Entry @relation(references: [id], fields: [entry_id])
}

// フィールドが生える
model Entry {
  image EntryImage?
}

// フォームをパースする
    const { fields, files } = await new Promise<{
      fields: formidable.Fields
      files: formidable.Files
    }>((resolve, reject) => {
      const form = new formidable.IncomingForm()
      form.keepExtensions = true

      form.parse(req, (err, fields, files) => {
        err ? reject(err) : resolve({ fields, files })
      })
    })

// なんと`image`にデータを渡すだけでEntryImageも作ってくれる。
// トランザクションで囲ってくれてそうな気がする（クエリ見とらんからわからん
// SEE: https://www.prisma.io/docs/concepts/components/prisma-client/transactions
    const entry = await db.entry.create({
      data: {
        content: fields.content as string,
        user: { connect: { id: session.userId! } },
        image: {
          create: {
            size: file.size,
            mime: file.type,
          },
        },
      },
      // includeを指定してEntryImageも返してもらおう！
      include: { image: true },
    })

// 神に祈りを捧げながらファイルを移動するぞ、失敗したら泣こう！
    const name = path.parse(file.path)
    rename(file.path, path.join(process.env.UPLOAD_DIR!, "entry", `${entry.image?.uid}${name.ext}`))

res.status(200).json(entry)

import { apiRoute } from "app/utils/apiRoute"
import { db } from "db"

export default apiRoute({
  whenGet: async function latest(req, res) {
    const entries = await db.entry.findMany({
      orderBy: { created_at: "desc" },
      // これな
      include: { image: true },
    })

    res.status(200).json(entries)
  },
})

export default async function getLatestEntries(_ = null) {
  const entries = await db.entry.findMany({
    orderBy: { created_at: "desc" },
    // これな
    include: { image: true },
  })
  return entries
}

import { useLatestEntries } from "app/hooks/useLatestEntries"
import Layout from "app/layouts/Layout"
import { BlitzPage } from "blitz"
import { Suspense } from "react"

const Entries = () => {
  const entries = useLatestEntries()
  return (
    <div>
      {entries.map((entry) => (
        <div style={{ borderTop: "1px solid #225", padding: "16px 0", margin: "32px 0" }}>
          {entry.image && (
           // 最悪
            <img style={{ width: "100%" }} src={`/uploads/entry/${entry.image.uid}.png`} />
          )}
          <div>{entry.content}</div>
        </div>
      ))}
    </div>
  )
}

const Latest: BlitzPage = () => {
  return (
    <Suspense fallback="Loading...">
      <Entries />
    </Suspense>
  )
}

Latest.getLayout = (page) => <Layout title="">{page}</Layout>

export default Latest