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.
npm init
Once, you type yes and press enter above a package.json file will be created in the folder.
package.json
Next, we will do npm install of the required packages from the terminal.
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
Now, let’s open the folder in VSCode and edit the package.json to include the scripts to start the server.
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
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.
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
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
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.
query
Next, we will also create the code for a single launch. As per the docs, we need to pass flight_number in it.
single launch
Now, the below GraphQL query will show the data for single launch.
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
Next, we will add the code to get rockets and rocket from it’s endpoint using axios.
rockets and rocket
Next, we will use the below query in Graphiql to get our data.
query
This completes the part-1 of the series. You can find the code for the same in my github repo here.
Top comments (0)