DEV Community

Brice Pellé
Brice Pellé

Posted on

Implementing pagination with AWS AppSync

Why Pagination

In this post, I'm going to show how you can get started with pagination in GraphQL using an AWS AppSync API and the AWS Amplify framework. The primary reason to use pagination is to control and limit the amount of data that is fetched from your backend and returned to your client at once. Pagination can help build efficient and cost-effective solutions by controlling the amount of work done to retrieve data in the backend. It can also improve overall responsiveness by returning smaller sets of data faster to the application.

Types of pagination

2 common forms of pagination are offset-based and token-based pagination. With offset-based pagination, you specify the page size and a starting point: the row after which, or the page at which you want to start fetching data. When using a page, the page along with the page size identifies the row after which to start fetching data (e.g.: offset = (page - 1) * page_size - 1 in a zero-based index). You can find offset-based pagination when dealing with relational databases. For example, in mysql you can fetch data from an offset using the LIMIT clause. In this example, 5 is the offset (fetch after that row) and 10 is the page size (return 10 items).



SELECT * FROM tbl LIMIT 5,10;  # Retrieve rows 6-15


Enter fullscreen mode Exit fullscreen mode

With token-based pagination, a token is used to specify the record after which additional items should be fetched, along with the page size. The implementation of the token is system-specific. DynamoDB is an example of at system that uses token-pagination to paginate the results from Query operations. With DynamoDB, the result of a query may return a LastEvaluatedKey element. This is a token indicating that additional items can be fetched for this specific query. You can then continue the query and get the rest of the items by repeating the query and setting ExclusiveStartKey to the last value of LastEvaluatedKey.

How pagination works with AWS AppSync

AWS AppSync is a fully managed GraphQl service that makes it easy to build data-driven solutions in the cloud. Using the AWS Amplify GraphQL transform, you can quickly build AppSync APIs with types backed by data sources in your accounts. For example, you can use the @model directive in your schema to generate an API with types backed by DynamoDB tables.

Let’s take a look a how to work with pagination using Amplify and AppSync. I built a simple React app to showcase pagination with AppSync: Pagination with AWS AppSync. You can find the entire code here: https://github.com/onlybakam/todo-app-pagination. I am using the Amplify API library to easily interact with the AppSync API.

preview

I created a new amplify project and created an AppSync API using the CLI. To find out how to get started with this, check out the Getting Started guide. I then created the following schema:



type Todo
  @model
  @key(
    fields: ["owner", "dueOn"]
    name: "ByDate"
    queryField: "listTodosByDate"
  ) {
  id: ID!
  name: String!
  description: String
  owner: String!
  dueOn: AWSDateTime!
}


Enter fullscreen mode Exit fullscreen mode

The @key directive allows you to create a query to fetch todos per owner sorted by their due date. Check out Amplify Framework Docs - Data access patterns to find out more about how the @key can enable various data access patterns.

To fetch a list of todos for an owner, you execute the ListTodosByDate query. You can specify the amount of items you want returned using the limit argument. By default, the limit is set to 100. You can also specify the order the items are sorted by using sortDirection (set to ASC or DESC).



  query ListTodosByDate(
    $owner: String
    $dueOn: ModelStringKeyConditionInput
    $sortDirection: ModelSortDirection
    $filter: ModelTodoFilterInput
    $limit: Int
    $nextToken: String
  ) {
    listTodosByDate(
      owner: $owner
      dueOn: $dueOn
      sortDirection: $sortDirection
      filter: $filter
      limit: $limit
      nextToken: $nextToken
    ) {
      items {
        id
        name
        description
        owner
        dueOn
      }
      nextToken
    }
  }


Enter fullscreen mode Exit fullscreen mode

The query returns a list of items and a nextToken field. If nextToken is set, this indicates there are more items to fetch. In a subsequent query, you can pass this value in the query arguments to continue fetching items starting after the final item that was last returned.

In the application, we want to be able to paginate forward and backwards through todos. To do this, we maintain 3 state variables



  const [nextToken, setNextToken] = useState(undefined)
  const [nextNextToken, setNextNextToken] = useState()
  const [previousTokens, setPreviousTokens] = useState([])


Enter fullscreen mode Exit fullscreen mode
  • nextToken is the the token used to fetch the current items
  • nextNextToken is the token returned by the last fetch. If this token is set, you can paginate forward.
  • previousTokens is an array of previous tokens. These tokens allow us to paginate the todo list backwards. If there is a token in the array, you can paginate backwards.

A new set of todos is fetched whenever the owner, nextToken or sortDirection changes.



import { listTodosByDate } from './graphql/queries'
import { API, graphqlOperation } from '@aws-amplify/api'

useEffect(() => {
  const fetch = async () => {
    const variables = {
      nextToken,
      owner,
      limit,
      sortDirection,
    }
    const result = await API.graphql(graphqlOperation(listTodosByDate, variables))
    setNextNextToken(result.data.listTodosByDate.nextToken)
    setTodos(result.data.listTodosByDate.items)
  }

  fetch()
}, [nextToken, owner, sortDirection])


Enter fullscreen mode Exit fullscreen mode

Loading the initial list of items

loading initial list

When the owner changes, all the fields are reset. nextToken is set to undefined which makes the query fetch items from the beginning. When the query returns, the value of nextToken in the result is assigned to nextNextToken. It’s important here to not immediately assign the value to the nextToken state as this would trigger another fetch right away.

Pagination forward

pagination forward

If nextNextToken is set, you can paginate forward. When the user presses the “Next” button, the current value of nextToken is pushed on the previousTokens array. Next, nextToken is set to the current value of nextNextToken. Finally nextNextToken is then set to undefined. When the query returns, again the value of nextToken in the result is assigned to nextNextToken. This process can be repeated as long as the query indicates that there are more items to paginate.

Pagination backwards

pagination backwards

The previousTokens array stores the previously used tokens in order (think of is as a history stack). To paginate backwards, the last value is popped off the array and assigned to nextToken which triggers a new query. This allows you to repeat the query from a known "starting point". The query results may return a different nextToken. This is because items may have been inserted or deleted since the nextToken A was returned. By assigning the value of nextToken in the result is to nextNextToken, you keep paginating forward from the right position.

list of tokens

Conclusion

This post provided an overview of pagination and a simple solution for handling pagination in a React app with an AppSync API. Getting started with AWS AppSync and AWS Amplify is really easy. Check out the docs here.

You can find the code for this application here: https://github.com/onlybakam/todo-app-pagination. You can check out an implementation of it here: Pagination with AWS AppSync.

Top comments (9)

Collapse
 
mbappai profile image
Mujahid Bappai

Great work Bryce for such an amazing explanation! I am however curious to know how to query say page 5 of your dynamodb without having it’s token stored in the previousTokens state array. Basically an offset query like you explained, all while using a token based pagination system like this. Thanks in advance for the feedback.

Collapse
 
onlybakam profile image
Brice Pellé

this is not possible with dynamodb. if this type of indexing is needed, you may have to use another data source. you'll typically find this type offset indexing with sql databases. of course there are pros/cons to the diff implementations.

Collapse
 
mbappai profile image
Mujahid Bappai

Thanks for the reply Brice. I recently started looking into amazon redshift, which basically allows you to copy your nosql database into it which then wraps it around an sql querying interface for you to use sql queries on.
PS: The redshift info above might not be entirely accurate as I'm still yet to look deeper into it.

Collapse
 
zirkelc profile image
Chris Cook

I'm currently evaluating the pagination of list queries generated by Amplify. The first initial query with a limit variable does return an empty items array and a nextToken. Then I have to send a second query with this nextToken to get the actual first batch of items. Is this normal? Why doesn't the first query return items plus pagination token?

Collapse
 
peteprovar profile image
Pete Haughie

I've been trying to implement something like this over the last day or so and am having an issue debugging it.
When I checked the demonstration I realised that the same bug is present in there too. The nextToken never updates after the first call.

Collapse
 
sashrika profile image
Sashrika Waidyarathna

Such a brilliant work Brice. What is your opinion on showing the total number of pages? Can we know it before hand?

Collapse
 
mbappai profile image
Mujahid Bappai • Edited

Not being able to have the total count of your table being returned as part of your response object is one of dynamodb‘s biggest shortcomings till this day. There is a long trending issue that opened on GitHub trying to resolve this problem to which you can find the link here. You can find some work arounds implemented by other developers on the thread as well as mine which will be posted in a not too far distant future.

Collapse
 
onlybakam profile image
Brice Pellé

typically how you do this depends on the data source. With DynamoDB, this is not something that can be retried from the table directly. the best thing to do is to keep track of your count in a separate table. on way to do this is to use dynamodb streams.

Collapse
 
drclohite profile image
David White

Very good, I was able to adapt this to make it work for my application. saved me hours if not days! Thank you