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

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.

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. You can find part-5 here.

--

--

--

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

JavaScript: Hoisting

React Native Firebase Cloud Functions

Deploy an angular app with nginx in Linux server

9+ Chrome Extensions I Wish I Knew Earlier

Understand Responsive Images Through gatsby-image

Assessing sqlalchemy.exc.ArguementError(…)

Replace your for loops by Array methods — reduce(), filter(), map()

Javascript Strings

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
Nabendu Biswas

Nabendu Biswas

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger

More from Medium

Build Powerful Tables in React with React Table

How to write tests for Redux Reducers in React.js/Next.js Apps!

Learning React with TypeScript by Building an API app

ReactJS — Separating logic using Higher-Order Component (HOC)