Build SpaceX fan site using GraphQL with React and Apollo Client -1
Tags: react, graphql, webdev, tutorial
Published: 2020-01-04 16:22:14

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

I had recently started working on a new project at work, which have GraphQL with React and it queries the GraphQL server using Apollo Client.

I had done the [Advanced React](https://advancedreact.com) course from one of my favorite teacher Wes Bos in the past, which includes the same stack on the front-end and also build an open source Restaurant App with the [same](https://medium.com/@nabendu82/complete-production-grade-restaurant-billing-app-built-in-react-nextjs-graphql-d4efac352be6).

But i wanted to build something quick to refresh the concept and i found a free course on YouTube from another of my favorite teacher Brad Traversy and decided to follow it to make this [app](https://www.youtube.com/watch?v=SEMTj8w04Z8&list=PLillGF-RfqbZrjw48EXLdM4dsOhURCLZx).

We will be building an web-app to show all the launches and other data from my favorite company **SpaceX**. It will be built using the public APIs provided by them.

So, open the terminal and goto an empty folder and do **npm init**. Enter in most of the case, except in some of them enter values as in screenshot below.

![npm init](https://cdn-images-1.medium.com/max/2880/1*mTRL2GOpZ4x1Lxg-QdgzXg.png)*npm init*

Once, you type yes and press enter above a **package.json** file will be created in the folder.

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

Next, we will do npm install of the required packages from the terminal.

![npm install](https://cdn-images-1.medium.com/max/2880/1*5cPEawHZpES3cW_5f3ArGQ.png)*npm install*

Now, also install the famous nodemon package as dev dependency so that we don’t have to restart our server after every change.

![nodemon](https://cdn-images-1.medium.com/max/2878/1*Y3G7ZDvZ5vNBmz6hln5Eqg.png)*nodemon*

Now, let’s open the folder in VSCode and edit the **package.json** to include the scripts to start the server.

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

Next, we will create the file **server.js** in the root directory and add this content in it. It is a express code and we are calling a common endpoint called /graphql in it. This is where GraphQL is different then NodeJs and we call only one endpoint.

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

We will create our **schema.js** . The content will replicate from what we need from spacex API. The docs are [here](https://docs.spacexdata.com).

This is what the GET request for launches will return us.

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

We are using only some of the fields out of the many things returned by SpaceX launches API in **schema.js** and they are **flight_number, mission_name, launch_year, launch_date_local, launch_success**

One thing to notice is that since rocket is an Object in the API, we are making it into a different type and then using **rocket_id, rocket_name** and **rocket_type** in it.

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

Next, we will add the root query to **schema.js**. Here we have to hit the API endpoint through axios to get the data.

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

Now, in terminal run **nodemon server.js** to start the server.

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

Next, we can run the query in GraphiQL to get the data. We can get all the fields or some of the fields and that the benefit of GraphQL over REST.

![query](https://cdn-images-1.medium.com/max/2878/1*6LZ8zF4BwU2apjU4drtLXA.png)*query*

Next, we will also create the code for a single launch. As per the [docs](https://docs.spacexdata.com/?version=latest#cfcc49e7-5fe4-4dd3-9701-7c5caf7af9fb), we need to pass **flight_number** in it.

![single launch](https://cdn-images-1.medium.com/max/2878/1*4v7CVx6f1aB8dO7sozETpg.png)*single launch*

Now, the below GraphQL query will show the data for single launch.

![Single launch query](https://cdn-images-1.medium.com/max/2876/1*ia4iEdpfP5bR9ts8ksCB-w.png)*Single launch query*

Next, we will also add code to get data for rockets and single rocket. But, let’s first update two more fields **wikipedia** and **description** in **RocketType**.

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

Next, we will add the code to get **rockets** and **rocket** from it’s endpoint using axios.

![rockets and rocket](https://cdn-images-1.medium.com/max/2880/1*iIESTHMxhkxk1oxjOLf1-Q.png)*rockets and rocket*

Next, we will use the below query in Graphiql to get our data.

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

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