Build SpaceX fan site using GraphQL with React and Apollo Client -5

Image for post
Image for post
Photo by SpaceX on Unsplash

Welcome to part-5 of the series. You can find part-4 here.

This series is based on the youtube series by Brad Traversy and you can find it here.

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.

Image for post
Image for post
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.

Image for post
Image for post
Rocket.js

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

Image for post
Image for post
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.

Image for post
Image for post
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.

Image for post
Image for post
schema.js

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

Image for post
Image for post
Playground

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

Image for post
Image for post
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.

Image for post
Image for post
Rocket.js

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

Image for post
Image for post
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.

Image for post
Image for post
Rocket Component updated

It will start to show in our web-page.

Image for post
Image for post
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.

Image for post
Image for post
History

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

Image for post
Image for post
schema.js

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

Image for post
Image for post
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

After that use the below query to check.

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.

You can find the final part here , where we complete the history part and also deploy the application.

Written by

UI Lead- ReactJS, JavaScript and everything in-between.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store