👌 Blitz.jsで古臭いBBSを作るやつのメモ #01
Hanakla#02: https://zenn.dev/hanak1a/scraps/98e7cf2e25f708
一通りのCRUDが出来たので一旦〆
感想としてはこんな感じ
追記: 2021/01/02
- APIのルートは自分で定義できるっぽいので、型付きでシュッと始められるAPIサーバーとしてはBlitzは結構有力そう
- ただし、公式ドキュメントを斜め読みした感じ、ActiveRecordにおけるModelみたいな、「ドメインロジックを担保する層」がまだないので、Mutationsあたりの設計をどうするかというのがアプリ開発者の課題になりそう
Hanaklaインストールは500万のWebサイトに書いてある(大嘘)からまず公式ドキュメント通りやれよな
Hanakla手癖でMySQLにつなごうとして schema.prisma と .env.local を触ってみたけどなんか繋がらんから放置！！！ 本番だったらMySQLにしたいけどここは本番ではないのでSQLiteでやる。
Hanaklainitial-migrationにはUserとSessionのモデルが定義されている（今現在）
とりあえずEntryモデルを雑に生やす。 構文は定義済みモデルの見様見真似
model Entry {
id Int @id @default(autoincrement())
user_id BigInt
content String
created_at DateTime @default(now())
updated_at DateTime @updatedAt
user User @relation(fields: [user_id])
}
ここまで書いて気づいたらUserモデルにrelationが勝手に生えてた…
お前、もしかして"文明"なのか…？？ VSCodeにPrisma Extension入れたら保存時にフィールド名とか見てなんかよしなにやるっぽいな…
created_atが@default(now())なのが気になる。 これはBlitzかPrisma側が実行時に設定してくれるのか、それともDBのスキーマに設定されるのか…（後者だとAP/DBでタイムゾーンが異なったときに死ぬという問題に当たりそう）
Hanaklaちょっと待って、schema.prisma２つあるけどどっちに設定したらええねん…
→ 落ち着いて公式ドキュメントを読みましょう。 これを書いてる時点ではdb/schema.prisma が正解っぽいですね
Hanaklablitz db migrateしたらmigrations以下のやつが勝手に生成された……
文明だ……
Hanakla初めてBlitz.jsでアプリを作りました！ よろしくお願いします！
はい通過儀礼。
HanaklaBlitzくん、なんとユーザー登録とログインは最初から実装済み。
2021年ですね。
Hanaklaじゃあなんか雑にページを作っていきましょう。
サモン！ app/pages/latest.tsx！！！！！
（間違えて app/auth/pagesにファイルをブチ込む音）
HanaklaPageは見たところ普通のNext.jsっぽいですね。
違いはComponent.getLayout とかいう見たことないメソッドが生えてるくらいかな。
getLayoutは_app.tsx内で呼び出されてるので、アプリ開発者が任意で拡張したものと捉えて良さそう
と思ったけど、Blitzの型定義ファイルの中にgetLayoutの定義があるのを見るに、Blitz公式としてこのメソッドを提供したいようだ
HanaklaPageコンポーネントはBlitzPage型を使えばよいっぽい
import Layout from "app/layouts/Layout"
import { BlitzPage } from "blitz"
const Latest: BlitzPage = () => {
return null
}
Latest.getLayout = (page) => <Layout title="">{page}</Layout>
export default Latest
じゃあデータを取りに行きます
Hanaklaapp/hooks、名前が強い（Hooksがもうフレームワークのコアにいるんだなぁという気持ちにより）
ドキュメントを見るのが面倒なので、初期コードの中にそれっぽいコードがないかな〜と探索。 pages/index.tsxからuseCurrentUser()を呼んでいるっぽい。
その下にはuseMutation(logout)がある。
useCurrentUserの定義ファイル(app/hooks/useCurrentUser.ts)をみるとこの通り
export const useCurrentUser = () => {
const [user] = useQuery(getCurrentUser, null)
return user
}
useQueryってやつがReact向けのバインディングで、getCurrentUserがDBからデータを取っていそう。 こいつの中身はapp/users/queries/getCurrentUse.tsrに居る。
import { Ctx } from "blitz"
import db from "db"
export default async function getCurrentUser(_ = null, { session }: Ctx) {
if (!session.userId) return null
const user = await db.user.findFirst({
where: { id: session.userId },
select: { id: true, name: true, email: true, role: true },
})
return user
}
つまりそういうことだ（どういうこと？？？？）
Hanaklaは〜いじゃあgetLatestEntries作りま〜〜〜す。
Blitzくんのおすすめディレクトリ構造気に入らないから僕はdomains/entriesに作ってみます〜〜〜〜 壊れたら従いま〜〜〜す
import db from "db"
export default async function getLatestEntries(_ = null) {
const entries = await db.entry.findMany()
return entries
}
db.と打った時点でヌルッと.entryの補完が出てきて「どうやってんだこれ…」と思って'db'の参照元を見たらapp/db/index.tsに繋がってた… 何を言ってるかわからねえと思うが以下略
そしてgetCurrentUserの時は第二引数に{session}を取っていたけど、これはuseQuery(query, context)のcontextに渡したものが来るっぽい？
わかるよ、そのAPI気持ちいいよね（Fleurで第二引数以降のパスをやった人の顔）
HanaklaHooksもぬるりと作ります
import getLatestEntries from "app/domains/entries/query"
import { useQuery } from "blitz"
export const useLatestEntries = () => {
const [entries] = useQuery(getLatestEntries, null)
return entries
}
oO (Mizchiさんの記事でサーバーサイドコードが出ないようになってるみたいな話を聞いた気がするけど別のフレームワークの話だったかな… あとから調べてみよう…
Hanaklaドウシテ……
Hanaklaおい！！！！！！！！！お前お前お前お前お前〜〜〜〜〜〜〜〜〜〜〜！！！！！！！！！！！！！！（pages/index.tsxを開いた顔)
Hanaklaわかるよ（お気持ちの生き物）
Hanaklaあーそれでindex.tsxの中でHomeとUserInfoが別れてたのもあるのか
（Suspenseは親に居ないといけないので……）
どのリージョンをSuspenceにしたいかは完全にアプリの要件依存なので、フレームワーク開発者としては勝手にフォールバックはできんわな……
Hanakla自分、涙、いいすか（男泣き）
解説: 同じ import { useQuery } from "blitz" しているコードなのにgetCurrentUser()は生きててgetLatestEntries()は死んでいるぞ！！！
Hanaklaディレクトリ構造をapp/entries/queries/getLatestEntries.tsにしたら動きました。良い子は規約に従いましょう :sob:
(/appの直下にディレクトリ増えまくるのかなり嫌な気持ちになるのはRailsに飼いならされてるからなのか…？)
Hanaklaはい、じゃあ次は投稿を作っていきましょうね
Hanaklaさっき作った(絶望)app/entriesにmutations/createEntry.tsを作る
import db, { Prisma } from "db"
export const createEntry = async ({ data }: { data: Prisma.EntryCreateArgs }) => {
return await db.entry.create(data)
}
BlitzのドキュメントにはProjectCreateArgsを直接importするよう記載があるけど、生成されたコードではdeprecatedになっていたのでPrismaをimportするようにしている。
ここで Write Query Resolversを読んで「アッ、app/*/queriesに入ってれば何でもよい、なるほどね」となっています
Hanakla書き込むページ作った（動作検証してない）
useMutation(mutationFunction)するとmutationするやつが得られるらしい
Entryに紐づくUserの型が通らなくて一瞬唸ったが、補完リストを見るとどうやらObjectのキーでリレーションに対して「つなげる・つくる・なかったらつくる」を切り分けられるらしい。
頭いいな（ほんとか？ Componentにこんな大事な処理が散らかってたら「Railsもびっくり！型スラム！！！」になってしまうので多分ここらへんもうまいことmutation関数の中に閉じ込めないといつか死ぬぞ。 アプリ設計者の僕たちの頑張りどころだね！守ろう治安！！！）
import { createEntry } from "app/entries/mutations/createEntry"
import { useCurrentUser } from "app/hooks/useCurrentUser"
import { BlitzPage, useMutation } from "blitz"
import { useCallback, useRef } from "react"
const New: BlitzPage = () => {
const [createEntryMutation] = useMutation(createEntry)
const currentUser = useCurrentUser()
const textareaRef = useRef<HTMLTextAreaElement>(null)
const onSubmit = useCallback(async () => {
if (!currentUser) return
await createEntryMutation({
data: {
data: {
content: textareaRef.current?.value!,
user: { connect: currentUser },
},
},
})
}, [])
return (
<div>
<textarea ref={textareaRef} placeholder="最後に言いたいことは？" />
<button onClick={onSubmit} />
</div>
)
}
export default New
ドウシテ…
Hanakla
- Mutations must export a function as the default export
https://blitzjs.com/docs/mutation-resolvers
はい……
HanaklaSuspence入れてなくて死んだので直した、だるびっしゅ…
import createEntry from "app/entries/mutations/createEntry"
import { useCurrentUser } from "app/hooks/useCurrentUser"
import { BlitzPage, useMutation } from "blitz"
import { Suspense, useCallback, useRef } from "react"
const Content = () => {
const [createEntryMutation] = useMutation(createEntry)
const currentUser = useCurrentUser()
const textareaRef = useRef<HTMLTextAreaElement>(null)
const onSubmit = useCallback(async () => {
if (!currentUser) return
await createEntryMutation({
data: {
data: {
content: textareaRef.current?.value!,
user: { connect: currentUser },
},
},
})
}, [currentUser])
return (
<div>
<textarea ref={textareaRef} placeholder="最後に言いたいことは？" />
<button onClick={onSubmit}>以上です</button>
</div>
)
}
const New: BlitzPage = () => {
return (
<Suspense fallback="matte">
<Content />
</Suspense>
)
}
export default New
mutationの外部キーにはuniqueなフィールドだけを渡しましょう（懺悔）
user: { connect: { id: currentUser.id } },
Blitz完全に理解したわ、余裕余裕！！！!
Hanakla#02 はこちら