The GitHub Developer API is a powerful and robust means by which you can boost productivity. Using this API, you can create time-saving CLI and UI developer tooling for your team. One way the GitHub Developer API can save you time and enable you to create powerful custom tooling is via its commit API. For example, let's say that you have a custom, automated process that runs on your codebase, and this process needs to run based on the messages of a Git commit. The GitHub API enables a tool like this to work!
This guide will demonstrate how you can use the GitHub API to fetch the five most recent Git commits to a repository from within a React app.
Let's dive in!
The GitHub API is split into two big sections: REST and GraphQL. This guide will use the REST API, although the GraphQL API is a great alternative if you are used to working with GraphQL.
The first thing you need to do is install the @octokit/core NPM dependency. This is GitHub's core developer toolkit and is the NPM package this guide will use to interact with GitHub's REST API. To install this dependency, navigate to your top-level project directory and run:
1npm install --save-dev @octokit/core
With this dependency installed, your next step will be to generate a personal access token so that your program can successfully authenticate with GitHub's REST API. To do this, navigate to the token settings portion of your GitHub account and follow the onscreen steps.
With your dependencies downloaded and your personal access token ready to go, it's time to start interacting with the GitHub API.
When it comes to fetching a list of commits, the GitHub API gives you a number of API parameters that you can work with. Below is a list of available options to use with this portion of the API:
The GitHub developer API provides a rich layer of capabilities for interacting programmatically with your GitHub codebase. There's much more available to you than simply listing Git commits, too! I encourage you to check out the GitHub REST API documentation to see the plethora of options you have available.
Now that you're in your React code, it's time to see what this API can do!
Note: Don't forget to keep your authorization token a secret! Don't check your token into source control!
1import { Octokit } from "@octokit/core";
2
3function CommitListComponent() {
4 const [commits, setCommits] = useState([]);
5 const octokit = new Octokit({ auth: 'your-token!' });
6
7
8 useEffect(() => {
9 const owner = 'test-user',
10 repo = 'test-repo',
11 perPage = 5;
12
13 const fiveMostRecentCommits = await octokit.request(
14 `GET /repos/{owner}/{repo}/commits`, { owner, repo, per_page: perPage }
15 );
16
17 setCommits(fiveMostRecentCommits);
18 }, [])
19
20 return (
21 <ul>
22 {commits.map(commit => (
23 <li key={commit.id}>
24 {commit.author.name}: {commit.message}
25 </li>
26 ))}
27 </ul>
28 );
29}
Wow, that was really simple! As you can see, first you need to import the Octokit class from GitHub's developer API project. Once you instantiate an instance of the Octokit class with your personal access token, you can then use Octokit's request
method to start listing commits!
This particular React component requests the five most recent Git commits from the GitHub API and then simply displays the author name and commit message in a list. You can easily see how this could be expanded to request commits between certain dates or commits from a list of all repositories from a given author. The possibilities of the API are truly immense.
The GitHub developer API provides a rich layer of capabilities for interacting programmatically with your GitHub codebase. Please check out the GitHub REST API documentation to see the plethora of options you have available. I hope that this guide has helped you to envision how you can use the Github API in your own projects to save you and your team valuable time and effort.