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
          }
        }
      }
    }
  }
}

@eaigner I like this. Thanks for sharing!

Thank you!

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

Actually you have to pass a cursor indicating your offset number (the page you are clicking). The Github GraphQL API encodes their cursors in Base64 format. However, if you decode their cursors you'll find a text like cursor:1 or cursor:2 or cursor:n. For example, let's say you have a pagination with 5 items per page, and you have some pagination buttons like the following:

[ previous ] [ 1 ] [ 2 ] [ 3 ] [ next ]

Then, you want to click the page 2. Since you have 5 items per page, you must pass your query's parameter after with the value cursor:6 (which is the first cursor on the next page).

Then, you must encode this string cursor:6 (NOT 6).
You can use the native JavaScript encoder method btoa (binary to ASCII).

See the example below:

      // "id" is the page number, 2 for example
      const offsetStartCursor = `cursor:${ITEMS_PER_PAGE * (id - 1)}`
      const encodedStartCursor = btoa(String(offsetStartCursor))
      console.log({ encodedStartCursor })
      refetchObject = { first: ITEMS_PER_PAGE, last: null, after: encodedStartCursor, before: null }

      refetch({
        ...refetchObject
      }).then(res => { // do something here })