Giter Club home page Giter Club logo

wp-graphql-offset-pagination's Introduction

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.

wp-graphql-offset-pagination's People

Contributors

darylldoyle avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.