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に設定されます。