Dive into GraphQL with Apollo Client by Building a SpaceX 🚀 App in Angular 9

I know that this sounds odder than it is, but using GraphQL in an Angular 9 application with Apollo Client feels like flying a SpaceX rocket 🚀. Why can only React developer be an astronaut and fly with the GraphQL rocket? And I don’t have anything against React! Everyone can pick their flavor 😉

This project is updated to Angular 9, so make sure you install all the needed tools on your computer. Check this post what you should update for your application for Angular 9 by Jeroen Ouwehand

In this tutorial, I’m not gonna tell you how to steer the GraphQL rocket, but I’m going to help you get your engine started so you can learn to fly.

Rocket members that will help you start this tutorial smoothly

Of course, I mean that it will help you to follow this tutorial if you have basic knowledge of:

Angular 9
Typescript 3.7
GraphQL (basics on how to use it)

NodeJS requirements

NodeJS (Latest version preferable)
Typescript (Latest version preferable)

What will you learn from it

You will learn how to fly the GraphQL rocket with the Apollo Client in an Angular 8 application. As real Angular astronauts, there is one way to learn this rocket at best, to build our own SpaceX explorer 👨‍🚀

Let’s start the Angular engine

The Apollo client supports Angular Router, Ionic, NativeScript. But thank God they support Angular Schematics, which make our life so much easier in the first step 🚀.

1: Create Angular application with CLI

Make sure you installed the Angular CLI on your computer. Then run the command to create a new Angular.

you want to use your existing Angular app, then you can skip this step.

Go with the terminal to the spacexGraphQL folder, or open Visual Studio Code (or other IDE you like) and open the terminal in that.

2: Add apollo client

Apollo is the most popular tool to use GraphQL in the industry. Let’s install the Apollo Client via the Angular CLI so it can automatically set up the stuff you need.

3: Add spacex GraphQL url

Go to the SpaceX GraphQL page, copy the URL [https://api.spacex.land/graphql/](https://api.spacex.land/graphql/) and paste it in the uri const variable in the src/app/graphql.module.ts.

After adding the SpaceX URL, start the application by the following command npm start to see if it runs correctly.

4: Auto-generate types from API schema

Each GraphQL API will show it’s a schema. So instead of writing all those models and types by hand, we can automatically generate them 🙌.

First, we need to install graphql-codegen CLI.

After installation run npx graphql-codegen init to start the setup wizard.

What type of application are you building? Angular
Where is your schema? api.spacex.land/graphql
Where are your operations and fragments? **src/**/*.graphql**
Pick plugins: (Select these plugins with your spacebar)
TypeScript (required by other typescript plugins)
TypeScript Operations (operations and fragments)
TypeScript Apollo Angular (typed GQL services)
Where to write the output? **src/generated/graphql.ts**
Do you want to generate an introspection file? No
How to name the config file? **codegen.yml**
What script in package.json should run the codegen? **codegen**

After answering a few questions it generates a codegen.yml file with all the configuration based on your answers.

Which looks something like this.

Run npm install to install the plugin's for GraphQL codegen.

Now we only have to run npm run codegen to generate the schemas based on the current GrapQL API, sounds handy right!

But we are not there yet, because this command currently fails because we don’t have any .graphql files in our project yet.

5: Create the first GraphQL file

To generate all our type files from the GraphQL API we need to create a GraphQL file. In this file we define which data we are gonna use in our application, so we can leave the data we don’t want.

Go to the SpaceX GraphQL playground in your browser. Select the “rockets” option in the Explorer sidebar.

Since we want to show a list of all the SpaceX rockets, we are gonna ask for all the rockets. If we want to have a maximum of 3 rockets, we only have to give it a limit by selecting it.

Let’s define which information we want to have for each rocket. You can pick any information you want by selecting the properties.

I’m gonna pick the following:

company
cost_per_launch
country
description
diameter (meters)
first_flight
id
name
wikipedia

In the editor, we now see the GraphQL builds the query for you and if you press the play button, you will get the actual data on the right.

The data should look something like the example below. You can see we gave our query a name to re-use it in more places in the application.

Before we can make a file for this query, we need a rockets component for that.

Let’s run the following command for that.

Now we have a directory to put our .graphql with the content of the query which we got from the SpaceX GraphQL API. So let's create a file rockets.graphql in the rockets component folder, right where we need it.

Right now we can run npm run codegen to generate our GraphQL schema into src/generated/graphql.ts so we can use that to refer to in our components.

To see what has been generated, open the file. When scrolling through this you see that the codegen generated Typescript types of the whole SpaceX GraphQL schema.

When you scroll to the bottom you will see something like this. This is what has been generated based on our rockets.graphql file. Our query name has the name getRockets so we find that back in the generated file 🙌.

6: Show list of rockets

Now let’s show the data from the awesome SpaceX API 🚀. First, we need to take a few steps to do this.

Clean the app.component.html, only leave the router-outlet in there.

Go to the app-routing.module.ts and add the rocket component to the routes Array.

Go to the rockets.component.ts and set it up for getting the data from the GraphQL API.

You can copy-paste this code in your component and it should work. But I will walk you through it.

We created a public property rockets with the type Rocket[]. ( This type comes from our generated GraphQL schema) It's gonna be an Array of rockets. It's public because we need it in our HTML to show the data.

Inside the constructor we added a private property to GetRocketsGQL this is to refer to generated query document. Which will do the magic to do a request through the Apollo Client.

Inside the ngOnInit() we do a request to the GraphQL API with the defined query and watch for a result. When we get the result we add the data to this.rockets so we can show it in the HTML.

In the HTML we can out the JSON to see that it’s working.

Go to http://localhost:4200 and check if you see the JSON in your HTML. If you see it, it works! If you don’t, check the console in the browser for errors.

But to show the information properly you can build your HTML like this.

Which looks like

Final: What did we learn?

I know, it isn’t a good looking app that you want to show your users 😉. But I leave that up to you!

Add some styling with Angular Material or Bootstrap, you name it and make something pretty!

I could go on and on with more GraphQL tips and tricks, but to learn it deeper you have to work and play a lot with it.

If you want to see my source of this application because something is not working? Please check out the Angular SpaceX GraphQL Github repo.

Thanks

Thanks for reading all the way down to here 🙌. I hope you found this tutorial useful! If you prefer a video, please add in the comments so I can consider that.

Read my other posts

GraphQL (microservices) architecture by Apollo
_GraphQL is fantastic! Apollo build tooling around it to make our life easier, to use it at scale_itnext.io

Prevent “Cannot read property ‘…’ of undefined” errors with JavaScript Classes + TypeScript
_Every developer who did some JavaScript has got errors like “Cannot read property ‘…’ of undefined”. There is one…_itnext.io

From XHR to Fetch with Async/Await on the finish line
_It’s been a while ago that I’ve written my latest post. I’ve been busy exploring some other skills related to my…_medium.com