Blitz を使ったアプリケーション実装ログ

Blitz の肌感を知りたくて、これを使って何かアプリケーションを作ってみます。

サンプルとして Twitter クローンを作る。

初期設定だと sqlite が DB として設定されているので postgres に変更しつつ、compose.yml を用意して DB を用意する。

その後、blitz prisma migrate dev を実行してユーザー周りのデータが作成される。
認証機能つきでプロジェクトを立ち上げたため、User, Session, Token の3つのテーブルのスキーマが最初から用意されていた。

nabeliwo

認証周りの機能が充実してる。

blitz new で立ち上げた時点で認証周りのスキーマや API、ビューが用意されているのはもちろん、page コンポーネントに authenticate という属性が生えていて、

const Home: BlitzPage = () => {
  // 省略
}

Home.authenticate = { redirectTo: path.auth.login() }

export default Home

という感じでログイン制御ができる。

nabeliwo

すでにメールアドレスが登録されている場合というのもデフォルトで対応されている。

 const user = await db.user.create({
  data: { email: email.toLowerCase().trim(), hashedPassword, role: 'USER' },   select: { id: true, name: true, email: true, role: true },
})

上記のようなコードを mutation で実装し、サインアップをすると、error.code === 'P2002' という感じのエラーが発行される。

P2002 の場合、メールアドレス登録済みというエラーを表示すれば良いだけ。
P2002 がなにかというと、p がついていることから Prisma のエラーコードだということがわかる。P2002 はユニーク制約に引っかかったときのエラーで、Blitz のデフォルトの認証機構だと email にユニーク制約をつけているので、このエラーが発生する。

nabeliwo

ルーティングに関して。

pages/ 配下にファイルを置くことでルーティングできることは Next.js と同じだが、そのファイルで default export している名前が関数として Routes オブジェクトに入り、その名前で関数を叩くと該当のパスを取得できる。

例えば、

index.tsx

const HomePage: BlitzPage = () => <div>トップページ</div>

export default HomePage

となっていた場合、Routes.HomePage() を実行すると {pathname: '/', query: undefined} という結果を得られる。
これは index.tsx を作ったり、その export している変数名を変えるたびに型定義も変更されるため、常に型を監視して Routs の中を更新しているみたい。