back to all posts

React Tutorial - SpaceX fan site with Apollo Client -4

by Nabendu Biswas / January 7th, 2020

#javascript #react #graphql
Series: React-apollo-client

Welcome to part-4 of the series. 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 LaunchSingle 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.jsLaunch.js

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

Single LaunchSingle Launch

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

Launch component updatedLaunch component updated

It will start to show in our web-page.

Launch DetailsLaunch Details

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

Rocket DetailsRocket Details

Now, it will show as below.

RocketsRockets

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.jsApp.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.jsApp.js

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

Navbar.jsNavbar.js

It will show our web-page as below.

localhostlocalhost

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

App.jsApp.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.jsRockets.js

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

RocketsRockets

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.jsRockets.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.jsRocketItem.js

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

Rockets pageRockets 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.

Nabendu Biswas