And so it ends...
As my course winds to a close and I finish up my assignments, I have reflected on everything I've accomplished in the last three months. I'm proud of what I've done. I've made 6 pull requests in public repos, 4 of which were merged, 1 of which is dead, and 1 is yet to be merged. I've looked at hundreds of issues in dozens of languages, learned so many things it's taken me 15 or 16 blog posts to contain them all. I am most proud of my work in this pull request, although on the surface it looks rather simple.
The Issue
The issue is built upon my previous pull request for Release 0.3, which is why I thought it would be perfect for 0.4. It is a new page on the website that includes the Contributor Showcase component I built for Release 0.3, as well as a paragraph on how to get involved, a couple of links, and a link to a github search for issues. It also includes a list of the repositories owned by OpenClimateFix. Another part of this issue is to attempt to add the Github API to the Get Involved page, to load the issues instead of clicking on the link. This is what I spent approximately 20-30 hours researching, learning, and testing before I found that I could not do it in this pull request. I figure what better way to use that knowledge than to impart it on the readers of this blog.
Why I couldn't use Github API
In order to use Github API, you can do 3 things:
- You can use a personal access token, which provides access to the Github API through your Github account.
- You can set up a Github App, which means setting up a server to host a Github App to fetch data from the API.
- You can authenticate using a OAuth app in a similar manner.
What you can't do is use a personal access token on a public website. Everywhere I researched said explicitly that the point of the access token is for testing and maintaining your own repositories, and it is meant to be temporary as it only lasts for a year. It also can be used instead of a github password, which would give others access to my account and private repositories. The other 2 options would have to be done by OpenClimateFix, and would be a project on their own to get set up. The simplest solution is to just make a good Github search query link, and provide links to some of the repositories staticly.
Setting up the environment
Luckily, I have done a few PR's for OCF now, so I have the environment set up. I looked at many new packages and libraries to use the Github API, but in the end I had nothing to add. For your sake (the readers of this blog), I will include what I needed to get the Github API running. If I was making my own app, I would probably fetch the data differently, and not use Gatsby, but this is what I got working with the personal access token:
- gatsby-source-graphql - use this plugin in gatsby to load the Github API
- Gatsby Example Project - used as a basis for querying the Github API
- How to Create a Personal Access Token
Then all I had to do was add the Github API query to my code, similarly to how I used a query in Release 0.3. The following code shows the query:
query MyQuery {
github {
repository(name: "repository-name", owner: "owner") {
id
description
issues(labels: "good first issue", states: OPEN, first: 10) {
edges {
node {
id
title
url
}
}
}
}
}
}
When I realized that personal access token was not going to be an option, I had to go with the backup plan.
The Solution (Pull Request)
The backup plan was to include a link using a Github search url to define open, good first issues available from all openclimatefix repositories. Here are the steps I went through to create the new page.
- Create a file named get-involved.jsx under the pages folder. This automatically creates a page in Gatsby, and routes it to the root uri followed by the filename. If the file was in a folder, it would default to `root/folder/jsx-file`. Classes are also added to the routes, so if I wanted to put all of my classes into one file I could, and have several routes.
- Write the code to create and return the Gatsby html template.
- Add the existing code from the Get Involved section on the website. This includes the Contributor Showcase component I created for Release 0.3, as well as some links, and I added the new link for good first issues. I also left OCF some room to write their own message on the page.
- Format everything to fit prettier and eslint standards. The repository does not run eslint tests on compilation or on commit, but only in the pull request itself. Therefor, any errors are difficult to catch until you have made a pull request. It took several tries to fix the lint errors.
- Wait for a Review. I am currently in this stage, and will post an update if I hear anything back from OCF.
 |
| The Final Product |
Overall it was a fairly simple solution that I spent so many hours researching for. I'm glad that through this blog post, my research and experience might help someone else get the Github API going in Gatsby. I found no guide suggesting where to go and what to do explicitly, so let this be a sort of guide.
