React Firebase入門 Firestoreのコレクション（テーブル）のJOIN

WEBアプリで使うデータは１つのコレクション（テーブル）に収まるわけではなく様々のテーブルにはいります。そのデータをアプリ側で使うにはテーブルのJOINが必要です。 FireStoreにmongoDBのlookupみたいな事ができる関数が用意されているのかなと思っていたら用意されていませんでした😢。 自前で結合しないといけないという悲しい事態になりました。

この記事はReact Firebase入門シリーズです

1-1・ Firebase初期設定とFirebaseAuthのSignUp
1-2・ 「react-hook-form」を入れてみた
1-3・ AuthのSignUpの通信エラー対応
2 ・ FirebaseAuthのログイン処理
3 ・ FirebaseAuthのログイン認証とログアウト処理
4 ・ FirebaseAuthのパスワード初期化処理
5 ・ FirebaseAuthのメールアドレスの有効化
6 ・ FirebaseAuthのメールアドレスとパスワード変更
7 ・ FirebaseAuthの表示名変更
8-1・ FirebaseAuthのアバター変更:基礎
8-2・ FirebaseAuthのアバター変更:画像切り抜き
9-1・FirestoreのCRUD
9-2・Firestoreのデータ取得補足
9-3・Firestoreのページネーション処理
9-3・Firestoreのコレクション（テーブル）のJOIN 今ここ

React Firebase入門 Firestoreのページネーション処理

Firestoreの簡単な一覧、作成、更新、削除の処理はできたのですが一覧のページネーションがない状況なので ページネーションを追加しました。

この記事はReact Firebase入門シリーズです

1-1・ Firebase初期設定とFirebaseAuthのSignUp
1-2・ 「react-hook-form」を入れてみた
1-3・ AuthのSignUpの通信エラー対応
2 ・ FirebaseAuthのログイン処理
3 ・ FirebaseAuthのログイン認証とログアウト処理
4 ・ FirebaseAuthのパスワード初期化処理
5 ・ FirebaseAuthのメールアドレスの有効化
6 ・ FirebaseAuthのメールアドレスとパスワード変更
7 ・ FirebaseAuthの表示名変更
8-1・ FirebaseAuthのアバター変更:基礎
8-2・ FirebaseAuthのアバター変更:画像切り抜き
9-1・FirestoreのCRUD
9-2・Firestoreのデータ取得補足
9-3・Firestoreのページネーション処理 今ここ

React Firebase入門 Firestoreのデータ取得の補足

masalib.hatenablog.com の補足記事になります

データ取得を色々試してみた結果になります。

React Firebase入門 Firestoreの基礎（CRUD処理）

FirebaseにはFirestoreとFirebase Realtime Databaseの２つのDBがあります。 ChatとかのデータはFirebase Realtime Databaseでトランザクションを貼りたい人はFirestoreのイメージです。 どちらも最終的にはやりたいのですが、ユーザーの項目に追加するのに使いたかったので Firestoreを勉強することにしました

React Firebase入門シリーズ
1-1・ Firebase初期設定とFirebaseAuthのSignUp
1-2・ 「react-hook-form」を入れてみた
1-3・ AuthのSignUpの通信エラー対応
2 ・ FirebaseAuthのログイン処理
3 ・ FirebaseAuthのログイン認証とログアウト処理
4 ・ FirebaseAuthのパスワード初期化処理
5 ・ FirebaseAuthのメールアドレスの有効化
6 ・ FirebaseAuthのメールアドレスとパスワード変更
7 ・ FirebaseAuthの表示名変更
8-1・ FirebaseAuthのアバター変更:基礎
8-2・ FirebaseAuthのアバター変更:画像切り抜き
9-1・FirestoreのCRUD 今ここ
9-2・Firestoreのデータ取得補足

React Firebase入門 アバター変更:画像切り抜き

アバターの画像は基本的には正方形です。画像をアップする時に画像を切り抜きする機能を追加しました

React Firebase入門シリーズ
1-1・ React Firebase入門 初期設定とsignup - masalibの日記
1-2・ 「react-hook-form」を入れてみた - masalibの日記
1-3・ React Firebase入門 signupの通信エラー対応 - masalibの日記
2・ React Firebase入門 ログイン処理 - masalibの日記
3・ React Firebase入門 ログイン認証とログアウト処理 - masalibの日記
4・ React Firebase入門 パスワード初期化処理 - masalibの日記
5・ React Firebase入門 メールアドレスの有効化 - masalibの日記
6・ React Firebase入門 メールアドレスとパスワード変更 - masalibの日記
7・ React Firebase入門 表示名変更 - masalibの日記
8-1・ React Firebase入門 アバター変更:基礎 - masalibの日記
8-2・React Firebase入門　アバター変更:画像切り抜き 今ここ

React Firebase入門 アバター変更:基礎

アバターを登録できるようにします。このアバターがないとChatアプリを作った時に悲しい😢ことになりますｗｗｗ。システム的には必須ではない機能です。

React Firebase入門シリーズ
1-1・ React Firebase入門 初期設定とsignup - masalibの日記
1-2・ 「react-hook-form」を入れてみた - masalibの日記
1-3・ React Firebase入門 signupの通信エラー対応 - masalibの日記
2・ React Firebase入門 ログイン処理 - masalibの日記
3・ React Firebase入門 ログイン認証とログアウト処理 - masalibの日記
4・ React Firebase入門 パスワード初期化処理 - masalibの日記
5・ React Firebase入門 メールアドレスの有効化 - masalibの日記
6・ React Firebase入門 メールアドレスとパスワード変更 - masalibの日記
7・ React Firebase入門 表示名変更 - masalibの日記
8-1・React Firebase入門　アバター変更:基礎 今ここ

React Firebase入門 表示名変更

Firebaseのuserのデフォルトカラムには表示名と画像URLがあります。 表示名を変更できるようにしたいと思います

React Firebase入門シリーズ
1-1・ React Firebase入門 初期設定とsignup - masalibの日記
1-2・ 「react-hook-form」を入れてみた - masalibの日記
1-3・ React Firebase入門 signupの通信エラー対応 - masalibの日記
2・ React Firebase入門 ログイン処理 - masalibの日記
3・ React Firebase入門 ログイン認証とログアウト処理 - masalibの日記
4・ React Firebase入門 パスワード初期化処理 - masalibの日記
5・ React Firebase入門 メールアドレスの有効化 - masalibの日記
6・ React Firebase入門 メールアドレスとパスワード変更 - masalibの日記
7・React Firebase入門　表示名変更 今ここ