For my next project to contribute to for Hacktoberfest23, I decided to work on a React project to gain more experience and exposure to the different techniques used in React. I stumbled upon the Starwar Archive project, which is a React application that pulls data from an open Star Wars API called SWAPI to display information of each character.
The Issue
The issue I planned to work on was to create a person description page. This page needed to show detailed information of a character once their character card was clicked on the homepage.
Process
To get started, I forked the repository, created a new branch and got to work. There wasn't much to setup beforehand as I just needed to install the package modules with npm install.
Implementing Changes
The first thing I needed to decide on was the layout and overall color scheme of the page. As, the only page available was the home page, I decided to stay as close as possible to it and so I took some of the icons and the color scheme of the home page.
The next issue that I had to deal with was retrieving the data from SWAPI. Initially, useQuery was used to fetch data from SWAPI. It was my first time dealing with useQuery and so I needed to do some research on how to use it. I found that useQuery is a cool custom hook within React Query that is used to fetch data in a React application. Under the hood, useQuery manages things such as caching data after the initial fetch and re-fetching data in the background. A useQuery hook requires two arguments. The first one is a key for the query, and the second one is a function to fetch the data.
Additionally, what I found interesting with SWAPI, is that if some of the information of person can be found from within a different endpoint of the API, it would instead just provide the URL to it and not the actual information. An example response for a person would be like:
And so, one of the issues that came up was how to use useQuery for an array of URLs? After looking at the useQuery documentation again, I found another hook called useQueries which can be used to fetch from multiple URLs. There was a lot of trial and error with the structure of useQueries as it's slightly different from useQuery, but I was able to successfully fetch multiple queries from SWAPI for the data I needed. The final page looks like this:
After submitting my PR with my changes, the owner quickly approved and merged my contributions.
Learning Outcomes
Overall, it was great working on a React project and learning about some new hooks that I will definitely implement in my future projects. Looking forward to the next project to contribute to!
Top comments (0)