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

Image for post
Image for post
Photo by SpaceX on Unsplash

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 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.

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.

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.

Image for post
Image for post
npm init

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

Image for post
Image for post
package.json

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

Image for post
Image for post
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.

Image for post
Image for post
nodemon

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

Image for post
Image for post
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.

Image for post
Image for post
server.js

We will create our schema.js . The content will replicate from what we need from spacex API. The docs are here.

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

Image for post
Image for post
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.

Image for post
Image for post
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.

Image for post
Image for post
RootQuery

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

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.

Image for post
Image for post
query

Next, we will also create the code for a single launch. As per the docs, we need to pass flight_number in it.

Image for post
Image for post
single launch

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

Image for post
Image for post
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.

Image for post
Image for post
schema.js

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

Image for post
Image for post
rockets and rocket

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

Image for post
Image for post
query

This completes the part-1 of the series. You can find the code for the same in my github repo here.

You can find part-2 here.

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