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 (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
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
After installation run
npx graphql-codegen init to start the setup wizard.
- What type of application are you building? Angular
- Where is your schema? https://api.spacex.land/graphql
- Where are your operations and fragments?
- 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?
- Do you want to generate an introspection file? No
- How to name the config file?
- What script in package.json should run the 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.
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:
- diameter (meters)
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.
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.
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.
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 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
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
5 Ways to Improve Your Coding Skills with ChatGPT: Tips and Tricks for Developers
Get better at coding with ChatGPT! This blog post provides five tips for using ChatGPT as your coding buddy, including spotting errors in code, brainstorming solutions to application problems, and improving code readability. Learn how ChatGPT can help you write better code and save time!
Revolutionize Your Programming with AI, ChatGPT & GitHub Copilot
Discover the top five benefits of incorporating AI into your work as a developer, use ChatGPT and Github Copilot. Don't get left behind – start using AI to revolutionize your programming skills today
Getting Started With Programming On A Budget
In this post, I want to share with you some tools you can use on a mobile phone or cheap tablet to get started with programming web development.