How to retrieve contribution graph data from the GitHub API

The Problem:

When you go into your (or anyone else’s) GitHub profile page(e.g. https://github.com/yuichkun), you can see your contribution graph like below.

The other day I was in need of retrieving these data for the sake of visualizing my recent activities. However, I had a damn hard time finding on the internet the right way to go with this. Some people were scraping the user profile page and parsing SVGs…
…I know! Seriously?

But, as it turned out, the REST version of the GitHub API didn’t provide the contribution graph data. …Or at least, as far as I could find.
I got euphoric when I finally found the perfect solution: Use the GraphQL version of the API.

So in this article, I will go through the steps of doing so and also share the example demo I made prior to writing this.

Demo:

Demo Link: https://github-contribution-graph-example.vercel.app/
Source Code: https://github.com/yuichkun/github-contribution-graph-example

In the demo, you can see your total contributions and the yearly activities shown in the chart. The chart is zoomable and can be scrubbed using the bottom area.

It’s got a search area, so feel free to search for anyone’s contribution data.

How to use the GitHub GraphQL API

OK, so how do you do it?
You need three things:

• GitHub Account (obviously)
• GitHub Access Token for your project
• GraphQL Client

I assume the readers of this already have an account and know how to generate a new token.
In case you forget where to see your tokens: https://github.com/settings/tokens

The minimal scope the token will need is read:user , so be sure to check it upon generating one.

For a handy way to use GraphQL, I recommend the GraphiQL app.

You’ll need to make sure that the client is configured as below:

• The request endpoint is: https://api.github.com/graphql
• The request method is: POST
• The request header contains: Authorization: Bearer {YOUR_TOKEN}

The Query

query($userName:String!) { 
  user(login: $userName){
    contributionsCollection {
      contributionCalendar {
        totalContributions
        weeks {
          contributionDays {
            contributionCount
            date
          }
        }
      }
    }
  }
}

With the variable configured as:

{ "userName": "your github user name"}

And if everything is working fine, the response will be something like the below.

data.user.contributionsCollection.contributionCalendar.totalContributions contains the accumulation of the contributions over one year.

By traversing through data.user.contributionsCollection.contributionCalendar.weeks, you’ll be able to get the daily contribution count with its corresponding date!

In the end

GraphQL is awesome 👍