GraphQLページネーション
このガイドでは、GraphQL APIにページネーションを実装する方法を学びます。
大量のレコードセットを扱う場合、最初のN個の項目のみを取得したいことがあります。例えば、Todoアプリの基本的なGraphQLスキーマから始めましょう:
type Todo @model { id: ID! title: String! description: String}@modelディレクティブでAPIが作成されると、以下のクエリが自動的に生成されます:
type Query { getTodo(id: ID!): Todo listTodos( filter: ModelTodoFilterInput limit: Int nextToken: String ): ModelTodoConnection}次に、ModelTodoConnection型を見て、listTodosクエリを実行したときに返されるデータのアイデアを得ます:
type ModelTodoConnection { items: [Todo] nextToken: String}listTodosクエリを使用してAPIをクエリする場合、戻り値の型はModelTodoConnectionになります。つまり、Todosの配列とnextTokenの両方を返すことができます。
nextTokenはページネーションを処理するために使用されます。nextTokenがnullの場合、APIから返すデータがこれ以上ないことを意味します。nextTokenが存在する場合、その値を次のlistTodosクエリの引数として使用して、APIから次の選択セットを返すことができます。
これを試すために、以下のようなミューテーションを使用して5つのtodosを作成してみてください:
mutation createTodo { createTodo(input: { title: "Todo 1" description: "My first todo" }) { id title description }}次に、クエリにlimit引数を渡すことで、クエリ内のtodosの数の制限を設定できます。このクエリでは、制限を2項目に設定し、戻り値としてnextTokenをリクエストします:
query listTodos { listTodos(limit: 2) { items { id title description } nextToken }}次に、APIから次の2つの項目をクエリするために、このnextTokenを引数として渡すことができます:
query listTodos { listTodos(limit: 2, nextToken: <your_token>) { items { id title description } nextToken }}返すその他の項目がない場合、レスポンス内のnextTokenはnullに設定されます。
Querying from a JavaScript application
The listTodos query should have been created for you automatically by the CLI, but for reference purposes it should look something like this:
const listTodos = ` query listTodos($limit: Int) { listTodos(limit: $limit) { items { id title description } nextToken } }`To pass in a limit in a query from a JavaScript application, you can use the following code by setting the limit as a variable:
import { API } from 'aws-amplify';
async function fetchTodos() { const todoData = await API.graphql({ query: listTodos, variables: { limit: 2 } }) console.log({ todoData })}The data returned from the API request should look like this (with the items array containing however many items have been created):
{ "data" { "listTodos" { "items": [{ id: "001", title: "Todo 1", description: "My first todo" }], "nextToken": "<token-id>" } }}To set the nextToken in a query from a JavaScript application, you can use the following code:
import { API } from 'aws-amplify';
async function fetchTodos() { const todoData = await API.graphql({ query: listTodos, variables: { limit: 2, nextToken: "<token-id>" } }) console.log({ todoData })}