Next.js + Vercel + TypeScript + Firebaseでアプリを作る。GraphQL 死合終了編
前回の記事からだいぶ間が空いてしまった。
ブログの管理画面を見るまで2月には記事を書いてるもんだと思ってた。
最後に作ってたブランチは以下：
サーバー側：https://github.com/Ryu-u/soundfind_app/tree/feature/create-posts-new-page
フロント側：
https://github.com/Ryu-u/soundfind_web/tree/feature/create-posts-new-page
以下は敗者コメントです。
終了の原因
フロント側からApollo Clientでファイルをあげる場合、サーバー側でApollo Serverを使ってる場合はgraphql-uploadというライブラリを使わないといけなさそうだが、このissueを見る限り、Firebase Cloud Functionsにはまだ対応してなさそうだった。
待てば良さそうではあったけど、いい加減この素振りに飽きてきたので終わることにした。
使った技術所感
Firebase
Firebase全体として、本番レベルで使うには結構鍛錬がいるように思った。
当たり前だけど、エイヤ！で使えるようになるモノではないと思う。
Firebase Auth
いいね！楽ちん！
Firebaseのローカルエミュレーターを参照しないみたいな問題があったり、currentUserのチェックにはonAuthStateChangedを事前に使ってないと取れない、みたいなのがあったりと、割と癖があるなとも思ったけど、全体としてなかなか使いやすかった。
Firebase Cloud Functions(FCF)
まあまあ。
ただ、今回の死合終了になった原因のように、Expressとかではできるけど、FCFではできないんだよなー、みたいなのは割とありそう。
使うライブラリ次第では、FCFに対応しきれてないみたいなのもありそうな気がした。知らんけど。
Firestore
微妙。
どうしてもRDBの考え方でデータ設計しちゃって結構手こずった。
あとは、クエリの制限があったりするのも微妙だと思う。
今回はサービスの成長とか考えてなかったけど、実際のサービスに使うときは割と早い段階でFirestoreを使うことに限界がくるんじゃないかなあって気がした。
次何か作るときはPostgreSQLとかを使いたい。
GraphQL
最初のうちはGraphQLがどんなものかよくわかってなかったけど、REST APIのラッパーみたいな感じだなと思ったら結構すんなり理解できた。
GraphQLの仕組みは好きだけど、今のところは本番で使うと痒いところに手が届かなかったりして結構てこずりそうだなって思った。
フロントにはApollo Client、サーバーにはApollo Serverを使って、両サイドのスキーマの共有にはgraphql-codegenを使った。
graphql-codegenを使うと、Typescriptの型まで生成してくれるから楽。
ただ、生成された型の取り回しに難儀した記憶がある。
空で返る時のresolverでの戻り値の型指定はどうすればいいのか分からなかったから、ひとまず各プロパティをoptionalにしたんだよな。
Next.js
ReactでSPA作ってる時と基本的には変わらなかったから割と使いやすいんじゃないかと思う。
ただ、どういうデータをSSR時に取得しておくか、とかはいまいちよく分からないなあ。
表示するページで使う不変なデータ(マスターデータ等)はgetServerSidePropsで取得しておけば良さそうだけど、どうなんだろう。
そこが一番悩みどころだったな。
React Tool Kit
これ、ネットで見ると賛否両論だけど、個人的には使いやすくてよかった。
初めは「Slice...?」ってなってたけど、慣れたら楽。
非同期のアクションまで作れるのはいいなと思う。
全体を通しての感想
今回作ってたアプリは、元々は知り合いの「音作りのためのSNSがあったらいいな」っていうアイデアが元になってて、そいつが中身を作って俺がその中身を入れる箱( = アプリ)を作るって話だった。
だけど、コロナの影響などでそいつの生活が厳しくなってきたらしく途中からフェードアウトしていった。
なので、代わりに俺の勉強のためにこれまで使ったことがなかった技術やライブラリを使って作ってみるか、と言う感じで作り始めた。
ただ、まあよく分からんエラーが出まくって、それが俺の実装じゃなくてライブラリ自体に問題があったりとかが結構あって途中で結構消耗していった。
あとは、途中で体調を崩したり、仕事の依頼が来たり(結局流れたが)、その他プライベートで色々あったりもしてモチベーションも下がっていってた。
冒頭に載せたリポジトリは正直ブラッシュアップもしてないし、今のままだとエラーで動かないまであるしで全然ダメダメなんだけど、まあ記念ということで載せておくことにする。
でもまあ、これまでの現場経験で使ったことがなかった技術を色々触れ、小並感ではあるもののそれらに対する自分の感想を持てたからよかったってことにする。
次何かを勉強するときは、もっと細かく刻んで触っていこうと思います。
