半農半エンジニアの記録

関西在住エンジニア。個人で勉強・開発したこと、その他趣味のことを書いてます。農業してます。

ハンズオン参加:Reactを用いたFirebaseで認証するGraphQL APIサーバの構築

昨日はこのハンズオンに参加しました。

Reactを用いたFirebaseで認証するGraphQL APIサーバの構築 - Osaka Web Developers Meetup #1 - Osaka Web Developers Meetup | Doorkeeper

tl;dr

  • ついて行くので精一杯
  • タイピング速くならないと
  • Firebaseで認証すごい簡単
  • hasuraって何?面白い

題材はこちらです。

github.com

概要

フロントはReactでクエリ言語にGraphQL、認証にFirebase。またGraphQLエンジンにHasuraを採用。

(初めて触るものバカリ・・。)

Firebase

まずはログインしてプロジェクト作成、コンソールに移動。

認証プロバイダの設定

Authentication→ログイン方法で、認証プロバイダ(他のアプリケーションのアカウント)を選択できます。今回はGoogleアカウントを使った。

firebase認証のログインプロバイダにGoogleアカウントを設定
ログインプロバイダの有効化

functionのデプロイ

認証だけならこれで大丈夫ですが、認証情報をアプリ側で利用するので、そのためのfunctionをデプロイしておく。

Hasura

docker(docker-compose)でHasuraを立てる。

この時点でHasuraが適当な文字列と思っていたのはここだけの話。

Hasauraとは

postgreSQLをバックエンドにしたGraphQLエンジン、と言えばいいのかな?

Prismaとよく比較されている。

今日の話だと、PrismaはGraphQLが後ろにいて、Hasuraでは前にいる、とのこと。規模によって使い分けるのがいいのかな。

Hasura使ってみた所感としては、色々簡単にできてすごい。簡単なアプリならこれで十分?管理はどうすればいいのか?

GraphQLとは

クエリ言語らしい。調べるとRESTとよく比較されている。

個人的にはRESTより直感的に理解もしやすいと思う。

React

Reactはゴリゴリ書いてく。

リアルタイム更新

GraphQLのsubscriptionを使っていて、DBの変更を監視する感じになっている。

感想

主催者の方も言ってたけど、今日はやること多かった。前回参加したハンズオンは正直余裕やったので、同じ気持ちでいたらギリギリでした。

特にFirebaseはもっと触っていきたい。