React Native Tech Blog

supported by maricuru (旧maricuru tech blogです)

React Native入門: FirebaseのCloud Firestoreでレコーディングダイエットアプリを作ってみる(後編)

前回( React Native入門: FirebaseのCloud Firestoreでレコーディングダイエットアプリを作ってみる(前編) - maricuru tech blog )に引き続き、React Native x Cloud Firestoreでアプリを作っていきます。

前回はCloude Firestoreにデータを保存するところまでやりましたが、今回はデータの検索、更新、削除についてやってみようと思います。

また今回作成したサンプルアプリのソースコードはこちらに置いてあります。

github.com

データの検索

さて今回のアプリのデータ構造は、この様になっています。
users(コレクション) > user(ドキュメント) > foods(コレクション) > food(ドキュメント)

foodコレクションの中から、任意のfoodドキュメントを検索してみましょう。

foodsドキュメントの中身はこんな感じです。

{
  name: 'フライドチキン',
  cal: 220,
  date: '2018-08-21'
  ....
}

以下のように、foodsコレクションに対してwhereを実行することで検索できます。
SQLなどを触ったことがあれば、とても直感的ですね♪

const foodsRef = firebase.firestore()
   .collection('users')
   .doc(userId)
   .collection('foods');

const results = await foodsRef.where('date', '==', '2018-08-21').get();

==以外にも>, や >=なども使えます。
例えば200kcal以上のfoodを探す場合はこんな感じです。

const results = await foodsRef.where('cal', '>=', '200').get();

複合のクエリも実行できます。
- 2018年8月21日
- 200kcal以上
- 300kcal未満
のfoodを探す場合↓

const results = await foodsRef
    .where('date', '==', '2018-08-21')
    .where('cal', '>=', '200')
    .where('cal', '<', '300').get();

データの更新

まず更新したいドキュメントをid指定で取得します。
updateに更新したいフィールドを指定することで、そのフィールドだけ上書き更新できます。

const id = 'RhPLhS2MCnvRf9yHkpA7';

const docRef = await foodsRef.doc(id);

await docRef.update({
      name: '食パン',
      cal: 110,
    });

React Nativeで作ったサンプルアプリはコチラ。
既存のデータを編集しています。

f:id:wasan:20180824154145g:plain

データの削除

deleteで削除できます。

const id = 'RhPLhS2MCnvRf9yHkpA7';

const docRef = await foodsRef.doc(id);

await docRef.delete();

実際のアプリではこんな感じで動きます。

f:id:wasan:20180824153239g:plain