Using Fetch with Github API V3
Aug 14, 2020 • 6 Minute Read
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
curl \
-H "Accept: application/vnd.github.v3+json" \
https://api.github.com/user
Specific User
curl \
-H "Accept: application/vnd.github.v3+json" \
https://api.github.com/user/{YOUR_GITHUB_USERNAME}
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.
{
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"
}
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:
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.
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.
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));
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.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="root">
</div>
</body>
</html>
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));
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.