Build SpaceX fan site using GraphQL with React and Apollo Client -4
Tags: react, graphql, webdev, tutorial
Published: 2020-01-13 16:58:36

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/f3wlqvcvf1p0wtk8buwl.jpeg)

Welcome to part-4 of the series. 

This series is based on the youtube series by Brad Traversy and you can find it [here](https://medium.com/@nabendu82/build-spacex-fan-site-using-graphql-with-react-and-apollo-client-1-55c056e2d0f5).

We will start where we left by working on the **Launch** component. We will start by importing the required packages and using our graphql query for the single launch.

![Single Launch](https://cdn-images-1.medium.com/max/2880/1*14bZ6udC7xNjh0df_YlXYA.png)*Single Launch*

Next, we will first get the **flight_number** from the url. This we can do by **this.props.match.params** . Now this will return us Sting but we need integer for using it in our query, so we convert it by **parseInt()**.

Next, we will use the **LAUNCH_QUERY** in our code by the same boiler plate as earlier in Launches component. But we are also passing variables **flight_number** to it. As usual we are first checking whether we are receiving the data from GraphQL by console logging it.

![Launch.js](https://cdn-images-1.medium.com/max/2880/1*0ZEzJjUDquI6o0V5bfUfpA.png)*Launch.js*

Now, in our website it will show the Object of data which we received from GraphQL when we goto a Lauch page.

![Single Launch](https://cdn-images-1.medium.com/max/2880/1*d4-EpZBEzE53n-LuNj1pvA.png)*Single Launch*

Then we will de-structure the data and start showing it in the **Launch** component.

![Launch component updated](https://cdn-images-1.medium.com/max/2880/1*4Q1x5fEGbOG01UXyG3_HQw.png)*Launch component updated*

It will start to show in our web-page.

![Launch Details](https://cdn-images-1.medium.com/max/2880/1*ORgPDLEq3vP6O37TCvh_Ng.png)*Launch Details*

Now, let’s complete rest of the code to display rockets and a Back button.

![Rocket Details](https://cdn-images-1.medium.com/max/2880/1*7Qg_-aAdwAUSgTlyglgROA.png)*Rocket Details*

Now, it will show as below.

![Rockets](https://cdn-images-1.medium.com/max/2880/1*c4QT5mIl-1Re059FaODRXw.png)*Rockets*

Next, we will create a **Navbar** component because we will also show **Rockets**. We have already created Schema for the same in **schema.js**.

![App.js](https://cdn-images-1.medium.com/max/2880/1*O9bcr-_qP76vPJA38l0cIg.png)*App.js*

We have made the following changes in **App.js**. We had removed import for logo and also the img tag. Then we have created a **Navbar** component. Also, we have added a Route for /launches.

![App.js](https://cdn-images-1.medium.com/max/2880/1*vBzTBzlmFejGNOvErFfwEw.png)*App.js*

Next, create a file **Navbar.js** inside **components** folder. Here we are just using some bootstrap 4 classes to show a Navbar.

![Navbar.js](https://cdn-images-1.medium.com/max/2880/1*NZu5Goj1XBifs2bGC81dWA.png)*Navbar.js*

It will show our web-page as below.

![localhost](https://cdn-images-1.medium.com/max/2880/1*Nx9a9JleZuKmHVDAAxhCLg.png)*localhost*

Next, let’s add the code to display **Rockets** component in **App.js**

![App.js](https://cdn-images-1.medium.com/max/2880/1*CDFeTrtptUQLFI_ljdtgPw.png)*App.js*

Next, we will create the Rockets component. Create a file Rockets.js inside components folder and the following data in it. It is almost similar to Launches component, only the query is different.

![Rockets.js](https://cdn-images-1.medium.com/max/2880/1*oZL-kJqYGOD_scG6E3xxdQ.png)*Rockets.js*

Let’s move to the Rockets page and check whether the data is coming.

![Rockets](https://cdn-images-1.medium.com/max/2880/1*u3XGzZG_egdAg91snjRfww.png)*Rockets*

As, we are getting the data we will create another file **RocketItem.js** to show the data. But first let’s update **Rockets.js** to loop through **rockets** array and pass each object to **RocketItem** component.

![Rockets.js](https://cdn-images-1.medium.com/max/2880/1*xhBuUP20fdx5YNzL_Aubzg.png)*Rockets.js*

Next let’s create the file **RocketItem.js** inside components folder and the below content in it to display Rocket name and a button for Rocket Details.

![RocketItem.js](https://cdn-images-1.medium.com/max/2880/1*CtBEe39llxSOfcOBzvKklA.png)*RocketItem.js*

Now, once we goto Rockets page, it will show as below.

![Rockets page](https://cdn-images-1.medium.com/max/2880/1*EkJ6bkXWlrKxEzITNX69Hg.png)*Rockets page*

This completes the part-4 of the series. You can find the code for the same in my github repo [here](https://github.com/nabendu82/ReactApolloClient).

In the next part we add functionality to the Rocket Details button and more.