React Hook Formでのチェックボックスの取り扱い

  • Path<T>の型定義を見ればわかるがチェックボックスのパスはhoge.fugaという書式になっている
  • 初期値はdefaultCheckedとかを使わないでregisterに渡す初期値にて指定する
    • 指定の仕方は簡単で、registerにてパスで指定する構造にしたがったオブジェクトであればいい

 

stackblitz.com

 

パス関連の実装を見た感じだと [ . が区切り文字になっており、パースされたあとのキーでネストしたオブジェクトアクセスしているので、ドット以外も型定義に追加した方が良さそうに見える

github.com

Next.jsでのmultipart/form-dataの取り扱い

概要

Next.jsにおいてFEからmultipart/form-dataでデータをBFFに送り、そこからさらにBEにmultipart/form-dataで送る

今回の手法はFileとstringやnumberが混在したフォームデータに対応している

処理の流れ

1. FE to BFF

  1. fileのinputでonChangeのevent.target.filesからFileを取得
  2. File以外のデータもフォームで入力
  3. 必要なデータをFormDataにセットする
  4. FormDataをリクエストボディに指定してBFFのAPIをfetchで叩く。このときbodyにはシリアライズせずにFormDataをそのまま入れる(headerについてはboundryも含めて内部でいい感じに処理してくれるので設定しなくていい)

2. BFF to BE

  1. Next.jsのAPI処理部分ではconfigでbodyParserを無効化する
  2. formidableでreqからパースしてfieldsとfilesを得る
  3. fieldsとfilesをform-dataのFormDataに変換する。このときfilesにあるFileについてはそのままセットするのではなくformData.append(key, fs.createReadStream(files[key].path), files[key].name)とする
  4. bodyにはシリアライズせずにFormDataをそのまま入れてfetchを呼ぶ(headerについてはboundryも含めて内部でいい感じに処理してくれるので設定しなくていい)

 参考資料

developer.mozilla.org

github.com

chadalen.com

github.com

ETagを使った排他制御について

メモ

npm scriptsからPrisma Client使ったら終わらなくなった

npm scriptsからPrisma Clientを使ったところ、ソースコードを一番下まで実行し終わってもプロセスが終了しなくなったので色々試してみたところ

await prisma.$disconnect()

としたら直った

明示的に接続を切る必要があるようだ

material-ui-pickersと@date-io/date-fnsでエラー「Uncaught RangeError: Format string contains an unescaped latin alphabet character `n`」

@date-io/date-fnsのv2系をmaterial-ui-pickersと使うとエラーを吐くのでv1.3.13にダウングレードしなければいけないらしい。

github.com