GitHub GraphQL API Starred Repositories With Pagination

README.md

GitHub GraphQL API Starred Repositories Examples With Pagination

You can play with the GraphQL API live here. It's pretty nice and has autocompletion based on the GraphQL schema.

The first example gets your first 3 starred repos, the cursor values can be used for pagination.

Here's an example response from the first query:

{
  "data": {
    "viewer": {
      "login": "obahareth",
      "name": "Omar Bahareth",
      "starredRepositories": {
        "edges": [
          {
            "cursor": "Y3Vyc29yOnYyOpLOAKYOHs4Apg4e",
            "node": {
              "id": "MDEwOlJlcG9zaXRvcnkxMjcyMzQx",
              "name": "google-spreadsheet-javascript",
              "primaryLanguage": {
                "id": "MDg6TGFuZ3VhZ2UxNDA=",
                "name": "JavaScript",
                "color": "#f1e05a"
              }
            }
          },
          {
            "cursor": "Y3Vyc29yOnYyOpLOAKYOH84Apg4f",
            "node": {
              "id": "MDEwOlJlcG9zaXRvcnk2ODEwMTQw",
              "name": "howdoi",
              "primaryLanguage": {
                "id": "MDg6TGFuZ3VhZ2UxNDU=",
                "name": "Python",
                "color": "#3572A5"
              }
            }
          },
          {
            "cursor": "Y3Vyc29yOnYyOpLOALeGxM4At4bE",
            "node": {
              "id": "MDEwOlJlcG9zaXRvcnkzNDE2MjY=",
              "name": "octopress",
              "primaryLanguage": {
                "id": "MDg6TGFuZ3VhZ2UxNDE=",
                "name": "Ruby",
                "color": "#701516"
              }
            }
          }
        ]
      }
    }
  }
}

If we add in the third cursor's value as the second example's after, we'll get the next 3 starred repositories after it.

e.g. starredRepositories(first: 3, after: "Y3Vyc29yOnYyOpLOALeGxM4At4bE")

starredRepos.graphql

query {
  viewer {
    login
    name
    starredRepositories(first: 3) {
      edges {
        cursor
        node {
          id
          name
          primaryLanguage {
            id
            name
            color
          }
        }
      }
    }
  }
}

starredReposWithPagination.graphql

query {
  viewer {
    login
    name
    starredRepositories(first: 3, after: "put_in_a_cursor_value_here") {
      edges {
        cursor
        node {
          id
          name
          primaryLanguage {
            id
            name
            color
          }
        }
      }
    }
  }
}

What if someone clicked random page number in pagination UI instead of Next how would we handle this with cursor..??

Problem : i am implementing GraphApi with Search Queries what i want is Numbering Pagination with Next & Previous Button
Next & Previous Button Work With a Cursor With After Cursor value for next Button & Before for previous
But when I Click on a random Number from 1 to 10 how to Manage this..? If somehere have implemented this. @obahareth

@jahanzaibbaloch99 As there is no offset parameter, I don't think this is doable without a lot of extra work.

See this thread with a response from GitHub on the topic:
https://github.community/t/graphql-api-offset-pagination/14412

I usually prefer emitting a pageInfo object instead of each cursor like this:

query {
  viewer {
    login
    starredRepositories(first: 3) {
      nodes {
        name
        primaryLanguage {
          name
        }
      }
      pageInfo {
        endCursor
        hasNextPage
      }
    }
  }
}

Also it gives you booleans for next page etc.

@eaigner I like this. Thanks for sharing!

Thank you!