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

Image for post
Image for post
Photo by SpaceX on Unsplash

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

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

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.

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

Image for post
Image for post
Launch.js

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

Image for post
Image for post
Single Launch

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

Image for post
Image for post
Launch component updated

It will start to show in our web-page.

Image for post
Image for post
Launch Details

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

Image for post
Image for post
Rocket Details

Now, it will show as below.

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

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

Image for post
Image for post
App.js

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

Image for post
Image for post
Navbar.js

It will show our web-page as below.

Image for post
Image for post
localhost

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

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

Image for post
Image for post
Rockets.js

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

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

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

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

Image for post
Image for post
Rockets page

This completes the part-4 of the series. You can find the code for the same in my github repo here.

In the next part we add functionality to the Rocket Details button and more. You can find part-5 here.

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