Build SpaceX fan site using GraphQL with React and Apollo Client -5
Tags: react, graphql, webdev, tutorial
Published: 2020-01-19 13:15:52

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/gs1kdzyo9s3qspw1v8e9.jpeg)
Welcome to part-5 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).

Next, it’s time to create our **Rocket** component to show the details of each rocket, when the user clicks on **Rocket Details** button.

But first we will create a new Route to it in the **App.js** file.

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

Next, we will create **Rocket.js** inside the **components** folder and put the basic code in it. We will change the content later.

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

We also need to change the simple button in our **RocketItem.js** to use **Link** from react-router-dom.

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

Now, once we click on the **Rocket Details** link, it will show us the **Rocket** Component. Also, notice the url as it got changed to the **rockets** with **rocket_id**.

![Rocket Page](https://cdn-images-1.medium.com/max/2880/1*woDDg9OJ-5mkGN1BqliaLg.png)*Rocket Page*

Before updating the **Rocket.js** file with the query, we should make it in Graphiql playground. But i realized that the schema type was wrong in **schema.js**, so let’s fix it first.

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

Next, we will create the query in Graphiql playground to get the details of one rocket.

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

We will now start importing the required packages and using our graphql query for the single rocket in our **Rocket** component.

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

Next, we will first get the **rocket_id** from the url. This we can do by **this.props.match.params** . Now this will return us String and we need string only to be passed to the query.

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

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

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

![Rocket Page](https://cdn-images-1.medium.com/max/2880/1*vnY0l69YTBOAUA-xS1zuBg.png)*Rocket Page*

Then we will de-structure the data and start showing it in the **Rocket** component with a little help from bootstrap 4 classes.

![Rocket Component updated](https://cdn-images-1.medium.com/max/2880/1*cIDAmfj8m16Yr18bK4YpsA.png)*Rocket Component updated*

It will start to show in our web-page.

![Rocket Webpage](https://cdn-images-1.medium.com/max/2880/1*tJqFgXJwnVH8h3RDCzIXnQ.png)*Rocket Webpage*

In our web-app the **Home** and the **Launches** page shows the same thing, so i am thinking to change the Launches page to show history about SpaceX. SO, i had headed over to the Spacex API and got the details to get history.

![History](https://cdn-images-1.medium.com/max/2880/1*I9Z-bZUGzxeGHklG_xCjxA.png)*History*

Next, we will head over to **schema.js** and create two new types.

![schema.js](https://cdn-images-1.medium.com/max/2880/1*nrbOtgSRiRXNg2I-2dqXyQ.png)*schema.js*

Next, let’s add those two new type in two new endpoints code.

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

Next, we will check in Graphiql playground whether the query is working. But before that we need to restart our application and also refresh Graphiql playground at [http://localhost:5000/graphql](http://localhost:5000/graphql)

After that use the below query to check.

![Graphql query](https://cdn-images-1.medium.com/max/2880/1*tSWH1vbjf8w22eEFSboyZQ.png)*Graphql query*

And we are getting the data from graphql. This completes the part-5 of the series. You can find the code for the same in my github repo [here](https://github.com/nabendu82/ReactApolloClient).

In the final part we complete the history part and also deploy the application.