2nd Pull Request in Hacktoberfest23
Tags: hacktoberfest23, react, opensource, beginners
Published: 2023-10-26 23:42:35

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](https://github.com/Leo5661/Starwar-Archive) project, which is a React application that pulls data from an open Star Wars API called [SWAPI](https://swapi.dev/documentation) to display information of each character.

<h2>The Issue</h2>
The issue I planned to work on was to create a [person description page](https://github.com/Leo5661/Starwar-Archive/issues/3). This page needed to show detailed information of a character once their character card was clicked on the homepage.

<h2>Process</h2>
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`.

<h3>Implementing Changes</h3>
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](https://tanstack.com/query/v4/docs/react/reference/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.

![useQuery Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xwi9fg5o03tn0sq0yrs9.JPG)

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:

![Example response from SWAPI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j9tbenngg59dbv9bg5ey.JPG)

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](https://tanstack.com/query/v4/docs/react/reference/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:
![Final result of page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0np0h5ckcbdvdj4ql1uk.JPG)

After submitting my [PR](https://github.com/Leo5661/Starwar-Archive/pull/13) with my changes, the owner quickly approved and merged my contributions.

<h3>Learning Outcomes</h3>
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!