Author avatar

Desmond Nyamador

Using Fetch with Github API V3

Desmond Nyamador

  • Aug 14, 2020
  • 6 Min read
  • 2,221 Views
  • Aug 14, 2020
  • 6 Min read
  • 2,221 Views
Web Development
Front End Web Development
Client-side Framework
React

Introduction

GitHub is a very essential platform in the process of software development, be it for open-source software, private tools, continuous integration, or any of its many other use cases. In this guide, you'll learn how to use the fetch API with the GitHub Application Programming Interface.

Understanding the API

Before you make a request to any API, you need to figure out which endpoints are exposed by the provider. In this case, GitHub provides endpoints for search, repositories, projects, markdown, users, and many more. Find out more in Github's official docs. In this guide, you will only make use of the /users endpoint. All requests to the API are supposed to be made to the root endpoint (https://api.github.com).

User Endpoint

To get the list of random users, you have to make a request to the /user endpoint, and to get the details of a specific user, you make a request to the /user/{username} endpoint. You can try out the following commands quickly in your terminal with curl to see the results.

Users Endpoint

1
2
3
curl \
-H "Accept: application/vnd.github.v3+json" \
https://api.github.com/user
bash

Specific User

1
2
3
curl \
-H "Accept: application/vnd.github.v3+json" \
https://api.github.com/user/{YOUR_GITHUB_USERNAME}
bash

If you make a request to the endpoint for your username, your response should look like the one shown below.

Note that the structure of the response might not be exactly as show below. As such, you should always refer to the documentation in case anything changes.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
{
login: "Nyamador",
id: 48738520,
node_id: "MDQ6VXNlcjQ4NzM4NTIw",
avatar_url: "https://avatars3.githubusercontent.com/u/48738520?v=4",
gravatar_id: "",
url: "https://api.github.com/users/Nyamador",
html_url: "https://github.com/Nyamador",
followers_url: "https://api.github.com/users/Nyamador/followers",
following_url: "https://api.github.com/users/Nyamador/following{/other_user}",
gists_url: "https://api.github.com/users/Nyamador/gists{/gist_id}",
starred_url: "https://api.github.com/users/Nyamador/starred{/owner}{/repo}",
subscriptions_url: "https://api.github.com/users/Nyamador/subscriptions",
organizations_url: "https://api.github.com/users/Nyamador/orgs",
repos_url: "https://api.github.com/users/Nyamador/repos",
events_url: "https://api.github.com/users/Nyamador/events{/privacy}",
received_events_url: "https://api.github.com/users/Nyamador/received_events",
type: "User",
site_admin: false,
name: "Desmond ",
company: "@Velocity-Corp",
blog: "Nyamador.me",
location: "Ghana",
email: null,
hireable: null,
bio: "FullStack Engineer | Pluralsight Author",
twitter_username: "DesmondNyamador",
public_repos: 52,
public_gists: 8,
followers: 27,
following: 1,
created_at: "2019-03-19T23:34:18Z",
updated_at: "2020-07-29T11:45:10Z"
}
javascript

An Introduction to Fetch

The fetch API provides a Javascript interface for accessing and manipulating requests and responses over a network. This is provided via the global window.fetch() method in the browser.

Using Fetch

Now that you have a fair idea of where your request would be made and the structure of the data you would be getting, you can now make a request to the API with your code comfortably.

A fetch request is shown below:

1
2
3
4
5
6
7
8
fetch(URL,  init:{method: 'GET', headers:{},  body})
    .then(response => response.json())
		.then(data => console.log(data))
		.catch(error => console.log(error));
// URL - Url of the resource
// Headers - Headers for the request( Content-Type, ...)
// Body - Request content
// Init - Contains request body and headers and other configurations such as the request method.
javascript

Because fetch() returns a promise, you can chain as many .then() as you want and a catch method to gracefully handle errors thrown in a failed request.

Applying all the knowledge so far, you can make a request to the GitHub /users endpoint with the code below.

1
2
3
4
fetch('https://api.github.com/users/{YOUR_USERNAME}')
		.then(response => response.json()) //Converting the response to a JSON object
		.then( data => document.body.append())
		.catch( error => console.error(error));
javascript

If you check your developer tools in the browser, you should see something similar to the screenshot below. Devtools

Cleaning Up

The Github API documentation recommends adding an accept header with value application/vnd/github.v3+json to the request. Do that by simply adding the Accept Header to the init object. You can go ahead and aappend the content to the DOM as shown below.

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
 <html>
  <head>
</head>

    <body>
         <div id="root">
       </div>
   </body>

 </html>
html
1
2
3
4
5
6
7
8
9
10
11
12
13
fetch('https://api.github.com/users/{YOUR_USERNAME}', { 
                 headers: {
                      'Accept' : 'application/vnd.github.v3+json'
                  }})
		.then(response => response.json()) //Converting the response to a JSON object
		.then( data => {
                    const root = document.querySelector('#root');
                    root.innerHTML = ` 
                      <a href=`${data.html_url}`>Name: `${data.name}`</a>
                     <p>Followers : `${data/followers}`</p>
                  `
                })
		.catch( error => console.error(error));
javascript

Conclusion

That's a wrap! In this guide, you learned how to use the Javascript fetch API to make requests to the GitHub API. With this knowledge you can start making request to any API 🚀. For more information on how to use the fetch API, read the Mozilla Developer Network documentation. Feel free to ping me on Twitter as well @DesmondNyamador.

5