この記事を書いた理由

Reactを学習し始めて２ヶ月程度。
なんとなくでしかまだわかっていないのですが、とにかく実践あるのみかと思い、家計簿アプリを作成しました。

結果つまずいたところがたくさんあったので、備忘録がてら記事にしたいと思います。
また、私と同じくReactの学習を始めたての方の参考になれば嬉しいです。

本題：表示しているデータが月ごと、ユーザーごとでソートできない

家計簿アプリなので、例えば2021年7月に入力したデータは7月のページで表示させたいし
2021年6月に入力したデータなら、2021年6月に表示させたい。

これは下記のソースコードで、ログインしているユーザーが入力したデータ(uidを取得)と、
入力した日付(date)でソートをかけているのですが

Home.js

const getIncomeData = () => {
    const incomeData = db.collection('incomeItems');
    incomeData
      .where('uid', '==', currentUser.uid)
      .orderBy('date')
      .startAt(startOfMonth(date))
      .endAt(endOfMonth(date))
      .onSnapshot((query) => {
        const incomeItems = [];
        query.forEach((doc) =>
          incomeItems.push({ ...doc.data(), docId: doc.id })
        );
        setIncomeItems(incomeItems);
      });
  };

なぜか入力していたデータが一つも表示されません。
色々調べていると、whereとorderByを同時に実行したい場合は
firebase側で設定をしないといけないようでした、

参考記事：Flutter: FirestoreでwhereとorderByを同時に実行したい

これに気づかず、whereとorderByの組み合わせがダメなのか？と色々試行錯誤して
かなり沼にハマりました・・・泣

要は、「uid」を取得してなおかつ、「date」を取得して並び替えるのであれば、
firebase側でデータを取得してソートするのであれば、複合インデックスを作らないといけないようです。
コンソールのエラーにも出ていました。。
コンソールのエラーにはURLが出ていて、それをクリックすると自動で必要なインデックスを作成してくれるようなのですが、なぜか私のアプリではURLなんて出てくれなかったので、自分でインデックス作りました◎

インデックスを設定したら、無事データが出てくれるようになりました〜！