React Native入門: FirebaseのCloud Firestoreでレコーディングダイエットアプリを作ってみる(後編)
前回( React Native入門: FirebaseのCloud Firestoreでレコーディングダイエットアプリを作ってみる(前編) - maricuru tech blog )に引き続き、React Native x Cloud Firestoreでアプリを作っていきます。
前回はCloude Firestoreにデータを保存するところまでやりましたが、今回はデータの検索、更新、削除についてやってみようと思います。
また今回作成したサンプルアプリのソースコードはこちらに置いてあります。
データの検索
さて今回のアプリのデータ構造は、この様になっています。
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で作ったサンプルアプリはコチラ。
既存のデータを編集しています。
データの削除
delete
で削除できます。
const id = 'RhPLhS2MCnvRf9yHkpA7'; const docRef = await foodsRef.doc(id); await docRef.delete();
実際のアプリではこんな感じで動きます。