loading...
Cover image for Simple way to use the github REST api

Simple way to use the github REST api

soorajsnblaze333 profile image Sooraj ・3 min read

Hey there all you guys. In this article I will show you how to use the github api to fetch your favorite repository information. No dependencies required!!. We will be using only javascript to fetch and display the data in a HTML file.

Note: This is a simple snippet for fetching a public repository data.

Let us first setup a simple JSON fetch inside out script tag like this

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="my-project"></div>
  <script>
    const searchQueryURL = 'https://api.github.com';

    window.addEventListener('DOMContentLoaded', function(e) {
      return fetch(searchQueryURL)
      .then(result => result.json())
      .then(response => console.log(response))
      .catch(err => console.log(err))
    });
  </script>
</body>
</html> 

You can see that I am using the Promise approach. You can also you async await methods, but I prefer going with promises because it's easier for me.

If we run this html file on the browser, our code will make a call to https://api.github.com and you will receive a response object. This object will contain all the possible URLs that you can access from github. This is especially useful if you do not know what are the api routes available. These routes will also have query syntax to help you with understanding how to send the query params.You will receive something like this on your browser console.

{
  "current_user_url": "https://api.github.com/user",
  "current_user_authorizations_html_url": "https://github.com/settings/connections/applications{/client_id}",
  "authorizations_url": "https://api.github.com/authorizations",
  "code_search_url": "https://api.github.com/search/code?q={query}{&page,per_page,sort,order}",
  "commit_search_url": "https://api.github.com/search/commits?q={query}{&page,per_page,sort,order}",
  "emails_url": "https://api.github.com/user/emails",
  "emojis_url": "https://api.github.com/emojis",
  "events_url": "https://api.github.com/events",
  "feeds_url": "https://api.github.com/feeds",
  "followers_url": "https://api.github.com/user/followers",
  "following_url": "https://api.github.com/user/following{/target}",
  "gists_url": "https://api.github.com/gists{/gist_id}",
  "hub_url": "https://api.github.com/hub",
  "issue_search_url": "https://api.github.com/search/issues?q={query}{&page,per_page,sort,order}",
  "issues_url": "https://api.github.com/issues",
  "keys_url": "https://api.github.com/user/keys",
  "label_search_url": "https://api.github.com/search/labels?q={query}&repository_id={repository_id}{&page,per_page}",
  "notifications_url": "https://api.github.com/notifications",
  "organization_url": "https://api.github.com/orgs/{org}",
  "organization_repositories_url": "https://api.github.com/orgs/{org}/repos{?type,page,per_page,sort}",
  "organization_teams_url": "https://api.github.com/orgs/{org}/teams",
  "public_gists_url": "https://api.github.com/gists/public",
  "rate_limit_url": "https://api.github.com/rate_limit",
  "repository_url": "https://api.github.com/repos/{owner}/{repo}",
  "repository_search_url": "https://api.github.com/search/repositories?q={query}{&page,per_page,sort,order}",
  "current_user_repositories_url": "https://api.github.com/user/repos{?type,page,per_page,sort}",
  "starred_url": "https://api.github.com/user/starred{/owner}{/repo}",
  "starred_gists_url": "https://api.github.com/gists/starred",
  "user_url": "https://api.github.com/users/{user}",
  "user_organizations_url": "https://api.github.com/user/orgs",
  "user_repositories_url": "https://api.github.com/users/{user}/repos{?type,page,per_page,sort}",
  "user_search_url": "https://api.github.com/search/users?q={query}{&page,per_page,sort,order}"
}

Now as an example I will use the repos api to query the data from one of my public repositories. For this we will change the url to

const searchQueryURL = 'https://api.github.com/repos/SoorajSNBlaze333/tooltip-sequence';

using the syntax of https://api.github.com/repos/{owner}/{repo}

You will now recieve a JSON object containing all the information about that repository. Something like this

{
  // ... other info
  "name": "tooltip-sequence",
  "full_name": "SoorajSNBlaze333/tooltip-sequence",
  "private": false,
  "html_url": "https://github.com/SoorajSNBlaze333/tooltip-sequence",
  "description": "A simple step by step tooltip helper for any site",
  "fork": false,
  "url": "https://api.github.com/repos/SoorajSNBlaze333/tooltip-sequence",
  "stargazers_count": 146,
  "watchers_count": 146,
  "language": "JavaScript",
  "has_issues": true,
  "has_projects": true,
  "has_downloads": true,
  "has_wiki": true,
  "has_pages": false,
  "forks_count": 5,
  "mirror_url": null,
  "archived": false,
  "disabled": false,
  "open_issues_count": 0,
  "forks": 5,
  "open_issues": 0,
  "watchers": 146,
  "default_branch": "master",
  "temp_clone_token": null,
  "network_count": 5,
  "subscribers_count": 3
  // ... other info
}

I have removed some of the large urls before pasting to avoid taking too much space. From this data you can create your own representations of your projects on your blogs or your personal sites. Something like this

Alt Text

For further informations and documentation, please do refer https://docs.github.com/en/rest/reference/search

Hope you guys like it. :)

Posted on by:

soorajsnblaze333 profile

Sooraj

@soorajsnblaze333

Simple web developer ❤️ with a Crazy imagination 🤪 . Does Javascript, Typescript, React, Node, Angular, Svelte & Firebase.

Discussion

markdown guide
 

Cool stuff. Will definitely try it out.
Quick question Sooraj, do you have any resources for Oauth in Github??

 

Hey Sabarish, Glad you found it useful :)

I do not currently have an article for Oauth, but you can check out the documentation here -> docs.github.com/en/developers/apps...

As your question, I shall definitely add resources for other actions for github. :)

 

Thanks Sooraj. Looking forward to it!