Welcome to part-4 of the series.
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.
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
Now, in our website it will show the Object of data which we received from GraphQL when we goto a Lauch page.
Single Launch
Then we will de-structure the data and start showing it in the Launch component.
Launch component updated
It will start to show in our web-page.
Launch Details
Now, let’s complete rest of the code to display rockets and a Back button.
Rocket Details
Now, it will show as below.
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
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
Next, create a file Navbar.js inside components folder. Here we are just using some bootstrap 4 classes to show a Navbar.
Navbar.js
It will show our web-page as below.
localhost
Next, let’s add the code to display Rockets component in App.js
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
Let’s move to the Rockets page and check whether the data is coming.
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
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.
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.
Top comments (0)