Firestoreでデータの配列を取得したい（firebase）

Question

お世話になっております。

FirebaseのReal Time Databaseを使用していたのですが、今回Cloud Firestoreに乗り換えようと試みているのですが、取得の部分でなぜか配列を取得できずに困っています。

エラー

Real Time Databseで使っていたときのように、配列で取得してitemsを並べて表示したい。
しかし、現在のコードではitemが一つずつ取得されてきて、itemsの中にあるすべてのデータを並べることができません。

ソースコード

Home.js

class Home extends Component {
  componentWillMount() {
    this.props.itemsFetch();
  }

  render() {
    console.log('items:', this.props.items);
    return (
      <View>
        {this.props.items.map((item, index) => (
          <CardSection key={index}>
            <Text numberOfLines={1} style={styles.cardtitle}>{item.amount}</Text>
            <Text numberOfLines={1} style={styles.cardtitle}>{item.text}</Text>
          </CardSection>
        ))}
      </View>
    );
  }
}

const mapStateToProps = (state) => {
  const items = _.orderBy(state.items, ['id'], ['desc']);

  return { items };
};

export default connect(mapStateToProps, {
  itemsFetch
})(Home);

redux/itemActions.js

export const itemsFetch = () => {
  return (dispatch) => {
    firebase.firestore().collection('items').get()
    .then((snapshot) => {
      snapshot.forEach((doc) => {
          console.log(doc.id, '=>', doc.data());
          dispatch({ type: ITEMS_FETCH_SUCCESS, payload: doc.data() });
      });
    })
  };
};

ここに入っているitemsを並べて表示したいです。

Answer 1

現在のコードではitemが一つずつ取得されてきて、itemsの中にあるすべてのデータを並べることができません。

itemが1件ずつ取得されるのはfirebase.firestore.QuerySnapshot.forEach()で処理しているためだと思いますので、

snapshot.forEach((doc) => {
    console.log(doc.id, '=>', doc.data());
    dispatch({ type: ITEMS_FETCH_SUCCESS, payload: doc.data() });
});

配列を取得したい場合は、firebase.firestore.QuerySnapshot.docsプロパティを使用します。ただdocsはfirebase.firestore.QueryDocumentSnapshotの配列なので、

const docSnapshot = snapshot.docs;

itemの配列を得るにはさらにmapで変換するなどの処理が必要だと思います。

const items = snapshot.docs.map(doc => doc.data());

なお、firestoreにはクエリでデータを並び替えることができるので、クエリで並び替えた方がよいかもしれません。
以下の公式のドキュメントが詳しいのでご確認ください。

Cloud Firestore でのデータの並べ替えと制限
https://firebase.google.com/docs/firestore/query-data/order-limit-data?hl=ja

Comments

[yamady]

rubytomatoさま

Firestoreの詳しい説明いただき、ありがとうございます。無事動かすことができました。Firestoreではクエリ機能が充実しているんですね、Real Time Databaseではそこが難点だったので、今回の移行いろいろと楽し身です。

ありがとうございます！！