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

Image for post
Image for post
Photo by Bill Jelen on Unsplash

Welcome to part-6 of the series. You can find part-5 here.

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

We will start building our History component in this part. But first let’s check the graphiql query for a single history.

Image for post
Image for post
Single History

I also forgot to add the title field in the schema. So, let’s add quickly to schema.js

Image for post
Image for post
schema.js

Then, we will change the route for launches to histories in App.js and also add the import for it.

Image for post
Image for post
Histories added

Next, in Navbar.js we will also change the Launches to History.

Image for post
Image for post
Navbar.js

Then, we will create a new file Histories.js inside the components folder. It is almost similar to the Launches.js file and here we are creating a query and then passing it to the HistoryItem component.

Image for post
Image for post
Histories.js

Let’s create the HistoryItem.js file next inside the components folder. Here, we are just using the props passed from the Histories component and using them, in displaying with help of bootstrap.

Image for post
Image for post
HistoryItem.js

It will show our webpage as below once we click on History.

Image for post
Image for post
History

Next, we will create the History component but first let’s add the route for it in App.js

Image for post
Image for post
App.js

Next, let’s change the button to a Link in the HistoryItem.js file.

Image for post
Image for post
HistoryItem.js

Now, it’s time to create our History.js file inside the components folder. It will be quite similar to Launch.js file.

Image for post
Image for post
History.js

Next, we will show the items with help from bootstrap and a little help from our earlier created Launch.js. It is almost similar to Launch.js

Image for post
Image for post
History.js

Next, let’s add more fields to display with bootstrap.

Image for post
Image for post
History.js

Let’s also add a button to go back to History page.

Image for post
Image for post
History.js

And it will show our web-page for History as below.

Image for post
Image for post
History page

We are done with the app. Now we will start our deployment process in heroku.

First in the App.js remove the localhost:5000 from the uri and make it only /graphql

Image for post
Image for post
App.js

Next, in package.json of client, update the proxy and the build script.

Image for post
Image for post
package.json

Next, in server.js put the below content.

Image for post
Image for post
server.js

Next, goto your client folder and run npm run build

npm run build

Next, you should have an account in heroku.com which i already have and once i login to it the below dashboard is shown.

Image for post
Image for post
heroku

We should also have the heroku cli installed according to the operating system.

Image for post
Image for post
heroku cli

On a mac it can be done by homebrew command.

Image for post
Image for post
brew

After the installation run heroku on the terminal and you will get a list of command, showing that installation is successful.

Image for post
Image for post
heroku

Now, do heroku login where they have a new way of logging you in. It opens a browser window to provide your credentials. Once you provide correct credentials and close the browser window, it will log you in and show you as below.

Image for post
Image for post
heroku login

Then do heroku create, but make sure while doing all these you are in your root folder.

Image for post
Image for post
heroku create

It will give you any random name. Now, open your heroku dashboard and goto that app. After that goto Deploy tab. Here, you will find a remote command which you need to copy.

Image for post
Image for post
Dashboard

Now, we need to run that command in the terminal.

Image for post
Image for post
heroku

Next, git add and commit the code we did for server.

Image for post
Image for post
git commit

After that give the command git push heroku master and if everything is right, you will get below message.

Image for post
Image for post
heroku success

Now, you can open the given url in the browser and our site is live on the internet.

Image for post
Image for post
Site live

This completes our series. Hope you liked it. You can find the code for the same in my github repo here.

And the live site to interact is https://stark-bastion-93462.herokuapp.com/

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