Build SpaceX fan site using GraphQL with React and Apollo Client -2
Tags: react, graphql, webdev, tutorial
Published: 2020-01-06 15:27:53

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

Welcome to part-2 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).

It’s time to create the front-end of our app and we will use **create-react-app** for the same. So, head over to terminal and give below command inside the **ReactApolloClient** folder.

![create-react-app](https://cdn-images-1.medium.com/max/2880/1*tFrbEfIjpZbPRgAKtVxquw.png)*create-react-app*

Next, we will npm install **concurrently** as we don’t want to run two different commands to run server and client.

![concurrently](https://cdn-images-1.medium.com/max/2880/1*t9lOV5NAy4-u1BLAhTPaDQ.png)*concurrently*

Now, open your **package.json** and add below lines.

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

Next, head over to terminal and run **npm run dev** to run both client and server.

![npm run dev](https://cdn-images-1.medium.com/max/2880/1*zLgI-QxhfVL50LPvchBzYw.png)*npm run dev*

If everything is ok, react app will open on [http://localhost:3000/](http://localhost:3000/)

![React app](https://cdn-images-1.medium.com/max/2880/1*rA_sQBwdBGoRWtzR0h9ZhA.png)*React app*

Now, we will work on our React app. But time for some clean-up first. Open **App.css** inside **client -> src** folder and delete everything. Also, delete the file **logo.svg**

![delete logo.svg](https://cdn-images-1.medium.com/max/2880/1*zPO8KpwtbWPxXZTruPJdlw.png)*delete logo.svg*

Next, open **App.js** and remove everything and only keep the below code.

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

We will be using a free boostrap theme from the site [https://bootswatch.com/](https://bootswatch.com/)

![Bootswatch](https://cdn-images-1.medium.com/max/2880/1*yxKIh62p-NfnwLbdA073ZA.png)*Bootswatch*

I will be using Cyborg theme, so i got the hosted link to [it](https://bootswatch.com/4/cyborg/bootstrap.min.css). Next go to **index.html** inside the **public** folder and add reference to the link. Also change the title in the file.

![index.html](https://cdn-images-1.medium.com/max/2880/1*o_2XGUi_QEOIUSbJs14R9w.png)*index.html*

Next, i have also added a **logo.png** file for our logo in the **src** folder.

![logo.png](https://cdn-images-1.medium.com/max/2880/1*by8a6Xjxd-Fk3oy75Jm9EA.png)*logo.png*

Next, let’s display the logo in the top-middle of the page.

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

It will show the beautiful logo in the web-page.

![SpaceX logo](https://cdn-images-1.medium.com/max/2880/1*iOPCbvrQWZ_2ijUTywWNzg.png)*SpaceX logo*

Then we will install some dependencies for using apollo client in our project to fetch data. Do the below npm installs in the **client** folder.

![apollo client](https://cdn-images-1.medium.com/max/2878/1*URyYnyduGLEgZ_Vh9X_JSQ.png)*apollo client*

Now, it’s time to use Apollo client in our **App.js**. We first do our imports and then use a client variable, where we point to our graphql endpoint. After that we wrap our whole App with **ApolloProvider**.

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

Then we will create a folder components and inside it a file **Launches.js**. Here we are using **gql** and then using the query we created in Graphiql. Next, we have to use Query inside our render() to get the data.

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

We also need to add this component to our **App.js** for it to render.

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

But, when we try to see the data in our console, we get the famous CORS error. This occurs because our client is at 3000 and server at 5000.

![CORS error](https://cdn-images-1.medium.com/max/2880/1*bk83RUkbpxrl3lY0OCrBKg.png)*CORS error*

So, in our main folder let’s first install cors.

![cors installed](https://cdn-images-1.medium.com/max/2880/1*9Aj5VxMZey9FXlZ1-TIz_A.png)*cors installed*

Next, in **server.js** inclue and use cors as below.

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

Now, when we goto [http://localhost:3000/](http://localhost:3000/) we can see all the data coming from graphql

![All data](https://cdn-images-1.medium.com/max/2880/1*JfWrkgMjoHOwY94jsc94VA.png)*All data*

This completes the part-2 of the series. You can find the code for the same in my github repo [here](https://github.com/nabendu82/ReactApolloClient).