Build SpaceX fan site using GraphQL with React and Apollo Client -6
Tags: gatsby, react, webdev, tutorial
Published: 2020-01-25 04:08:44

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ni12qo9koddi0go36dak.jpeg)

Welcome to part-6 of the series.This series is based on the youtube series by Brad Traversy and you can find it [here](https://medium.com/@nabendu82/build-spacex-fan-site-using-graphql-with-react-and-apollo-client-1-55c056e2d0f5).

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

![Single History](https://cdn-images-1.medium.com/max/2880/1*VCiSF0kkdoBKtEtKuuPhSQ.png)*Single History*

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

![schema.js](https://cdn-images-1.medium.com/max/2880/1*FaDoOKlTlJ0OxM2HK3gtqw.png)*schema.js*

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

![Histories added](https://cdn-images-1.medium.com/max/2880/1*QswjFz8ooiRBw8iJlcjlUA.png)*Histories added*

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

![Navbar.js](https://cdn-images-1.medium.com/max/2880/1*p8fzQ0YllgYDubGXUTrl_A.png)*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.

![Histories.js](https://cdn-images-1.medium.com/max/2880/1*a8LhnoJuJ4NRXGMPV-7KDg.png)*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.

![HistoryItem.js](https://cdn-images-1.medium.com/max/2880/1*1w_pw_NP8D905T_rWtJFXQ.png)*HistoryItem.js*

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

![History](https://cdn-images-1.medium.com/max/2880/1*0Qv_v8IxTCoqqAfDEair_w.png)*History*

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

![App.js](https://cdn-images-1.medium.com/max/2880/1*gNp8Fc5KiPEdl-J1MzYEiQ.png)*App.js*

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

![HistoryItem.js](https://cdn-images-1.medium.com/max/2880/1*NyZG0VqflWNCGKAe2Bdljw.png)*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.

![History.js](https://cdn-images-1.medium.com/max/2880/1*oMDzfSjTWaUjnX1heYWCRA.png)*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**

![History.js](https://cdn-images-1.medium.com/max/2880/1*I2hH1q3DDSsokchPSIaRmw.png)*History.js*

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

![History.js](https://cdn-images-1.medium.com/max/2880/1*f2zFuaea7lOAlCjoYAJLkA.png)*History.js*

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

![History.js](https://cdn-images-1.medium.com/max/2880/1*9PG95dWIBNTQ1a8vf7sMRw.png)*History.js*

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

![History page](https://cdn-images-1.medium.com/max/2880/1*LVUmVRRtse6w8eTM54KnWQ.png)*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**

![App.js](https://cdn-images-1.medium.com/max/2880/1*YhV_I8lav5CP7FzhZDl-0A.png)*App.js*

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

![package.json](https://cdn-images-1.medium.com/max/2880/1*sUMFuNRD0drChLfRo445QA.png)*package.json*

Next, in **server.js** put the below content.

![server.js](https://cdn-images-1.medium.com/max/2880/1*FxJ0ffm0w3nLU_fNrvWsrA.png)*server.js*

Next, goto your client folder and run **npm run build**

![npm run build](https://cdn-images-1.medium.com/max/2880/1*77tCr_S9WTgtXxd7PD1alA.png)*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.

![heroku](https://cdn-images-1.medium.com/max/2880/1*i3LjbWE0bP-U0AxdCfcfog.png)*heroku*

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

![heroku cli](https://cdn-images-1.medium.com/max/2880/1*QGcRdXE7921qcfzdjydsiA.png)*heroku cli*

On a mac it can be done by homebrew command.

![brew](https://cdn-images-1.medium.com/max/2880/1*owbROOSxPZNRKoy7kt0NRw.png)*brew*

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

![heroku](https://cdn-images-1.medium.com/max/2880/1*290ijV6aH_2pDltKABE0Tw.png)*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.

![heroku login](https://cdn-images-1.medium.com/max/2880/1*jBIo27JIX4qePlprtVJxcw.png)*heroku login*

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

![heroku create](https://cdn-images-1.medium.com/max/2880/1*qKm7UYKJ1azTsRpWR1Ee6w.png)*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.

![Dashboard](https://cdn-images-1.medium.com/max/2880/1*_q9VWqS9ZmLkDI6zb63ekQ.png)*Dashboard*

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

![heroku](https://cdn-images-1.medium.com/max/2880/1*yvxAZ7b5edci5h_TPMpa8A.png)*heroku*

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

![git commit](https://cdn-images-1.medium.com/max/2880/1*Yl1wDwpiMPzUKPQgMAo5bw.png)*git commit*

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

![heroku success](https://cdn-images-1.medium.com/max/2880/1*_-_hUMba49oUIkfPRAa3PQ.png)*heroku success*

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

![Site live](https://cdn-images-1.medium.com/max/2880/1*xxp0xifrL53tuVx-wuaqGA.png)*Site live*

This completes our series. Hope you liked it. You can find the code for the same in my github repo [here](https://github.com/nabendu82/ReactApolloClient).

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