DEV Community 👩‍💻👨‍💻

DEV Community 👩‍💻👨‍💻 is a community of 963,503 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Simple way to use the github REST api
Sooraj (PS)
Sooraj (PS)

Posted on

Simple way to use the github REST api

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> 
Enter fullscreen mode Exit fullscreen mode

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}"
}
Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

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. :)

Top comments (4)

Collapse
 
sabarishcodes profile image
Sabarish Rajamohan

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

Collapse
 
soorajsnblaze333 profile image
Sooraj (PS) Author

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. :)

Collapse
 
sabarishcodes profile image
Sabarish Rajamohan

Thanks Sooraj. Looking forward to it!

Collapse
 
patelvimal profile image
vimal patel

Is there any API to get all the public repositories which exists in Github?

Classic DEV Post from 2020:

js visualized

🚀⚙️ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳

Happy coding!