Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
GitHub GraphQL API Starred Repositories With Pagination

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")

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

thanks!! seems this is not documented very well in github api v4 (graphql) reference

@titanwalking
Copy link

Hey Omar, thanks. Like @AronWater said, documentation was not helpful at all. This helped me. :)

@kvz
Copy link

kvz commented Feb 9, 2021

Hey Omar, nice to stumble upon this by your hand, it helped me just now : )

@zyfyy
Copy link

zyfyy commented Jul 8, 2021

Thanks for the cursor example.

@jahanzaibbaloch99
Copy link

jahanzaibbaloch99 commented Nov 29, 2021

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

@obahareth
Copy link
Author

obahareth commented Nov 29, 2021

@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

@eaigner
Copy link

eaigner commented Jul 12, 2022

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.

@hilleer
Copy link

hilleer commented Aug 11, 2022

@eaigner I like this. Thanks for sharing!

@Alena-Levina
Copy link

Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment