WPGraphQL Offset Pagination

WP GraphQL Offset Pagination

This is an extension for the WPGraphQL plugin for WordPress. It adds basic offset pagination as opposed to the standard Cursor based pagination that ships with WPGraphQL.

NOTICE

This package has not been tested with WPGraphQL version 0.4.0 or above.

As such, if you're using a newwer version of WPGraphQL (and you should be) please give the following plugin a try. It's supposed to do the same thing, but has tests and is well supported!

valu-digital/wp-graphql-offset-pagination

Installation

Download one of the releases from the release page, or just download master if you're feeling excitable.

Install and activate as you would any other WordPress plugin.

Basic Usage

Using this plugin is pretty simple. If you were querying posts normally with Cursor based pagination, you would use something like this:

query GET_POSTS($first: Int, $after: String) {
  posts(first: $first, after: $after) {
    pageInfo {
      hasNextPage
      endCursor
    }
    edges {
      cursor
      node {
        id
        title
        date
      }
    }
  }
}

But with this plugin installed, you can use the following:

query GET_POSTS($page: Int!, $per_page: Int!) {
  posts(where: {offsetPagination: {page: $page, per_page: $per_page}}) {
    pageInfo {
      hasPreviousPage
      hasNextPage
      previousPage
      nextPage
      totalPages
    }
    edges {
      cursor
      node {
        id
        title
        date
      }
    }
  }
}

There are a few changes here. The first being that under the where query, there is a new offsetPagination object. This new offsetPagination object has two properties:

• page - The page number that you're requesting.
• per_page - The number of items you'd like per page.

There are also a few new fields that can be requested under the pageInfo field:

• nextPage - Contains an integer with the next page that you can load. Alternatively it will show null if there's no next page.
• previousPage - Contains an integer with the previous page that you can load. Alternatively it will show null if there's no previous page.
• totalPages - The total number of pages of results available to this query.

As a note, hasPreviousPage and hasNextPage will work as expected with this style of pagination.

Support and Contributions

Although I'm releasing this publicly, I have very little no time to support this for the wider community due to current work commitments. If someone would like to pick it up and take ownership please get in contact. PR's are more than welcome also.