先日ページネーションを実装しました。まだまだfirestoreを使ったリクエストのページネーションのリクエスト実装は情報が少なく定まっていない気がしたので、実装方法をシェアをしようと思いました。


*追記*
「戻る」ページネーションの方法も追加しました。

## 最終的なリクエストイメージ

本記事の内容を実装すると、下記のようなページネーションリクエストが可能になります。
booksデータを指定した数、指定した作成タイミング(**CreateAt**)より後のデータを取得します。

#### 1ページ目
`GET /books?limit=30`

1ページ目は開始点を指定せずで大丈夫です。

**レスポンス**
![img](/mosaic-code.jpg)

#### 2ページ目
`GET /books?limit=30&nextStartCreateAt=2022-03-27 21:23`

1ページ目の最後のbooksのcreateAtを**開始点**としてnextStartCreateAtに設定します。

最後のbooksのcreateAtを取得
![img](/mosaic-code.jpg)

**レスポンス**
![img](/mosaic-code.jpg)

#### 3ページ目
`GET /books?limit=30&nextStartCreateAt=2022-03-28 21:23`

2回目と同様に、2ページ目の最後のbooksのcreateAtを**開始点**としてnextStartCreateAtに設定します。
このリクエストを繰り返すことでページネーションリクエストを実現することができます。

最後のbooksのcreateAtを取得
![img](/mosaic-code.jpg)

**レスポンス**
![img](/mosaic-code.jpg)

## 次のページを取得するならStartAtもしくはStartAfterを使う

firestoreでページネーションを実装するには、クエリカーソルを使います。クエリカーソルとはクエリの開始点と終了点を定義することです。[(公式より)](https://firebase.google.com/docs/firestore/query-data/query-cursors?hl=ja)

StartAtとStartAfterの違いは開始点を**含める**か**含めない**かです。
|            |                     |
| ---------- | ------------------- |
| StartAt    | 開始点を含む(>=)    |
| StartAfter | 開始点を含まない(>) |

どちらでも構いませんが今回はフロントでの処理を減らす想定で**StartAfter**を使って実装していきます。

## パラメーターにはLimit、NextStartCreateAtをオプションで指定できるようにする

実装後のリクエストイメージです。
`GET /books?limit=30&nextStartCreateAt=2022-01-11 20:45`

各パラメータについて
|               |                                        | 
| ------------- | -------------------------------------- | 
| Limit         | ページネーションごとの取得数を指定する | 
| NextStartCreateAt | データの開始点を指定する               | 

## handlerやコントローラでリクエストを受け取る
リクエスト情報をhandler、もしくはcontrollerなどで取得します。limitとnextStartCreateAtの情報をそのまま実行関数に渡します。
(エラーハンドリングなどは省略しています)。
![img](/mosaic-code.jpg)

## クエリの実行とデータの変換を行う
usecaseなどの関数ではNextStartCreateAtをStartAfterに指定してNextStartCreateAt以降に作成されたbooksを取得することができます。ポイントは開始点を指定するフィールドをOrderByしておく必要があることです。

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

これで、ページネーションの実装の完成です！公式で用意されているだけあって割と簡単に実装することができます。

## 「戻る」場合のページネートリクエスト

戻る場合には、`EndAt`か`EndBefore`を使いましょう！範囲の考え方はStartAt、StartAfterと同じです！
[公式](https://firebase.google.com/docs/firestore/query-data/query-cursors?hl=ja#add_a_simple_cursor_to_a_query)
|            |                     |
| ---------- | ------------------- |
| EndAt    | 開始点を含む(<=)    |
| EndBefore | 開始点を含まない(<) |

リクエスト時は現在のページの最初のbooksのcreateAtを`prevEndCreateAt`にセットしましょう。

最初のbooksのcreateAtを取得
![img](/mosaic-code.jpg)

実装後のリクエストイメージ。
`GET /books?limit=30&prevEndCreateAt=2022-01-11 20:45`

各パラメータについて
|               |                                        | 
| ------------- | -------------------------------------- | 
| LimitToLast         | ページネーションごとの取得数を指定する(EndBeoreの場合) | 
| PrevEndCreateAt | データの終了点を指定する               | 

## クエリの実行とデータの変換を行う
先ほどのusecase層での処理をPrevEndCreateAt用に書き換えたのがこちらです。
![img](/mosaic-code.jpg)
ポイントは`EndBefore`を使う場合、`LimitToLast`を使い取得データの最後からデータを取得する必要があります。また`LimitToLast`を使う場合は`GetAll`によるドキュメント取得になります(Iteratorは使えないようです)
これで1ページ前のデータを取得することができます！

LimitToLastを使う利用について詳しくは[ページネーションで「戻る」場合はLimitToLastを使う](https://i-ssue.com/topics/3ccb1890-8234-4176-9c2e-d3635cc16d50)をご覧ください。

## まとめ
ページネーションの実装をご紹介しました。今回開始点になるフィールドをcreateAtに指定しましたが、更新時刻でページネートしたい場合は、`updateAt`を指定することで実現できます。今回はバックエンド側での実装でしたが、firestoreを使えばフロントから直接ページネーションリクエストを実装できるのでぜひお試しください！

## 参考
[クエリカーソルを使用したデータのページ設定](https://firebase.google.com/docs/firestore/query-data/query-cursors?hl=ja)

先日ページネーションを実装しました。まだまだfirestoreを使ったリクエストのページネーションのリクエスト実装は情報が少なく定まっていない気がしたので、実装方法をシェアをしようと思いました。


*追記*
「戻る」ページネーションの方法も追加しました。

## 最終的なリクエストイメージ

本記事の内容を実装すると、下記のようなページネーションリクエストが可能になります。
booksデータを指定した数、指定した作成タイミング(**CreateAt**)より後のデータを取得します。

#### 1ページ目
`GET /books?limit=30`

1ページ目は開始点を指定せずで大丈夫です。

**レスポンス**
```json
{
  books: [...],
}
```

#### 2ページ目
`GET /books?limit=30&nextStartCreateAt=2022-03-27 21:23`

1ページ目の最後のbooksのcreateAtを**開始点**としてnextStartCreateAtに設定します。

最後のbooksのcreateAtを取得
```js
const nextStartCreateAt = books[books.length - 1].createAt
```

**レスポンス**
```json
{
  books: [...], // createAtがnextStartCreateAtより後のbooksデータを30個取得
}
```

#### 3ページ目
`GET /books?limit=30&nextStartCreateAt=2022-03-28 21:23`

2回目と同様に、2ページ目の最後のbooksのcreateAtを**開始点**としてnextStartCreateAtに設定します。
このリクエストを繰り返すことでページネーションリクエストを実現することができます。

最後のbooksのcreateAtを取得
```js
const nextStartCreateAt = books[books.length - 1].createAt
```

**レスポンス**
```json
{
  books: [...], 
}
```

## 次のページを取得するならStartAtもしくはStartAfterを使う

firestoreでページネーションを実装するには、クエリカーソルを使います。クエリカーソルとはクエリの開始点と終了点を定義することです。[(公式より)](https://firebase.google.com/docs/firestore/query-data/query-cursors?hl=ja)

StartAtとStartAfterの違いは開始点を**含める**か**含めない**かです。
|            |                     |
| ---------- | ------------------- |
| StartAt    | 開始点を含む(>=)    |
| StartAfter | 開始点を含まない(>) |

どちらでも構いませんが今回はフロントでの処理を減らす想定で**StartAfter**を使って実装していきます。

## パラメーターにはLimit、NextStartCreateAtをオプションで指定できるようにする

実装後のリクエストイメージです。
`GET /books?limit=30&nextStartCreateAt=2022-01-11 20:45`

各パラメータについて
|               |                                        | 
| ------------- | -------------------------------------- | 
| Limit         | ページネーションごとの取得数を指定する | 
| NextStartCreateAt | データの開始点を指定する               | 

## handlerやコントローラでリクエストを受け取る
リクエスト情報をhandler、もしくはcontrollerなどで取得します。limitとnextStartCreateAtの情報をそのまま実行関数に渡します。
(エラーハンドリングなどは省略しています)。
```go
type PagenationResponse struct {
	Books        []*Book `json:"books"`
}

// List
// `GET /v1/books`.
func (h *bookHandler) List(c *gin.Context) {
        limit, _ := strconv.Atoi(c.Query("limit"))  // limitをintに変換しておく
	books, lastCreateAt, err := h.bookInteractor.List(c, limit, c.Query("nextStartCreateAt"))
	if err != nil {
	        // Error handling
		return
	}

	c.JSON(http.StatusOK, PagenationResponse{
	  Books: books,
	})
}
```

## クエリの実行とデータの変換を行う
usecaseなどの関数ではNextStartCreateAtをStartAfterに指定してNextStartCreateAt以降に作成されたbooksを取得することができます。ポイントは開始点を指定するフィールドをOrderByしておく必要があることです。

```go
func (i *issueInteractor) List(ctx context.Context, limit int, startCreateAt string) ([]*model.book, string, error) {
	// 開始点を指定したcreateAtをOrderByする
	// StartAfterでcreateAtがNextStartCreateAtより後のbooksを取得する
	// Limitでページネーションで取得する個数を指定する
	iter := r.firebaseHandler.Collection("books").OrderBy("createAt", firestore.Desc).StartAfter(NextStartCreateAt).Limit(limit).Documents(ctx)
	
	// iterでBookをmodelに変換して取得する
	docs, err := query.Documents(ctx).GetAll()
	if err != nil {
	        // Error handing
	}
	books := []*model.Book{}
	for _, doc := range docs {
		book := &model.Book{ID: doc.Ref.ID}
		if err := doc.DataTo(book); err != nil {
			return nil, errors.Wrap(customerr.ErrFirestoreObjectAssign, err.Error())
		}
		books = append(books, book)
	}
	
	return books, nil
}
```

これで、ページネーションの実装の完成です！公式で用意されているだけあって割と簡単に実装することができます。

## 「戻る」場合のページネートリクエスト

戻る場合には、`EndAt`か`EndBefore`を使いましょう！範囲の考え方はStartAt、StartAfterと同じです！
[公式](https://firebase.google.com/docs/firestore/query-data/query-cursors?hl=ja#add_a_simple_cursor_to_a_query)
|            |                     |
| ---------- | ------------------- |
| EndAt    | 開始点を含む(<=)    |
| EndBefore | 開始点を含まない(<) |

リクエスト時は現在のページの最初のbooksのcreateAtを`prevEndCreateAt`にセットしましょう。

最初のbooksのcreateAtを取得
```js
const prevEndCreateAt = books[0].create
```

実装後のリクエストイメージ。
`GET /books?limit=30&prevEndCreateAt=2022-01-11 20:45`

各パラメータについて
|               |                                        | 
| ------------- | -------------------------------------- | 
| LimitToLast         | ページネーションごとの取得数を指定する(EndBeoreの場合) | 
| PrevEndCreateAt | データの終了点を指定する               | 

## クエリの実行とデータの変換を行う
先ほどのusecase層での処理をPrevEndCreateAt用に書き換えたのがこちらです。
```go
func (i *issueInteractor) List(ctx context.Context, limit int, prevEndCreateAt string) ([]*model.book, string, error) {
	// createAtをOrderByする
	// EndBeforeでcreateAtがPrevEndCreateAtより前のbooksを取得する
	// LimitToLastでページネーションで取得する個数を指定する
	iter := r.firebaseHandler.Collection("books").OrderBy("createAt", firestore.Desc).EndBefore(prevEndCreateAt).LimitToLast(limit).Documents(ctx)
	
	docs, err := query.Documents(ctx).GetAll()
	if err != nil {
             // Error handing
	}
	books := []*model.Book{}
	for _, doc := range docs {
		book := &model.Book{ID: doc.Ref.ID}
		if err := doc.DataTo(book); err != nil {
			return nil, errors.Wrap(customerr.ErrFirestoreObjectAssign, err.Error())
		}
		books = append(books, book)
	}
	
	return books, nil
}
```
ポイントは`EndBefore`を使う場合、`LimitToLast`を使い取得データの最後からデータを取得する必要があります。また`LimitToLast`を使う場合は`GetAll`によるドキュメント取得になります(Iteratorは使えないようです)
これで1ページ前のデータを取得することができます！

LimitToLastを使う利用について詳しくは[ページネーションで「戻る」場合はLimitToLastを使う](https://i-ssue.com/topics/3ccb1890-8234-4176-9c2e-d3635cc16d50)をご覧ください。

## まとめ
ページネーションの実装をご紹介しました。今回開始点になるフィールドをcreateAtに指定しましたが、更新時刻でページネートしたい場合は、`updateAt`を指定することで実現できます。今回はバックエンド側での実装でしたが、firestoreを使えばフロントから直接ページネーションリクエストを実装できるのでぜひお試しください！

## 参考
[クエリカーソルを使用したデータのページ設定](https://firebase.google.com/docs/firestore/query-data/query-cursors?hl=ja)

最終的なリクエストイメージ

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