![image](https://user-images.githubusercontent.com/19757050/143773047-bb2cce6b-21d9-48de-9818-a42ab3ee3808.png)


firestoreのページネーションの実装をしました。

# ページネーションを実装した理由
* `in` 演算子を使うと比較値を10個までしか取れなかったため
* firestoreのドキュメントをネストさせてないので、関連のドキュメントは都度取得するようにしているため

# ページネーションの大まかなやり方
* 前後リンク(前へ、次へ)
* ページ番号リンク(orderフィールドを作成し検索)

ページ番号リンクはドキュメント作成時にorderが何番目にあたるかをチェックする手間がかかるのと、order以外で並び替えをした時に対応できないので前後リンクを採用しました。

# コード

![img](/mosaic-code.jpg)

# 意見が欲しい
他にもっといい実装方法があれば教えてください。

# 参考
[Cloud Firestore でのページネーションの実装](https://mokajima.com/how-to-paginate-data-in-cloud-firestore/)

![image](https://user-images.githubusercontent.com/19757050/143773047-bb2cce6b-21d9-48de-9818-a42ab3ee3808.png)


firestoreのページネーションの実装をしました。

# ページネーションを実装した理由
* `in` 演算子を使うと比較値を10個までしか取れなかったため
* firestoreのドキュメントをネストさせてないので、関連のドキュメントは都度取得するようにしているため

# ページネーションの大まかなやり方
* 前後リンク(前へ、次へ)
* ページ番号リンク(orderフィールドを作成し検索)

ページ番号リンクはドキュメント作成時にorderが何番目にあたるかをチェックする手間がかかるのと、order以外で並び替えをした時に対応できないので前後リンクを採用しました。

# コード

```js
  async next<T extends ApplyQueryFields>({ ...data }: T): Promise<Apply[]> {
    ...

    return queries
      .limit(10)
      .orderBy('createAt', 'desc')
      .startAfter(ymdhmhypen(apply.createAt))
      .get()
      .then((snapshot) => {
        return snapshot.docs.map((doc) => {
          const data = doc.data()
          return convertToApply(data as ApplyJson)
        })
      })
  }
```

# 意見が欲しい
他にもっといい実装方法があれば教えてください。

# 参考
[Cloud Firestore でのページネーションの実装](https://mokajima.com/how-to-paginate-data-in-cloud-firestore/)

ページネーションを実装した理由

続きを読むには単価診断を受けてください（30秒）