#DevHack: Fetching sponsors via the GitHub GraphQL API

To automate the roll-up of sponsors for Front Matter on the website. I started to look through the GitHub Rest API documentation to check it could receive this kind of information. Unfortunately, the Rest API does not provide you with this information, so I went to where the cool kids go these days, GraphQL. The GitHub GraphQL API delivers you more precise and flexible queries and is your go-to place these days.

GraphQL Explorer is excellent when you have never worked with the API. Via the explorer, I found the correct query to use.

Authentication

To retrieve your sponsors, you first need to have an OAuth Token. For this, you can create a personal access token. You can follow the steps in “Creating a personal access token” documentation.

Fetching the GraphQL data

The GraphQL query for retrieving your sponsors looks as follows:

1
query SponsorQuery {
2
  viewer {
3
    sponsors(first: 100) {
4
      edges {
5
        node {
6
          ... on User {
7
            id
8
            name
9
            url
10
            avatarUrl
11
          }
12
        }
13
      }
14
    }
15
  }
16
}

On the Front Matter website, I retrieve this information via my custom API, which performs a POST request to the https://api.github.com/graphql API.

The code looks as follows:

1
const response = await fetch(`https://api.github.com/graphql`, {
2
  method: 'POST',
3
  headers: {
4
    'Content-Type': 'application/json',
5
    'Accept': 'application/json',
6
    'Authorization': `token ${process.env.GITHUB_AUTH}`
7
  },
8
  body: JSON.stringify({
9
    query: `query SponsorQuery {
10
      viewer {
11
        sponsors(first: 100) {
12
          edges {
13
            node {
14
              ... on User {
15
                id
16
                name
17
                url
18
                avatarUrl
19
              }
20
            }
21
          }
22
        }
23
      }
24
    }`
25
  })
26
});
27

28
if (response && response.ok) {
29
  const data = await response.json();
30
  // Start working with the data
31
}