Welcome to part-5 of the series.
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.
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.
Rocket.js
We also need to change the simple button in our RocketItem.js to use Link from react-router-dom.
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.
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.
schema.js
Next, we will create the query in Graphiql playground to get the details of one rocket.
Playground
We will now start importing the required packages and using our graphql query for the single rocket in our Rocket component.
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.
Rocket.js
Now, in our website it will show the Object of data which we received from GraphQL when we goto a Rocket page.
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.
Rocket Component updated
It will start to show in our web-page.
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.
History
Next, we will head over to schema.js and create two new types.
schema.js
Next, let’s add those two new type in two new endpoints code.
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.
In the final part we complete the history part and also deploy the application.
Top comments (0)