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")
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
orcursor:2
orcursor:n
. For example, let's say you have a pagination with 5 items per page, and you have some pagination buttons like the following: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 valuecursor: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: