Learn the fundamentals of GraphQL by interacting with the SpaceX API 👨‍🚀🚀, then use it to build  a frontend Apollo application from scratch. Source code: https://github.com/arjunyel/angular-spacex-graphql-codegen

Hire the expert Arjun Yelamanchili 👨‍🔬

- https://github.com/arjunyel
- https://www.linkedin.com/in/arjun-yelamanchili-42318b37/

GraphQL Docs https://graphql.org/
Apollo Client https://www.apollographql.com/
Lesson page https://fireship.io/lessons/graphql-basics-tutorial/

#graphql #tutorial #learntocode

Take Fireship Quizzes 🤓

iOS https://itunes.apple.com/us/app/fireship/id1462592372?mt=8
Android https://play.google.com/store/apps/details?id=io.fireship.quizapp

Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.
2024-02-04T06:33:00.747Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
e2377bac-4a50-4ee5-bc07-c4376a972580
89e6136642d214361153d9cfaf7e43f9175d408699a0a038beb707a84d5d8c7c
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
GraphQL, a query language for APIs.
You define a schema for your data, then tell GraphQL how to fetch and supply that schema.
And in doing so, amazing things might happen as we'll see in this video.
10,
9, ignition sequence start.
In today's video, you'll learn the fundamental concepts of GraphQL by interacting with the public SpaceX API.
If you're new here, like and subscribe, and I'd like to give a special thanks to Arjun Yellamanshelli, who is the mastermind behind this video.
If you're looking for a GraphQL expert, you can find his LinkedIn and GitHub in the description below.
Let's start by answering the question of what is GraphQL?
In the most basic sense, it's a language that allows your front end applications to communicate with your back end applications.
A Rosetta Stone, if you will.
A consistent way for your front end to request data from your back end despite any differences in the underlying programming language.
For example, your mobile application might need to request a sandwich from your API.
It can make that request by sending a GraphQL query.
The query will have the same shape that you expect to receive back from the API as JSON.
So in this case, we expect a sandwich object with bread, ham, and cheese.
On the server, GraphQL also functions as a runtime for executing queries.
The server defines types for the data that's available there, and also resolvers to actually fetch the data from a database or some other data source.
Now because everything on the server is strongly typed, we can get some really amazing tooling with GraphQL.
To demonstrate this, let's head over to the GraphQL Explorer for the public SpaceX API.
If you're the consumer or using the API in your front end application, you can do introspection to the back end to see what data is available there.
As you can see here, we have a whole bunch of different check boxes that represent different queries we can make to the SpaceX API.
In the middle panel, We already have an example GraphQL query ready to go.
Now go ahead and hit the play button to execute the query, and then you'll see on the right side, we get a JSON payload returned from the server.
And what you'll notice is that the properties on this JSON object are identical to the way we structured them in our GraphQL query.
And on top of that, everything is strongly typed.
If we hover over a field in our GraphQL query, you can see that it gives us a type.
There are several built in types like string, integer, etcetera.
And the server can also define its own custom types.
So when working with GraphQL as a front end developer, you'll always know the exact shape of the data that you're expecting back from the server.
And speaking of that, let's take a second to look at the differences between REST APIs and GraphQL APIs.
REST stands for representational state transfer, and it's the status quo for API design that we've been following for the last 20 years.
Now let's say our front end application wants to make a sandwich.
In REST, we might make 3 different requests, one for bread, ham, and cheese.
Each request is mapped to its own unique URL, and each response from the server would contain the full JSON payload with everything that we need, like the full loaf of bread, a full pig, and a full wedge of cheese.
Even though our front end application doesn't necessarily need all that data, we can just filter it out in the front end code.
Now in GraphQL world, things are quite a bit different.
Instead of having multiple URL endpoints, we just have a single entry point into the API.
So it's the actual query sent from the front end that determines what the back end will return.
It's not based on a URL or any specific mapping like that.
In addition, the GraphQL API will only return the actual fields that were requested.
Instead of requesting ingredients 1 by 1, we just get the full sandwich all put together.
Now let's say we also want to add a side salad and a drink to this query.
In GraphQL, it's a simple matter of updating the query, But in REST, we would likely have to make at least 2 more requests to 2 different unique URLs to get this data.
The beauty of GraphQL is that it simplifies the way you request data from your front end code.
So obviously, GraphQL is way better than REST, and you should never use REST ever again.
Right?
Well, it's really not that simple.
While GraphQL provides a lot of advantages, there are some disadvantages as well.
The biggest disadvantage in my opinion is that there is some added complexity upfront.
You can build a RESTful service with Express JS with, like, 5 lines of code.
But with GraphQL, you have some additional dependencies, a type system, and the benefits might not be that substantial if you're a small team or have a relatively simple API.
The benefits of GraphQL really kick in when you have multiple developers working with a large API that needs to map together a whole bunch of different back end data sources.
In any case, GraphQL is very fun to work with as a developer, so let's go ahead and play around with some queries to SpaceX.
Let's go ahead and delete the default, And then we'll make a query for all of the rockets in SpaceX.
Click the box for rockets, and then if you hover over rockets, you'll notice that it returns a query of an array of rockets.
A rocket is a custom type defined by the server, and if we click on it, we can see all the different data properties available there.
And then we can simply click the Checkboxes for the properties that we want returned from this query.
And what you'll also notice is that queries can take arguments.
In this case, we can set a limit to a specific number of rockets or we can offset it if we're doing pagination.
So now that we have a list of rockets, let's go ahead and copy 1 of the IDs and make a request for an individual rocket.
Go ahead and click the rocket box, and you'll notice this query takes an ID as its argument.
Then simply select the properties that you want to read on the rocket object.
And that's really all there is to it when it comes to fetching data from a GraphQL API.
But there are a couple more advanced things that you should know about.
You can reuse values throughout your queries by using variables, which you'll see prefixed with a dollar sign.
But sometimes, you might actually want to change the query entirely based on the value of a table.
For example, you can see we have this gluten free variable, so we might not want to include bread if that option is set to true.
So if the gluten free boolean is true, then it will include bread on this order.
But that's not exactly right, so let's go ahead and do the exact opposite with the skip directive to exclude bread if it's set to true.
And it's also possible that your GraphQL schema has a certain property that returns multiple types or a union type.
For example, our sandwich might come with a side, and that side might either be french fries or a salad.
If it's a salad, then we might want to return the dressing field.
And if it's French fries, then we might want to return the side field.
So as a front end developer, GraphQL gives you a lot of flexibility for structuring your queries, And then it's up to your back end developers to write the code to resolve the queries, which tends to be the more difficult part.
In addition to reading data by making queries, You might also want to write data or modify data on the server by using a mutation.
A mutation works just like a query, but it's a convention that signals that some data will be modified on the server.
So now that you know the basics of GraphQL, I wanna show you how to put it to use in an actual real world front end application.
The most popular way to work with GraphQL from a front end application is to use the Apollo client.
It's essentially a state management library that allows you to write GraphQL queries, then see the results automatically updated in your UI.
Apollo has integrations for all the major JavaScript frameworks like Angular, React, Vue, etcetera, including vanilla web components and also native platforms like iOS and Android.
What I want to show you over the next few minutes is a practical example combining Apollo, GraphQL, and Angular.
Our goal is to create a simple web app that will fetch the recent launches from SpaceX.
Then when we click on a Specific launch, it will take us to the details for that launch along with some pictures.
Now as I mentioned earlier, one of the big advantages of GraphQL is the awesome tooling that it provides, And when combined with TypeScript, it gets even better.
You'll also learn how to convert your GraphQL API into a series of interfaces that you can use directly in your front end application.
So when you combine Angular with GraphQL, you get end to end type safety providing an amazing developer experience.
You can see here I'm in a brand new Angular app, And the first thing I want to do is install the Apollo GraphQL Extension for Versus Code.
It provides syntax highlighting and everything else you need to work with GraphQL and Versus Code.
From there, we'll go to the root of the project and create a new file called apollo config dotjs.
This will tell Apollo where to find our back end API, which in this case should point to the public SpaceX API.
The next step is to generate a couple of components that we can use for the screens in this app.
We have a list view that will show all the recent launches from SpaceX and then also a detail view.
We can generate these components with the Angular CLI, And we'll also set the change detection to on push, which is just a little performance optimization that we can use here because with Apollo and GraphQL, the only thing that we All I need to do is subscribe to observables for our data.
So we don't need to use Angular's built in change detection.
The next thing we'll do is jump into the app routing module and set up routes for these actual components.
We'll set the route route to our launch list component.
That's the default route the user lands on.
Then if they click On one of the launch cards, it will take them to a URL parameter with that ID, then show additional details about that specific launch.
That takes care of our routing configuration.
Now let's go into the app component and delete all of the boilerplate code that comes with the default Angular app.
Just make sure to leave the router outlet.
And now we're ready to write our 1st GraphQL query.
And the reason I want to do this first is because as you'll see in a minute here, we can use the query to automatically generate Angular services, interfaces, and basically everything else we need to work with our back end data.
Go into the launch list component and create a new file called launch list dot graphql.
Now unlike the interactive editor, we'll start out our query by writing the query keyword, and then we can give that a name called past launches list.
And we'll have it take a parameter called limit, which will take an integer argument, and the exclamation mark after the type makes it required.
Then inside the query, we'll write some GraphQL code just like we did earlier in the video.
We'll make a reference to the launches past query that's provided by SpaceX, and then we'll pass in our limit argument.
From there, we'll add the actual fields that we want for each individual launch object like the ID, mission name, links to some images, and so So this defines all the data that we want to show in our launch list component.
And now we'll move over to our launch details component and do the same thing by creating a launch details GraphQL file.
Aisle.
One thing you'll notice on this query is that we have a required type of ID.
The ID type works just like a string, except that it signals that it's a unique value.
Then we can pass that ID to the launch query in GraphQL and then filter by the fields that we actually want from the API.
So now that we have our GraphQL queries in place, We can generate a whole bunch of code automatically.
The first thing we'll need to do is integrate Apollo into this project.
So head over to the command line and run n g add apollo angular.
This command will install our Apollo dependencies and also create a GraphQL module in the app directory.
Go ahead and open up that file and tell it where to find the GraphQL API by modifying this URI variable.
So that takes care of the setup for Apollo, but we want to generate a lot of our code as opposed to writing it manually.
The tool that can help us do that is the GraphQL code generator.
This is a really awesome tool that you can use on both the back end and front end To look at your GraphQL schema and then automatically generate TypeScript interfaces and in our case, Angular services that can fetch the data from the back end.
We have this big long install command and you can copy and paste that from the lesson repo.
Once those are installed, we'll create a codegen.
Yaml file in the root of the project.
This simply tells the code generator where to find our GraphQL files and what to generate once it finds them.
And now that we have that configuration in place, we just need a command to run that will actually run the generator.
We can do that by going into the package JSON and going into the scripts.
We'll create a new command called co gen that runs the generator.
Then we can open up the terminal and run that command, and you'll see it generates a new directory called services with a service that we can use to fetch data from the GraphQL API.
Now the cool thing about the code generator is that it looked at the actual schema of the SpaceX API and also our local GraphQL queries and combined the 2 together.
So we now have an Angular service that has all of the interfaces from the SpaceX API and also methods to fetch the data that we actually want based on our own local GraphQL queries.
That was quite a bit of configuration to get started, but now that we have that done, we really only have to focus on writing components and writing GraphQL queries.
Now let's go ahead and finish things up by writing the components for the user interface.
To make things look nice, I'll go ahead and add Angular Material to this project by running n g add at Angular Material.
And then in the app component, I'll import the material card module.
From there, I'm going to head over to the launch list component typescript, And the first thing I'll do is inject the past launches service in the constructor.
Remember, this service was automatically generated by the code generator.
The service is able to fetch the past launches from SpaceX by using the fetch method, and then we can pass in a limit argument and set it to 30.
The response is going to have some additional data that we don't really need.
So what we'll do is pipe in the map operator, and then we'll just map the response down to the actual data that we want to show in the UI, which in this case will be the response data launches passed.
Now if we go into the template, We can unwrap the past launches observable by using the async pipe, and then we'll set the result as a template variable called past launches.
The past launches will be an array of launch objects, so we can simply loop over them using the n g 4 directive in Angular.
That will give us a material card for each individual launch, and then we can add a router link that will point to that specific launch ID.
So when the user clicks on a card, it will route them to the launch details component.
And then everything after that is pretty standard Angular templating.
We'll display a material card header with an image and then a title and a subtitle.
At this point, you should be able to run n g serve from the terminal and then open up local host 42100 and see a list of launches from the SpaceX API.
Now at this point, when you click on an actual item, it will take you to the launch details component, but we haven't actually built that one out yet.
So let's go ahead and do that now.
Go ahead and open up the launch details component TypeScript, and then we'll import activated route from Angular router and also our launch details GraphQL service.
And then we'll go ahead and inject those in the constructor.
The reason we need activated route is because our GraphQL query takes an ID as its argument, And we get that ID from the URL in the browser.
Angular provides all of the URL parameters as an observable, which we can access on the activated route param map.
When we have that observable, we want to switch to an observable of the actual data from GraphQL.
That's a perfect use case for the RxJS switch map operator.
In other words, once we have the ID parameter from the URL, we'll go ahead and switch to another observable, which in this case is the launch detail service fetch of that specific ID.
And then like we did in the previous example, we'll go ahead and map the response down just to the raw data because we don't need any of the additional metadata that comes back with the response.
And then also like we did in the previous example, we'll unwrap the observable at the top of the file by using the async pipe, and then we'll set a template variable as launch details.
Then from there, we simply add some HTML for the UI and interpolate the values that we want to show to the user.
And keep in mind, I am using a few Custom CSS styles here, you can find those in the full lesson repo.
And if we go back to our app, you'll notice that when we click on a launch, it will show the actual launch details and some additional photos in the We'll launch details and some additional photos in the detail page.
Congratulations.
You now have a full stack Apollo GraphQL powered Angular app.
Now if you want some extra credit, I'd recommend going to the full lesson repo, give it a star, and check out the extra credit section at the very end.
It'll show you how to build an Angular pipe that will format the actual dates of the launches in relative time.
For example, it will say a launch 10 seconds ago, yesterday, 5 days ago, and so on.
I'm gonna go ahead and wrap things up there.
If this video helped you, please like and Subscribe and consider becoming a pro member at FireShip IO to get access to even more content.
Thanks for watching and I will talk to you Tim.
543210.
All engine running.
Lift off.
We have a lift off.

Speaker 0: GraphQL, a query language for APIs. You define a schema for your data, then tell GraphQL how to fetch and supply that schema. And in doing so, amazing things might happen as we'll see in this video. 10,

Speaker 1: 9, ignition sequence start.

Speaker 0: In today's video, you'll learn the fundamental concepts of GraphQL by interacting with the public SpaceX API. If you're new here, like and subscribe, and I'd like to give a special thanks to Arjun Yellamanshelli, who is the mastermind behind this video. If you're looking for a GraphQL expert, you can find his LinkedIn and GitHub in the description below. Let's start by answering the question of what is GraphQL? In the most basic sense, it's a language that allows your front end applications to communicate with your back end applications.

A Rosetta Stone, if you will. A consistent way for your front end to request data from your back end despite any differences in the underlying programming language. For example, your mobile application might need to request a sandwich from your API. It can make that request by sending a GraphQL query. The query will have the same shape that you expect to receive back from the API as JSON.

So in this case, we expect a sandwich object with bread, ham, and cheese. On the server, GraphQL also functions as a runtime for executing queries. The server defines types for the data that's available there, and also resolvers to actually fetch the data from a database or some other data source. Now because everything on the server is strongly typed, we can get some really amazing tooling with GraphQL. To demonstrate this, let's head over to the GraphQL Explorer for the public SpaceX API.

If you're the consumer or using the API in your front end application, you can do introspection to the back end to see what data is available there. As you can see here, we have a whole bunch of different check boxes that represent different queries we can make to the SpaceX API. In the middle panel, We already have an example GraphQL query ready to go. Now go ahead and hit the play button to execute the query, and then you'll see on the right side, we get a JSON payload returned from the server. And what you'll notice is that the properties on this JSON object are identical to the way we structured them in our GraphQL query.

And on top of that, everything is strongly typed. If we hover over a field in our GraphQL query, you can see that it gives us a type. There are several built in types like string, integer, etcetera. And the server can also define its own custom types. So when working with GraphQL as a front end developer, you'll always know the exact shape of the data that you're expecting back from the server.

And speaking of that, let's take a second to look at the differences between REST APIs and GraphQL APIs. REST stands for representational state transfer, and it's the status quo for API design that we've been following for the last 20 years. Now let's say our front end application wants to make a sandwich. In REST, we might make 3 different requests, one for bread, ham, and cheese. Each request is mapped to its own unique URL, and each response from the server would contain the full JSON payload with everything that we need, like the full loaf of bread, a full pig, and a full wedge of cheese.

Even though our front end application doesn't necessarily need all that data, we can just filter it out in the front end code. Now in GraphQL world, things are quite a bit different. Instead of having multiple URL endpoints, we just have a single entry point into the API. So it's the actual query sent from the front end that determines what the back end will return. It's not based on a URL or any specific mapping like that.

In addition, the GraphQL API will only return the actual fields that were requested. Instead of requesting ingredients 1 by 1, we just get the full sandwich all put together. Now let's say we also want to add a side salad and a drink to this query. In GraphQL, it's a simple matter of updating the query, But in REST, we would likely have to make at least 2 more requests to 2 different unique URLs to get this data. The beauty of GraphQL is that it simplifies the way you request data from your front end code.

So obviously, GraphQL is way better than REST, and you should never use REST ever again. Right? Well, it's really not that simple. While GraphQL provides a lot of advantages, there are some disadvantages as well. The biggest disadvantage in my opinion is that there is some added complexity upfront.

You can build a RESTful service with Express JS with, like, 5 lines of code. But with GraphQL, you have some additional dependencies, a type system, and the benefits might not be that substantial if you're a small team or have a relatively simple API. The benefits of GraphQL really kick in when you have multiple developers working with a large API that needs to map together a whole bunch of different back end data sources. In any case, GraphQL is very fun to work with as a developer, so let's go ahead and play around with some queries to SpaceX. Let's go ahead and delete the default, And then we'll make a query for all of the rockets in SpaceX.

Click the box for rockets, and then if you hover over rockets, you'll notice that it returns a query of an array of rockets. A rocket is a custom type defined by the server, and if we click on it, we can see all the different data properties available there. And then we can simply click the Checkboxes for the properties that we want returned from this query. And what you'll also notice is that queries can take arguments. In this case, we can set a limit to a specific number of rockets or we can offset it if we're doing pagination.

So now that we have a list of rockets, let's go ahead and copy 1 of the IDs and make a request for an individual rocket. Go ahead and click the rocket box, and you'll notice this query takes an ID as its argument. Then simply select the properties that you want to read on the rocket object. And that's really all there is to it when it comes to fetching data from a GraphQL API. But there are a couple more advanced things that you should know about.

You can reuse values throughout your queries by using variables, which you'll see prefixed with a dollar sign. But sometimes, you might actually want to change the query entirely based on the value of a table. For example, you can see we have this gluten free variable, so we might not want to include bread if that option is set to true. So if the gluten free boolean is true, then it will include bread on this order. But that's not exactly right, so let's go ahead and do the exact opposite with the skip directive to exclude bread if it's set to true.

And it's also possible that your GraphQL schema has a certain property that returns multiple types or a union type. For example, our sandwich might come with a side, and that side might either be french fries or a salad. If it's a salad, then we might want to return the dressing field. And if it's French fries, then we might want to return the side field. So as a front end developer, GraphQL gives you a lot of flexibility for structuring your queries, And then it's up to your back end developers to write the code to resolve the queries, which tends to be the more difficult part.

In addition to reading data by making queries, You might also want to write data or modify data on the server by using a mutation. A mutation works just like a query, but it's a convention that signals that some data will be modified on the server. So now that you know the basics of GraphQL, I wanna show you how to put it to use in an actual real world front end application. The most popular way to work with GraphQL from a front end application is to use the Apollo client. It's essentially a state management library that allows you to write GraphQL queries, then see the results automatically updated in your UI.

Apollo has integrations for all the major JavaScript frameworks like Angular, React, Vue, etcetera, including vanilla web components and also native platforms like iOS and Android. What I want to show you over the next few minutes is a practical example combining Apollo, GraphQL, and Angular. Our goal is to create a simple web app that will fetch the recent launches from SpaceX. Then when we click on a Specific launch, it will take us to the details for that launch along with some pictures. Now as I mentioned earlier, one of the big advantages of GraphQL is the awesome tooling that it provides, And when combined with TypeScript, it gets even better.

You'll also learn how to convert your GraphQL API into a series of interfaces that you can use directly in your front end application. So when you combine Angular with GraphQL, you get end to end type safety providing an amazing developer experience. You can see here I'm in a brand new Angular app, And the first thing I want to do is install the Apollo GraphQL Extension for Versus Code. It provides syntax highlighting and everything else you need to work with GraphQL and Versus Code. From there, we'll go to the root of the project and create a new file called apollo config dotjs.

This will tell Apollo where to find our back end API, which in this case should point to the public SpaceX API. The next step is to generate a couple of components that we can use for the screens in this app. We have a list view that will show all the recent launches from SpaceX and then also a detail view. We can generate these components with the Angular CLI, And we'll also set the change detection to on push, which is just a little performance optimization that we can use here because with Apollo and GraphQL, the only thing that we All I need to do is subscribe to observables for our data. So we don't need to use Angular's built in change detection.

The next thing we'll do is jump into the app routing module and set up routes for these actual components. We'll set the route route to our launch list component. That's the default route the user lands on. Then if they click On one of the launch cards, it will take them to a URL parameter with that ID, then show additional details about that specific launch. That takes care of our routing configuration.

Now let's go into the app component and delete all of the boilerplate code that comes with the default Angular app. Just make sure to leave the router outlet. And now we're ready to write our 1st GraphQL query. And the reason I want to do this first is because as you'll see in a minute here, we can use the query to automatically generate Angular services, interfaces, and basically everything else we need to work with our back end data. Go into the launch list component and create a new file called launch list dot graphql.

Now unlike the interactive editor, we'll start out our query by writing the query keyword, and then we can give that a name called past launches list. And we'll have it take a parameter called limit, which will take an integer argument, and the exclamation mark after the type makes it required. Then inside the query, we'll write some GraphQL code just like we did earlier in the video. We'll make a reference to the launches past query that's provided by SpaceX, and then we'll pass in our limit argument. From there, we'll add the actual fields that we want for each individual launch object like the ID, mission name, links to some images, and so So this defines all the data that we want to show in our launch list component.

And now we'll move over to our launch details component and do the same thing by creating a launch details GraphQL file. Aisle. One thing you'll notice on this query is that we have a required type of ID. The ID type works just like a string, except that it signals that it's a unique value. Then we can pass that ID to the launch query in GraphQL and then filter by the fields that we actually want from the API.

So now that we have our GraphQL queries in place, We can generate a whole bunch of code automatically. The first thing we'll need to do is integrate Apollo into this project. So head over to the command line and run n g add apollo angular. This command will install our Apollo dependencies and also create a GraphQL module in the app directory. Go ahead and open up that file and tell it where to find the GraphQL API by modifying this URI variable.

So that takes care of the setup for Apollo, but we want to generate a lot of our code as opposed to writing it manually. The tool that can help us do that is the GraphQL code generator. This is a really awesome tool that you can use on both the back end and front end To look at your GraphQL schema and then automatically generate TypeScript interfaces and in our case, Angular services that can fetch the data from the back end. We have this big long install command and you can copy and paste that from the lesson repo. Once those are installed, we'll create a codegen.

Yaml file in the root of the project. This simply tells the code generator where to find our GraphQL files and what to generate once it finds them. And now that we have that configuration in place, we just need a command to run that will actually run the generator. We can do that by going into the package JSON and going into the scripts. We'll create a new command called co gen that runs the generator.

Then we can open up the terminal and run that command, and you'll see it generates a new directory called services with a service that we can use to fetch data from the GraphQL API. Now the cool thing about the code generator is that it looked at the actual schema of the SpaceX API and also our local GraphQL queries and combined the 2 together. So we now have an Angular service that has all of the interfaces from the SpaceX API and also methods to fetch the data that we actually want based on our own local GraphQL queries. That was quite a bit of configuration to get started, but now that we have that done, we really only have to focus on writing components and writing GraphQL queries. Now let's go ahead and finish things up by writing the components for the user interface.

To make things look nice, I'll go ahead and add Angular Material to this project by running n g add at Angular Material. And then in the app component, I'll import the material card module. From there, I'm going to head over to the launch list component typescript, And the first thing I'll do is inject the past launches service in the constructor. Remember, this service was automatically generated by the code generator. The service is able to fetch the past launches from SpaceX by using the fetch method, and then we can pass in a limit argument and set it to 30.

The response is going to have some additional data that we don't really need. So what we'll do is pipe in the map operator, and then we'll just map the response down to the actual data that we want to show in the UI, which in this case will be the response data launches passed. Now if we go into the template, We can unwrap the past launches observable by using the async pipe, and then we'll set the result as a template variable called past launches. The past launches will be an array of launch objects, so we can simply loop over them using the n g 4 directive in Angular. That will give us a material card for each individual launch, and then we can add a router link that will point to that specific launch ID.

So when the user clicks on a card, it will route them to the launch details component. And then everything after that is pretty standard Angular templating. We'll display a material card header with an image and then a title and a subtitle. At this point, you should be able to run n g serve from the terminal and then open up local host 42100 and see a list of launches from the SpaceX API. Now at this point, when you click on an actual item, it will take you to the launch details component, but we haven't actually built that one out yet.

So let's go ahead and do that now. Go ahead and open up the launch details component TypeScript, and then we'll import activated route from Angular router and also our launch details GraphQL service. And then we'll go ahead and inject those in the constructor. The reason we need activated route is because our GraphQL query takes an ID as its argument, And we get that ID from the URL in the browser. Angular provides all of the URL parameters as an observable, which we can access on the activated route param map.

When we have that observable, we want to switch to an observable of the actual data from GraphQL. That's a perfect use case for the RxJS switch map operator. In other words, once we have the ID parameter from the URL, we'll go ahead and switch to another observable, which in this case is the launch detail service fetch of that specific ID. And then like we did in the previous example, we'll go ahead and map the response down just to the raw data because we don't need any of the additional metadata that comes back with the response. And then also like we did in the previous example, we'll unwrap the observable at the top of the file by using the async pipe, and then we'll set a template variable as launch details.

Then from there, we simply add some HTML for the UI and interpolate the values that we want to show to the user. And keep in mind, I am using a few Custom CSS styles here, you can find those in the full lesson repo. And if we go back to our app, you'll notice that when we click on a launch, it will show the actual launch details and some additional photos in the We'll launch details and some additional photos in the detail page. Congratulations. You now have a full stack Apollo GraphQL powered Angular app.

Now if you want some extra credit, I'd recommend going to the full lesson repo, give it a star, and check out the extra credit section at the very end. It'll show you how to build an Angular pipe that will format the actual dates of the launches in relative time. For example, it will say a launch 10 seconds ago, yesterday, 5 days ago, and so on. I'm gonna go ahead and wrap things up there. If this video helped you, please like and Subscribe and consider becoming a pro member at FireShip IO to get access to even more content.

Thanks for watching and I will talk to you Tim.

Speaker 1: 543210. All engine running. Lift off. We have a lift off.
GraphQL, a query language for APIs. You define a schema for your data, then tell GraphQL how to fetch and supply that schema. And in doing so, amazing things might happen as we'll see in this video. 10, 9, ignition sequence start. In today's video, you'll learn the fundamental concepts of GraphQL by interacting with the public SpaceX API. If you're new here, like and subscribe, and I'd like to give a special thanks to Arjun Yellamanshelli, who is the mastermind behind this video. If you're looking for a GraphQL expert, you can find his LinkedIn and GitHub in the description below. Let's start by answering the question of what is GraphQL?
In the most basic sense, it's a language that allows your front end applications to communicate with your back end applications. A Rosetta Stone, if you will. A consistent way for your front end to request data from your back end despite any differences in the underlying programming language. For example, your mobile application might need to request a sandwich from your API. It can make that request by sending a GraphQL query. The query will have the same shape that you expect to receive back from the API as JSON.
languages
databases
So in this case, we expect a sandwich object with bread, ham, and cheese. On the server, GraphQL also functions as a runtime for executing queries. The server defines types for the data that's available there, and also resolvers to actually fetch the data from a database or some other data source. Now because everything on the server is strongly typed, we can get some really amazing tooling with GraphQL. To demonstrate this, let's head over to the GraphQL Explorer for the public SpaceX API. If you're the consumer or using the API in your front end application, you can do introspection to the back end to see what data is available there. As you can see here, we have a whole bunch of different check boxes that represent different queries we can make to the SpaceX API. In the middle panel, We already have an example GraphQL query ready to go. Now go ahead and hit the play button to execute the query, and then you'll see on the right side, we get a JSON payload returned from the server.
databases
data management
data
programming
And what you'll notice is that the properties on this JSON object are identical to the way we structured them in our GraphQL query. And on top of that, everything is strongly typed.
If we hover over a field in our GraphQL query, you can see that it gives us a type. There are several built in types like string, integer, etcetera. And the server can also define its own custom types. So when working with GraphQL as a front end developer, you'll always know the exact shape of the data that you're expecting back from the server. And speaking of that, let's take a second to look at the differences between REST APIs and GraphQL APIs.
databases
REST stands for representational state transfer, and it's the status quo for API design that we've been following for the last 20 years. Now let's say our front end application wants to make a sandwich. In REST, we might make 3 different requests, one for bread, ham, and cheese. Each request is mapped to its own unique URL, and each response from the server would contain the full JSON payload with everything that we need, like the full loaf of bread, a full pig, and a full wedge of cheese. Even though our front end application doesn't necessarily need all that data, we can just filter it out in the front end code. Now in GraphQL world, things are quite a bit different. Instead of having multiple URL endpoints, we just have a single entry point into the API. So it's the actual query sent from the front end that determines what the back end will return. It's not based on a URL or any specific mapping like that. In addition, the GraphQL API will only return the actual fields that were requested.
Instead of requesting ingredients 1 by 1, we just get the full sandwich all put together. Now let's say we also want to add a side salad and a drink to this query. In GraphQL, it's a simple matter of updating the query, But in REST, we would likely have to make at least 2 more requests to 2 different unique URLs to get this data.
food
The beauty of GraphQL is that it simplifies the way you request data from your front end code. So obviously, GraphQL is way better than REST, and you should never use REST ever again. Right? Well, it's really not that simple. While GraphQL provides a lot of advantages, there are some disadvantages as well. The biggest disadvantage in my opinion is that there is some added complexity upfront. You can build a RESTful service with Express JS with, like, 5 lines of code. But with GraphQL, you have some additional dependencies, a type system, and the benefits might not be that substantial if you're a small team or have a relatively simple API.
The benefits of GraphQL really kick in when you have multiple developers working with a large API that needs to map together a whole bunch of different back end data sources. In any case, GraphQL is very fun to work with as a developer, so let's go ahead and play around with some queries to SpaceX. Let's go ahead and delete the default, And then we'll make a query for all of the rockets in SpaceX. Click the box for rockets, and then if you hover over rockets, you'll notice that it returns a query of an array of rockets. A rocket is a custom type defined by the server, and if we click on it, we can see all the different data properties available there. And then we can simply click the Checkboxes for the properties that we want returned from this query. And what you'll also notice is that queries can take arguments.
rockets
databases
In this case, we can set a limit to a specific number of rockets or we can offset it if we're doing pagination. So now that we have a list of rockets, let's go ahead and copy 1 of the IDs and make a request for an individual rocket. Go ahead and click the rocket box, and you'll notice this query takes an ID as its argument. Then simply select the properties that you want to read on the rocket object. And that's really all there is to it when it comes to fetching data from a GraphQL API. But there are a couple more advanced things that you should know about. You can reuse values throughout your queries by using variables, which you'll see prefixed with a dollar sign. But sometimes, you might actually want to change the query entirely based on the value of a table.
databases
rockets
data
data management
For example, you can see we have this gluten free variable, so we might not want to include bread if that option is set to true. So if the gluten free boolean is true, then it will include bread on this order. But that's not exactly right, so let's go ahead and do the exact opposite with the skip directive to exclude bread if it's set to true. And it's also possible that your GraphQL schema has a certain property that returns multiple types or a union type. For example, our sandwich might come with a side, and that side might either be french fries or a salad.
If it's a salad, then we might want to return the dressing field. And if it's French fries, then we might want to return the side field. So as a front end developer, GraphQL gives you a lot of flexibility for structuring your queries, And then it's up to your back end developers to write the code to resolve the queries, which tends to be the more difficult part. In addition to reading data by making queries, You might also want to write data or modify data on the server by using a mutation. A mutation works just like a query, but it's a convention that signals that some data will be modified on the server. So now that you know the basics of GraphQL, I wanna show you how to put it to use in an actual real world front end application.
databases
data management
The most popular way to work with GraphQL from a front end application is to use the Apollo client. It's essentially a state management library that allows you to write GraphQL queries, then see the results automatically updated in your UI. Apollo has integrations for all the major JavaScript frameworks like Angular, React, Vue, etcetera, including vanilla web components and also native platforms like iOS and Android.
databases
What I want to show you over the next few minutes is a practical example combining Apollo, GraphQL, and Angular. Our goal is to create a simple web app that will fetch the recent launches from SpaceX.
Then when we click on a Specific launch, it will take us to the details for that launch along with some pictures. Now as I mentioned earlier, one of the big advantages of GraphQL is the awesome tooling that it provides, And when combined with TypeScript, it gets even better.
databases
You'll also learn how to convert your GraphQL API into a series of interfaces that you can use directly in your front end application. So when you combine Angular with GraphQL, you get end to end type safety providing an amazing developer experience. You can see here I'm in a brand new Angular app, And the first thing I want to do is install the Apollo GraphQL Extension for Versus Code. It provides syntax highlighting and everything else you need to work with GraphQL and Versus Code. From there, we'll go to the root of the project and create a new file called apollo config dotjs.
This will tell Apollo where to find our back end API, which in this case should point to the public SpaceX API. The next step is to generate a couple of components that we can use for the screens in this app. We have a list view that will show all the recent launches from SpaceX and then also a detail view. We can generate these components with the Angular CLI, And we'll also set the change detection to on push, which is just a little performance optimization that we can use here because with Apollo and GraphQL, the only thing that we All I need to do is subscribe to observables for our data.
space exploration
modeling
visualization
So we don't need to use Angular's built in change detection. The next thing we'll do is jump into the app routing module and set up routes for these actual components. We'll set the route route to our launch list component. That's the default route the user lands on. Then if they click On one of the launch cards, it will take them to a URL parameter with that ID, then show additional details about that specific launch.
That takes care of our routing configuration. Now let's go into the app component and delete all of the boilerplate code that comes with the default Angular app. Just make sure to leave the router outlet. And now we're ready to write our 1st GraphQL query. And the reason I want to do this first is because as you'll see in a minute here, we can use the query to automatically generate Angular services, interfaces, and basically everything else we need to work with our back end data.
databases
Go into the launch list component and create a new file called launch list dot graphql. Now unlike the interactive editor, we'll start out our query by writing the query keyword, and then we can give that a name called past launches list. And we'll have it take a parameter called limit, which will take an integer argument, and the exclamation mark after the type makes it required.
Then inside the query, we'll write some GraphQL code just like we did earlier in the video. We'll make a reference to the launches past query that's provided by SpaceX, and then we'll pass in our limit argument. From there, we'll add the actual fields that we want for each individual launch object like the ID, mission name, links to some images, and so So this defines all the data that we want to show in our launch list component.
databases
data management
And now we'll move over to our launch details component and do the same thing by creating a launch details GraphQL file. Aisle. One thing you'll notice on this query is that we have a required type of ID. The ID type works just like a string, except that it signals that it's a unique value. Then we can pass that ID to the launch query in GraphQL and then filter by the fields that we actually want from the API. So now that we have our GraphQL queries in place, We can generate a whole bunch of code automatically.
databases
programming
data management
The first thing we'll need to do is integrate Apollo into this project. So head over to the command line and run n g add apollo angular. This command will install our Apollo dependencies and also create a GraphQL module in the app directory. Go ahead and open up that file and tell it where to find the GraphQL API by modifying this URI variable. So that takes care of the setup for Apollo, but we want to generate a lot of our code as opposed to writing it manually.
The tool that can help us do that is the GraphQL code generator. This is a really awesome tool that you can use on both the back end and front end To look at your GraphQL schema and then automatically generate TypeScript interfaces and in our case, Angular services that can fetch the data from the back end. We have this big long install command and you can copy and paste that from the lesson repo. Once those are installed, we'll create a codegen. Yaml file in the root of the project. This simply tells the code generator where to find our GraphQL files and what to generate once it finds them.
databases
software development
programming
software
And now that we have that configuration in place, we just need a command to run that will actually run the generator. We can do that by going into the package JSON and going into the scripts. We'll create a new command called co gen that runs the generator. Then we can open up the terminal and run that command, and you'll see it generates a new directory called services with a service that we can use to fetch data from the GraphQL API. Now the cool thing about the code generator is that it looked at the actual schema of the SpaceX API and also our local GraphQL queries and combined the 2 together. So we now have an Angular service that has all of the interfaces from the SpaceX API and also methods to fetch the data that we actually want based on our own local GraphQL queries. That was quite a bit of configuration to get started, but now that we have that done, we really only have to focus on writing components and writing GraphQL queries.
programming
databases
Now let's go ahead and finish things up by writing the components for the user interface. To make things look nice, I'll go ahead and add Angular Material to this project by running n g add at Angular Material. And then in the app component, I'll import the material card module. From there, I'm going to head over to the launch list component typescript, And the first thing I'll do is inject the past launches service in the constructor. Remember, this service was automatically generated by the code generator.
infrastructure
software development
software
graphic design
materials
The service is able to fetch the past launches from SpaceX by using the fetch method, and then we can pass in a limit argument and set it to 30.
The response is going to have some additional data that we don't really need. So what we'll do is pipe in the map operator, and then we'll just map the response down to the actual data that we want to show in the UI, which in this case will be the response data launches passed.
data
Now if we go into the template, We can unwrap the past launches observable by using the async pipe, and then we'll set the result as a template variable called past launches. The past launches will be an array of launch objects, so we can simply loop over them using the n g 4 directive in Angular. That will give us a material card for each individual launch, and then we can add a router link that will point to that specific launch ID. So when the user clicks on a card, it will route them to the launch details component. And then everything after that is pretty standard Angular templating. We'll display a material card header with an image and then a title and a subtitle. At this point, you should be able to run n g serve from the terminal and then open up local host 42100 and see a list of launches from the SpaceX API. Now at this point, when you click on an actual item, it will take you to the launch details component, but we haven't actually built that one out yet. So let's go ahead and do that now. Go ahead and open up the launch details component TypeScript, and then we'll import activated route from Angular router and also our launch details GraphQL service. And then we'll go ahead and inject those in the constructor. The reason we need activated route is because our GraphQL query takes an ID as its argument, And we get that ID from the URL in the browser. Angular provides all of the URL parameters as an observable, which we can access on the activated route param map. When we have that observable, we want to switch to an observable of the actual data from GraphQL. That's a perfect use case for the RxJS switch map operator. In other words, once we have the ID parameter from the URL, we'll go ahead and switch to another observable, which in this case is the launch detail service fetch of that specific ID.
And then like we did in the previous example, we'll go ahead and map the response down just to the raw data because we don't need any of the additional metadata that comes back with the response. And then also like we did in the previous example, we'll unwrap the observable at the top of the file by using the async pipe, and then we'll set a template variable as launch details. Then from there, we simply add some HTML for the UI and interpolate the values that we want to show to the user.
data
programming
And keep in mind, I am using a few Custom CSS styles here, you can find those in the full lesson repo. And if we go back to our app, you'll notice that when we click on a launch, it will show the actual launch details and some additional photos in the We'll launch details and some additional photos in the detail page. Congratulations. You now have a full stack Apollo GraphQL powered Angular app. Now if you want some extra credit, I'd recommend going to the full lesson repo, give it a star, and check out the extra credit section at the very end. It'll show you how to build an Angular pipe that will format the actual dates of the launches in relative time. For example, it will say a launch 10 seconds ago, yesterday, 5 days ago, and so on.
I'm gonna go ahead and wrap things up there. If this video helped you, please like and Subscribe and consider becoming a pro member at FireShip IO to get access to even more content. Thanks for watching and I will talk to you Tim. 543210. All engine running. Lift off. We have a lift off.
automobiles
vehicles
electric vehicles
streaming
aerospace
video gaming
youtube
aircraft
media
GraphQL, a query language for APIs. You define a schema for your data, then tell GraphQL how to fetch and supply that schema. And in doing so, amazing things might happen as we'll see in this video. 10, 9, ignition sequence start. In today's video, you'll learn the fundamental concepts of GraphQL by interacting with the public SpaceX API. If you're new here, like and subscribe, and I'd like to give a special thanks to Arjun Yellamanshelli, who is the mastermind behind this video. If you're looking for a GraphQL expert, you can find his LinkedIn and GitHub in the description below. Let's start by answering the question of what is GraphQL? In the most basic sense, it's a language that allows your front end applications to communicate with your back end applications. A Rosetta Stone, if you will. A consistent way for your front end to request data from your back end despite any differences in the underlying programming language. For example, your mobile application might need to request a sandwich from your API. It can make that request by sending a GraphQL query. The query will have the same shape that you expect to receive back from the API as JSON. So in this case, we expect a sandwich object with bread, ham, and cheese. On the server, GraphQL also functions as a runtime for executing queries. The server defines types for the data that's available there, and also resolvers to actually fetch the data from a database or some other data source. Now because everything on the server is strongly typed, we can get some really amazing tooling with GraphQL. To demonstrate this, let's head over to the GraphQL Explorer for the public SpaceX API. If you're the consumer or using the API in your front end application, you can do introspection to the back end to see what data is available there. As you can see here, we have a whole bunch of different check boxes that represent different queries we can make to the SpaceX API. In the middle panel, We already have an example GraphQL query ready to go. Now go ahead and hit the play button to execute the query, and then you'll see on the right side, we get a JSON payload returned from the server. And what you'll notice is that the properties on this JSON object are identical to the way we structured them in our GraphQL query. And on top of that, everything is strongly typed. If we hover over a field in our GraphQL query, you can see that it gives us a type. There are several built in types like string, integer, etcetera. And the server can also define its own custom types. So when working with GraphQL as a front end developer, you'll always know the exact shape of the data that you're expecting back from the server. And speaking of that, let's take a second to look at the differences between REST APIs and GraphQL APIs. REST stands for representational state transfer, and it's the status quo for API design that we've been following for the last 20 years. Now let's say our front end application wants to make a sandwich. In REST, we might make 3 different requests, one for bread, ham, and cheese. Each request is mapped to its own unique URL, and each response from the server would contain the full JSON payload with everything that we need, like the full loaf of bread, a full pig, and a full wedge of cheese. Even though our front end application doesn't necessarily need all that data, we can just filter it out in the front end code. Now in GraphQL world, things are quite a bit different. Instead of having multiple URL endpoints, we just have a single entry point into the API. So it's the actual query sent from the front end that determines what the back end will return. It's not based on a URL or any specific mapping like that. In addition, the GraphQL API will only return the actual fields that were requested. Instead of requesting ingredients 1 by 1, we just get the full sandwich all put together. Now let's say we also want to add a side salad and a drink to this query. In GraphQL, it's a simple matter of updating the query, But in REST, we would likely have to make at least 2 more requests to 2 different unique URLs to get this data. The beauty of GraphQL is that it simplifies the way you request data from your front end code. So obviously, GraphQL is way better than REST, and you should never use REST ever again. Right? Well, it's really not that simple. While GraphQL provides a lot of advantages, there are some disadvantages as well. The biggest disadvantage in my opinion is that there is some added complexity upfront. You can build a RESTful service with Express JS with, like, 5 lines of code. But with GraphQL, you have some additional dependencies, a type system, and the benefits might not be that substantial if you're a small team or have a relatively simple API. The benefits of GraphQL really kick in when you have multiple developers working with a large API that needs to map together a whole bunch of different back end data sources. In any case, GraphQL is very fun to work with as a developer, so let's go ahead and play around with some queries to SpaceX. Let's go ahead and delete the default, And then we'll make a query for all of the rockets in SpaceX. Click the box for rockets, and then if you hover over rockets, you'll notice that it returns a query of an array of rockets. A rocket is a custom type defined by the server, and if we click on it, we can see all the different data properties available there. And then we can simply click the Checkboxes for the properties that we want returned from this query. And what you'll also notice is that queries can take arguments. In this case, we can set a limit to a specific number of rockets or we can offset it if we're doing pagination. So now that we have a list of rockets, let's go ahead and copy 1 of the IDs and make a request for an individual rocket. Go ahead and click the rocket box, and you'll notice this query takes an ID as its argument. Then simply select the properties that you want to read on the rocket object. And that's really all there is to it when it comes to fetching data from a GraphQL API. But there are a couple more advanced things that you should know about. You can reuse values throughout your queries by using variables, which you'll see prefixed with a dollar sign. But sometimes, you might actually want to change the query entirely based on the value of a table. For example, you can see we have this gluten free variable, so we might not want to include bread if that option is set to true. So if the gluten free boolean is true, then it will include bread on this order. But that's not exactly right, so let's go ahead and do the exact opposite with the skip directive to exclude bread if it's set to true. And it's also possible that your GraphQL schema has a certain property that returns multiple types or a union type. For example, our sandwich might come with a side, and that side might either be french fries or a salad. If it's a salad, then we might want to return the dressing field. And if it's French fries, then we might want to return the side field. So as a front end developer, GraphQL gives you a lot of flexibility for structuring your queries, And then it's up to your back end developers to write the code to resolve the queries, which tends to be the more difficult part. In addition to reading data by making queries, You might also want to write data or modify data on the server by using a mutation. A mutation works just like a query, but it's a convention that signals that some data will be modified on the server. So now that you know the basics of GraphQL, I wanna show you how to put it to use in an actual real world front end application. The most popular way to work with GraphQL from a front end application is to use the Apollo client. It's essentially a state management library that allows you to write GraphQL queries, then see the results automatically updated in your UI. Apollo has integrations for all the major JavaScript frameworks like Angular, React, Vue, etcetera, including vanilla web components and also native platforms like iOS and Android. What I want to show you over the next few minutes is a practical example combining Apollo, GraphQL, and Angular. Our goal is to create a simple web app that will fetch the recent launches from SpaceX. Then when we click on a Specific launch, it will take us to the details for that launch along with some pictures. Now as I mentioned earlier, one of the big advantages of GraphQL is the awesome tooling that it provides, And when combined with TypeScript, it gets even better. You'll also learn how to convert your GraphQL API into a series of interfaces that you can use directly in your front end application. So when you combine Angular with GraphQL, you get end to end type safety providing an amazing developer experience. You can see here I'm in a brand new Angular app, And the first thing I want to do is install the Apollo GraphQL Extension for Versus Code. It provides syntax highlighting and everything else you need to work with GraphQL and Versus Code. From there, we'll go to the root of the project and create a new file called apollo config dotjs. This will tell Apollo where to find our back end API, which in this case should point to the public SpaceX API. The next step is to generate a couple of components that we can use for the screens in this app. We have a list view that will show all the recent launches from SpaceX and then also a detail view. We can generate these components with the Angular CLI, And we'll also set the change detection to on push, which is just a little performance optimization that we can use here because with Apollo and GraphQL, the only thing that we All I need to do is subscribe to observables for our data. So we don't need to use Angular's built in change detection. The next thing we'll do is jump into the app routing module and set up routes for these actual components. We'll set the route route to our launch list component. That's the default route the user lands on. Then if they click On one of the launch cards, it will take them to a URL parameter with that ID, then show additional details about that specific launch. That takes care of our routing configuration. Now let's go into the app component and delete all of the boilerplate code that comes with the default Angular app. Just make sure to leave the router outlet. And now we're ready to write our 1st GraphQL query. And the reason I want to do this first is because as you'll see in a minute here, we can use the query to automatically generate Angular services, interfaces, and basically everything else we need to work with our back end data. Go into the launch list component and create a new file called launch list dot graphql. Now unlike the interactive editor, we'll start out our query by writing the query keyword, and then we can give that a name called past launches list. And we'll have it take a parameter called limit, which will take an integer argument, and the exclamation mark after the type makes it required. Then inside the query, we'll write some GraphQL code just like we did earlier in the video. We'll make a reference to the launches past query that's provided by SpaceX, and then we'll pass in our limit argument. From there, we'll add the actual fields that we want for each individual launch object like the ID, mission name, links to some images, and so So this defines all the data that we want to show in our launch list component. And now we'll move over to our launch details component and do the same thing by creating a launch details GraphQL file. Aisle. One thing you'll notice on this query is that we have a required type of ID. The ID type works just like a string, except that it signals that it's a unique value. Then we can pass that ID to the launch query in GraphQL and then filter by the fields that we actually want from the API. So now that we have our GraphQL queries in place, We can generate a whole bunch of code automatically. The first thing we'll need to do is integrate Apollo into this project. So head over to the command line and run n g add apollo angular. This command will install our Apollo dependencies and also create a GraphQL module in the app directory. Go ahead and open up that file and tell it where to find the GraphQL API by modifying this URI variable. So that takes care of the setup for Apollo, but we want to generate a lot of our code as opposed to writing it manually. The tool that can help us do that is the GraphQL code generator. This is a really awesome tool that you can use on both the back end and front end To look at your GraphQL schema and then automatically generate TypeScript interfaces and in our case, Angular services that can fetch the data from the back end. We have this big long install command and you can copy and paste that from the lesson repo. Once those are installed, we'll create a codegen. Yaml file in the root of the project. This simply tells the code generator where to find our GraphQL files and what to generate once it finds them. And now that we have that configuration in place, we just need a command to run that will actually run the generator. We can do that by going into the package JSON and going into the scripts. We'll create a new command called co gen that runs the generator. Then we can open up the terminal and run that command, and you'll see it generates a new directory called services with a service that we can use to fetch data from the GraphQL API. Now the cool thing about the code generator is that it looked at the actual schema of the SpaceX API and also our local GraphQL queries and combined the 2 together. So we now have an Angular service that has all of the interfaces from the SpaceX API and also methods to fetch the data that we actually want based on our own local GraphQL queries. That was quite a bit of configuration to get started, but now that we have that done, we really only have to focus on writing components and writing GraphQL queries. Now let's go ahead and finish things up by writing the components for the user interface. To make things look nice, I'll go ahead and add Angular Material to this project by running n g add at Angular Material. And then in the app component, I'll import the material card module. From there, I'm going to head over to the launch list component typescript, And the first thing I'll do is inject the past launches service in the constructor. Remember, this service was automatically generated by the code generator. The service is able to fetch the past launches from SpaceX by using the fetch method, and then we can pass in a limit argument and set it to 30. The response is going to have some additional data that we don't really need. So what we'll do is pipe in the map operator, and then we'll just map the response down to the actual data that we want to show in the UI, which in this case will be the response data launches passed. Now if we go into the template, We can unwrap the past launches observable by using the async pipe, and then we'll set the result as a template variable called past launches. The past launches will be an array of launch objects, so we can simply loop over them using the n g 4 directive in Angular. That will give us a material card for each individual launch, and then we can add a router link that will point to that specific launch ID. So when the user clicks on a card, it will route them to the launch details component. And then everything after that is pretty standard Angular templating. We'll display a material card header with an image and then a title and a subtitle. At this point, you should be able to run n g serve from the terminal and then open up local host 42100 and see a list of launches from the SpaceX API. Now at this point, when you click on an actual item, it will take you to the launch details component, but we haven't actually built that one out yet. So let's go ahead and do that now. Go ahead and open up the launch details component TypeScript, and then we'll import activated route from Angular router and also our launch details GraphQL service. And then we'll go ahead and inject those in the constructor. The reason we need activated route is because our GraphQL query takes an ID as its argument, And we get that ID from the URL in the browser. Angular provides all of the URL parameters as an observable, which we can access on the activated route param map. When we have that observable, we want to switch to an observable of the actual data from GraphQL. That's a perfect use case for the RxJS switch map operator. In other words, once we have the ID parameter from the URL, we'll go ahead and switch to another observable, which in this case is the launch detail service fetch of that specific ID. And then like we did in the previous example, we'll go ahead and map the response down just to the raw data because we don't need any of the additional metadata that comes back with the response. And then also like we did in the previous example, we'll unwrap the observable at the top of the file by using the async pipe, and then we'll set a template variable as launch details. Then from there, we simply add some HTML for the UI and interpolate the values that we want to show to the user. And keep in mind, I am using a few Custom CSS styles here, you can find those in the full lesson repo. And if we go back to our app, you'll notice that when we click on a launch, it will show the actual launch details and some additional photos in the We'll launch details and some additional photos in the detail page. Congratulations. You now have a full stack Apollo GraphQL powered Angular app. Now if you want some extra credit, I'd recommend going to the full lesson repo, give it a star, and check out the extra credit section at the very end. It'll show you how to build an Angular pipe that will format the actual dates of the launches in relative time. For example, it will say a launch 10 seconds ago, yesterday, 5 days ago, and so on. I'm gonna go ahead and wrap things up there. If this video helped you, please like and Subscribe and consider becoming a pro member at FireShip IO to get access to even more content. Thanks for watching and I will talk to you Tim. 543210. All engine running. Lift off. We have a lift off.
GraphQL,
graphql
a
a
query
query
language
language
for
for
APIs.
apis
You
you
define
define
a
a
schema
schema
for
for
your
your
data,
data
then
then
tell
tell
GraphQL
graphql
how
how
to
to
fetch
fetch
and
and
supply
supply
that
that
schema.
schema
And
and
in
in
doing
doing
so,
so
amazing
amazing
things
things
might
might
happen
happen
as
as
we'll
we'll
see
see
in
in
this
this
video.
video
10,
10
9,
9
ignition
ignition
sequence
sequence
start.
start
In
in
today's
today's
video,
video
you'll
you'll
learn
learn
the
the
fundamental
fundamental
concepts
concepts
of
of
GraphQL
graphql
by
by
interacting
interacting
with
with
the
the
public
public
SpaceX
spacex
API.
api
If
if
you're
you're
new
new
here,
here
like
like
and
and
subscribe,
subscribe
and
and
I'd
i'd
like
like
to
to
give
give
a
a
special
special
thanks
thanks
to
to
Arjun
arjun
Yellamanshelli,
yellamanshelli
who
who
is
is
the
the
mastermind
mastermind
behind
behind
this
this
video.
video
If
if
you're
you're
looking
looking
for
for
a
a
GraphQL
graphql
expert,
expert
you
you
can
can
find
find
his
his
LinkedIn
linkedin
and
and
GitHub
github
in
in
the
the
description
description
below.
below
Let's
let's
start
start
by
by
answering
answering
the
the
question
question
of
of
what
what
is
is
GraphQL?
graphql
In
in
the
the
most
most
basic
basic
sense,
sense
it's
it's
a
a
language
language
that
that
allows
allows
your
your
front
front
end
end
applications
applications
to
to
communicate
communicate
with
with
your
your
back
back
end
end
applications.
applications
A
a
Rosetta
rosetta
Stone,
stone
if
if
you
you
will.
will
A
a
consistent
consistent
way
way
for
for
your
your
front
front
end
end
to
to
request
request
data
data
from
from
your
your
back
back
end
end
despite
despite
any
any
differences
differences
in
in
the
the
underlying
underlying
programming
programming
language.
language
For
for
example,
example
your
your
mobile
mobile
application
application
might
might
need
need
to
to
request
request
a
a
sandwich
sandwich
from
from
your
your
API.
api
It
it
can
can
make
make
that
that
request
request
by
by
sending
sending
a
a
GraphQL
graphql
query.
query
The
the
query
query
will
will
have
have
the
the
same
same
shape
shape
that
that
you
you
expect
expect
to
to
receive
receive
back
back
from
from
the
the
API
api
as
as
JSON.
json
So
so
in
in
this
this
case,
case
we
we
expect
expect
a
a
sandwich
sandwich
object
object
with
with
bread,
bread
ham,
ham
and
and
cheese.
cheese
On
on
the
the
server,
server
GraphQL
graphql
also
also
functions
functions
as
as
a
a
runtime
runtime
for
for
executing
executing
queries.
queries
The
the
server
server
defines
defines
types
types
for
for
the
the
data
data
that's
that's
available
available
there,
there
and
and
also
also
resolvers
resolvers
to
to
actually
actually
fetch
fetch
the
the
data
data
from
from
a
a
database
database
or
or
some
some
other
other
data
data
source.
source
Now
now
because
because
everything
everything
on
on
the
the
server
server
is
is
strongly
strongly
typed,
typed
we
we
can
can
get
get
some
some
really
really
amazing
amazing
tooling
tooling
with
with
GraphQL.
graphql
To
to
demonstrate
demonstrate
this,
this
let's
let's
head
head
over
over
to
to
the
the
GraphQL
graphql
Explorer
explorer
for
for
the
the
public
public
SpaceX
spacex
API.
api
If
if
you're
you're
the
the
consumer
consumer
or
or
using
using
the
the
API
api
in
in
your
your
front
front
end
end
application,
application
you
you
can
can
do
do
introspection
introspection
to
to
the
the
back
back
end
end
to
to
see
see
what
what
data
data
is
is
available
available
there.
there
As
as
you
you
can
can
see
see
here,
here
we
we
have
have
a
a
whole
whole
bunch
bunch
of
of
different
different
check
check
boxes
boxes
that
that
represent
represent
different
different
queries
queries
we
we
can
can
make
make
to
to
the
the
SpaceX
spacex
API.
api
In
in
the
the
middle
middle
panel,
panel
We
we
already
already
have
have
an
an
example
example
GraphQL
graphql
query
query
ready
ready
to
to
go.
go
Now
now
go
go
ahead
ahead
and
and
hit
hit
the
the
play
play
button
button
to
to
execute
execute
the
the
query,
query
and
and
then
then
you'll
you'll
see
see
on
on
the
the
right
right
side,
side
we
we
get
get
a
a
JSON
json
payload
payload
returned
returned
from
from
the
the
server.
server
And
and
what
what
you'll
you'll
notice
notice
is
is
that
that
the
the
properties
properties
on
on
this
this
JSON
json
object
object
are
are
identical
identical
to
to
the
the
way
way
we
we
structured
structured
them
them
in
in
our
our
GraphQL
graphql
query.
query
And
and
on
on
top
top
of
of
that,
that
everything
everything
is
is
strongly
strongly
typed.
typed
If
if
we
we
hover
hover
over
over
a
a
field
field
in
in
our
our
GraphQL
graphql
query,
query
you
you
can
can
see
see
that
that
it
it
gives
gives
us
us
a
a
type.
type
There
there
are
are
several
several
built
built
in
in
types
types
like
like
string,
string
integer,
integer
etcetera.
etcetera
And
and
the
the
server
server
can
can
also
also
define
define
its
its
own
own
custom
custom
types.
types
So
so
when
when
working
working
with
with
GraphQL
graphql
as
as
a
a
front
front
end
end
developer,
developer
you'll
you'll
always
always
know
know
the
the
exact
exact
shape
shape
of
of
the
the
data
data
that
that
you're
you're
expecting
expecting
back
back
from
from
the
the
server.
server
And
and
speaking
speaking
of
of
that,
that
let's
let's
take
take
a
a
second
second
to
to
look
look
at
at
the
the
differences
differences
between
between
REST
rest
APIs
apis
and
and
GraphQL
graphql
APIs.
apis
REST
rest
stands
stands
for
for
representational
representational
state
state
transfer,
transfer
and
and
it's
it's
the
the
status
status
quo
quo
for
for
API
api
design
design
that
that
we've
we've
been
been
following
following
for
for
the
the
last
last
20
20
years.
years
Now
now
let's
let's
say
say
our
our
front
front
end
end
application
application
wants
wants
to
to
make
make
a
a
sandwich.
sandwich
In
in
REST,
rest
we
we
might
might
make
make
3
3
different
different
requests,
requests
one
one
for
for
bread,
bread
ham,
ham
and
and
cheese.
cheese
Each
each
request
request
is
is
mapped
mapped
to
to
its
its
own
own
unique
unique
URL,
url
and
and
each
each
response
response
from
from
the
the
server
server
would
would
contain
contain
the
the
full
full
JSON
json
payload
payload
with
with
everything
everything
that
that
we
we
need,
need
like
like
the
the
full
full
loaf
loaf
of
of
bread,
bread
a
a
full
full
pig,
pig
and
and
a
a
full
full
wedge
wedge
of
of
cheese.
cheese
Even
even
though
though
our
our
front
front
end
end
application
application
doesn't
doesn't
necessarily
necessarily
need
need
all
all
that
that
data,
data
we
we
can
can
just
just
filter
filter
it
it
out
out
in
in
the
the
front
front
end
end
code.
code
Now
now
in
in
GraphQL
graphql
world,
world
things
things
are
are
quite
quite
a
a
bit
bit
different.
different
Instead
instead
of
of
having
having
multiple
multiple
URL
url
endpoints,
endpoints
we
we
just
just
have
have
a
a
single
single
entry
entry
point
point
into
into
the
the
API.
api
So
so
it's
it's
the
the
actual
actual
query
query
sent
sent
from
from
the
the
front
front
end
end
that
that
determines
determines
what
what
the
the
back
back
end
end
will
will
return.
return
It's
it's
not
not
based
based
on
on
a
a
URL
url
or
or
any
any
specific
specific
mapping
mapping
like
like
that.
that
In
in
addition,
addition
the
the
GraphQL
graphql
API
api
will
will
only
only
return
return
the
the
actual
actual
fields
fields
that
that
were
were
requested.
requested
Instead
instead
of
of
requesting
requesting
ingredients
ingredients
1
1
by
by
1,
1
we
we
just
just
get
get
the
the
full
full
sandwich
sandwich
all
all
put
put
together.
together
Now
now
let's
let's
say
say
we
we
also
also
want
want
to
to
add
add
a
a
side
side
salad
salad
and
and
a
a
drink
drink
to
to
this
this
query.
query
In
in
GraphQL,
graphql
it's
it's
a
a
simple
simple
matter
matter
of
of
updating
updating
the
the
query,
query
But
but
in
in
REST,
rest
we
we
would
would
likely
likely
have
have
to
to
make
make
at
at
least
least
2
2
more
more
requests
requests
to
to
2
2
different
different
unique
unique
URLs
urls
to
to
get
get
this
this
data.
data
The
the
beauty
beauty
of
of
GraphQL
graphql
is
is
that
that
it
it
simplifies
simplifies
the
the
way
way
you
you
request
request
data
data
from
from
your
your
front
front
end
end
code.
code
So
so
obviously,
obviously
GraphQL
graphql
is
is
way
way
better
better
than
than
REST,
rest
and
and
you
you
should
should
never
never
use
use
REST
rest
ever
ever
again.
again
Right?
right
Well,
well
it's
it's
really
really
not
not
that
that
simple.
simple
While
while
GraphQL
graphql
provides
provides
a
a
lot
lot
of
of
advantages,
advantages
there
there
are
are
some
some
disadvantages
disadvantages
as
as
well.
well
The
the
biggest
biggest
disadvantage
disadvantage
in
in
my
my
opinion
opinion
is
is
that
that
there
there
is
is
some
some
added
added
complexity
complexity
upfront.
upfront
You
you
can
can
build
build
a
a
RESTful
restful
service
service
with
with
Express
express
JS
js
with,
with
like,
like
5
5
lines
lines
of
of
code.
code
But
but
with
with
GraphQL,
graphql
you
you
have
have
some
some
additional
additional
dependencies,
dependencies
a
a
type
type
system,
system
and
and
the
the
benefits
benefits
might
might
not
not
be
be
that
that
substantial
substantial
if
if
you're
you're
a
a
small
small
team
team
or
or
have
have
a
a
relatively
relatively
simple
simple
API.
api
The
the
benefits
benefits
of
of
GraphQL
graphql
really
really
kick
kick
in
in
when
when
you
you
have
have
multiple
multiple
developers
developers
working
working
with
with
a
a
large
large
API
api
that
that
needs
needs
to
to
map
map
together
together
a
a
whole
whole
bunch
bunch
of
of
different
different
back
back
end
end
data
data
sources.
sources
In
in
any
any
case,
case
GraphQL
graphql
is
is
very
very
fun
fun
to
to
work
work
with
with
as
as
a
a
developer,
developer
so
so
let's
let's
go
go
ahead
ahead
and
and
play
play
around
around
with
with
some
some
queries
queries
to
to
SpaceX.
spacex
Let's
let's
go
go
ahead
ahead
and
and
delete
delete
the
the
default,
default
And
and
then
then
we'll
we'll
make
make
a
a
query
query
for
for
all
all
of
of
the
the
rockets
rockets
in
in
SpaceX.
spacex
Click
click
the
the
box
box
for
for
rockets,
rockets
and
and
then
then
if
if
you
you
hover
hover
over
over
rockets,
rockets
you'll
you'll
notice
notice
that
that
it
it
returns
returns
a
a
query
query
of
of
an
an
array
array
of
of
rockets.
rockets
A
a
rocket
rocket
is
is
a
a
custom
custom
type
type
defined
defined
by
by
the
the
server,
server
and
and
if
if
we
we
click
click
on
on
it,
it
we
we
can
can
see
see
all
all
the
the
different
different
data
data
properties
properties
available
available
there.
there
And
and
then
then
we
we
can
can
simply
simply
click
click
the
the
Checkboxes
checkboxes
for
for
the
the
properties
properties
that
that
we
we
want
want
returned
returned
from
from
this
this
query.
query
And
and
what
what
you'll
you'll
also
also
notice
notice
is
is
that
that
queries
queries
can
can
take
take
arguments.
arguments
In
in
this
this
case,
case
we
we
can
can
set
set
a
a
limit
limit
to
to
a
a
specific
specific
number
number
of
of
rockets
rockets
or
or
we
we
can
can
offset
offset
it
it
if
if
we're
we're
doing
doing
pagination.
pagination
So
so
now
now
that
that
we
we
have
have
a
a
list
list
of
of
rockets,
rockets
let's
let's
go
go
ahead
ahead
and
and
copy
copy
1
1
of
of
the
the
IDs
ids
and
and
make
make
a
a
request
request
for
for
an
an
individual
individual
rocket.
rocket
Go
go
ahead
ahead
and
and
click
click
the
the
rocket
rocket
box,
box
and
and
you'll
you'll
notice
notice
this
this
query
query
takes
takes
an
an
ID
id
as
as
its
its
argument.
argument
Then
then
simply
simply
select
select
the
the
properties
properties
that
that
you
you
want
want
to
to
read
read
on
on
the
the
rocket
rocket
object.
object
And
and
that's
that's
really
really
all
all
there
there
is
is
to
to
it
it
when
when
it
it
comes
comes
to
to
fetching
fetching
data
data
from
from
a
a
GraphQL
graphql
API.
api
But
but
there
there
are
are
a
a
couple
couple
more
more
advanced
advanced
things
things
that
that
you
you
should
should
know
know
about.
about
You
you
can
can
reuse
reuse
values
values
throughout
throughout
your
your
queries
queries
by
by
using
using
variables,
variables
which
which
you'll
you'll
see
see
prefixed
prefixed
with
with
a
a
dollar
dollar
sign.
sign
But
but
sometimes,
sometimes
you
you
might
might
actually
actually
want
want
to
to
change
change
the
the
query
query
entirely
entirely
based
based
on
on
the
the
value
value
of
of
a
a
table.
table
For
for
example,
example
you
you
can
can
see
see
we
we
have
have
this
this
gluten
gluten
free
free
variable,
variable
so
so
we
we
might
might
not
not
want
want
to
to
include
include
bread
bread
if
if
that
that
option
option
is
is
set
set
to
to
true.
true
So
so
if
if
the
the
gluten
gluten
free
free
boolean
boolean
is
is
true,
true
then
then
it
it
will
will
include
include
bread
bread
on
on
this
this
order.
order
But
but
that's
that's
not
not
exactly
exactly
right,
right
so
so
let's
let's
go
go
ahead
ahead
and
and
do
do
the
the
exact
exact
opposite
opposite
with
with
the
the
skip
skip
directive
directive
to
to
exclude
exclude
bread
bread
if
if
it's
it's
set
set
to
to
true.
true
And
and
it's
it's
also
also
possible
possible
that
that
your
your
GraphQL
graphql
schema
schema
has
has
a
a
certain
certain
property
property
that
that
returns
returns
multiple
multiple
types
types
or
or
a
a
union
union
type.
type
For
for
example,
example
our
our
sandwich
sandwich
might
might
come
come
with
with
a
a
side,
side
and
and
that
that
side
side
might
might
either
either
be
be
french
french
fries
fries
or
or
a
a
salad.
salad
If
if
it's
it's
a
a
salad,
salad
then
then
we
we
might
might
want
want
to
to
return
return
the
the
dressing
dressing
field.
field
And
and
if
if
it's
it's
French
french
fries,
fries
then
then
we
we
might
might
want
want
to
to
return
return
the
the
side
side
field.
field
So
so
as
as
a
a
front
front
end
end
developer,
developer
GraphQL
graphql
gives
gives
you
you
a
a
lot
lot
of
of
flexibility
flexibility
for
for
structuring
structuring
your
your
queries,
queries
And
and
then
then
it's
it's
up
up
to
to
your
your
back
back
end
end
developers
developers
to
to
write
write
the
the
code
code
to
to
resolve
resolve
the
the
queries,
queries
which
which
tends
tends
to
to
be
be
the
the
more
more
difficult
difficult
part.
part
In
in
addition
addition
to
to
reading
reading
data
data
by
by
making
making
queries,
queries
You
you
might
might
also
also
want
want
to
to
write
write
data
data
or
or
modify
modify
data
data
on
on
the
the
server
server
by
by
using
using
a
a
mutation.
mutation
A
a
mutation
mutation
works
works
just
just
like
like
a
a
query,
query
but
but
it's
it's
a
a
convention
convention
that
that
signals
signals
that
that
some
some
data
data
will
will
be
be
modified
modified
on
on
the
the
server.
server
So
so
now
now
that
that
you
you
know
know
the
the
basics
basics
of
of
GraphQL,
graphql
I
i
wanna
wanna
show
show
you
you
how
how
to
to
put
put
it
it
to
to
use
use
in
in
an
an
actual
actual
real
real
world
world
front
front
end
end
application.
application
The
the
most
most
popular
popular
way
way
to
to
work
work
with
with
GraphQL
graphql
from
from
a
a
front
front
end
end
application
application
is
is
to
to
use
use
the
the
Apollo
apollo
client.
client
It's
it's
essentially
essentially
a
a
state
state
management
management
library
library
that
that
allows
allows
you
you
to
to
write
write
GraphQL
graphql
queries,
queries
then
then
see
see
the
the
results
results
automatically
automatically
updated
updated
in
in
your
your
UI.
ui
Apollo
apollo
has
has
integrations
integrations
for
for
all
all
the
the
major
major
JavaScript
javascript
frameworks
frameworks
like
like
Angular,
angular
React,
react
Vue,
vue
etcetera,
etcetera
including
including
vanilla
vanilla
web
web
components
components
and
and
also
also
native
native
platforms
platforms
like
like
iOS
ios
and
and
Android.
android
What
what
I
i
want
want
to
to
show
show
you
you
over
over
the
the
next
next
few
few
minutes
minutes
is
is
a
a
practical
practical
example
example
combining
combining
Apollo,
apollo
GraphQL,
graphql
and
and
Angular.
angular
Our
our
goal
goal
is
is
to
to
create
create
a
a
simple
simple
web
web
app
app
that
that
will
will
fetch
fetch
the
the
recent
recent
launches
launches
from
from
SpaceX.
spacex
Then
then
when
when
we
we
click
click
on
on
a
a
Specific
specific
launch,
launch
it
it
will
will
take
take
us
us
to
to
the
the
details
details
for
for
that
that
launch
launch
along
along
with
with
some
some
pictures.
pictures
Now
now
as
as
I
i
mentioned
mentioned
earlier,
earlier
one
one
of
of
the
the
big
big
advantages
advantages
of
of
GraphQL
graphql
is
is
the
the
awesome
awesome
tooling
tooling
that
that
it
it
provides,
provides
And
and
when
when
combined
combined
with
with
TypeScript,
typescript
it
it
gets
gets
even
even
better.
better
You'll
you'll
also
also
learn
learn
how
how
to
to
convert
convert
your
your
GraphQL
graphql
API
api
into
into
a
a
series
series
of
of
interfaces
interfaces
that
that
you
you
can
can
use
use
directly
directly
in
in
your
your
front
front
end
end
application.
application
So
so
when
when
you
you
combine
combine
Angular
angular
with
with
GraphQL,
graphql
you
you
get
get
end
end
to
to
end
end
type
type
safety
safety
providing
providing
an
an
amazing
amazing
developer
developer
experience.
experience
You
you
can
can
see
see
here
here
I'm
i'm
in
in
a
a
brand
brand
new
new
Angular
angular
app,
app
And
and
the
the
first
first
thing
thing
I
i
want
want
to
to
do
do
is
is
install
install
the
the
Apollo
apollo
GraphQL
graphql
Extension
extension
for
for
Versus
versus
Code.
code
It
it
provides
provides
syntax
syntax
highlighting
highlighting
and
and
everything
everything
else
else
you
you
need
need
to
to
work
work
with
with
GraphQL
graphql
and
and
Versus
versus
Code.
code
From
from
there,
there
we'll
we'll
go
go
to
to
the
the
root
root
of
of
the
the
project
project
and
and
create
create
a
a
new
new
file
file
called
called
apollo
apollo
config
config
dotjs.
dotjs
This
this
will
will
tell
tell
Apollo
apollo
where
where
to
to
find
find
our
our
back
back
end
end
API,
api
which
which
in
in
this
this
case
case
should
should
point
point
to
to
the
the
public
public
SpaceX
spacex
API.
api
The
the
next
next
step
step
is
is
to
to
generate
generate
a
a
couple
couple
of
of
components
components
that
that
we
we
can
can
use
use
for
for
the
the
screens
screens
in
in
this
this
app.
app
We
we
have
have
a
a
list
list
view
view
that
that
will
will
show
show
all
all
the
the
recent
recent
launches
launches
from
from
SpaceX
spacex
and
and
then
then
also
also
a
a
detail
detail
view.
view
We
we
can
can
generate
generate
these
these
components
components
with
with
the
the
Angular
angular
CLI,
cli
And
and
we'll
we'll
also
also
set
set
the
the
change
change
detection
detection
to
to
on
on
push,
push
which
which
is
is
just
just
a
a
little
little
performance
performance
optimization
optimization
that
that
we
we
can
can
use
use
here
here
because
because
with
with
Apollo
apollo
and
and
GraphQL,
graphql
the
the
only
only
thing
thing
that
that
we
we
All
all
I
i
need
need
to
to
do
do
is
is
subscribe
subscribe
to
to
observables
observables
for
for
our
our
data.
data
So
so
we
we
don't
don't
need
need
to
to
use
use
Angular's
angular's
built
built
in
in
change
change
detection.
detection
The
the
next
next
thing
thing
we'll
we'll
do
do
is
is
jump
jump
into
into
the
the
app
app
routing
routing
module
module
and
and
set
set
up
up
routes
routes
for
for
these
these
actual
actual
components.
components
We'll
we'll
set
set
the
the
route
route
route
route
to
to
our
our
launch
launch
list
list
component.
component
That's
that's
the
the
default
default
route
route
the
the
user
user
lands
lands
on.
on
Then
then
if
if
they
they
click
click
On
on
one
one
of
of
the
the
launch
launch
cards,
cards
it
it
will
will
take
take
them
them
to
to
a
a
URL
url
parameter
parameter
with
with
that
that
ID,
id
then
then
show
show
additional
additional
details
details
about
about
that
that
specific
specific
launch.
launch
That
that
takes
takes
care
care
of
of
our
our
routing
routing
configuration.
configuration
Now
now
let's
let's
go
go
into
into
the
the
app
app
component
component
and
and
delete
delete
all
all
of
of
the
the
boilerplate
boilerplate
code
code
that
that
comes
comes
with
with
the
the
default
default
Angular
angular
app.
app
Just
just
make
make
sure
sure
to
to
leave
leave
the
the
router
router
outlet.
outlet
And
and
now
now
we're
we're
ready
ready
to
to
write
write
our
our
1st
1st
GraphQL
graphql
query.
query
And
and
the
the
reason
reason
I
i
want
want
to
to
do
do
this
this
first
first
is
is
because
because
as
as
you'll
you'll
see
see
in
in
a
a
minute
minute
here,
here
we
we
can
can
use
use
the
the
query
query
to
to
automatically
automatically
generate
generate
Angular
angular
services,
services
interfaces,
interfaces
and
and
basically
basically
everything
everything
else
else
we
we
need
need
to
to
work
work
with
with
our
our
back
back
end
end
data.
data
Go
go
into
into
the
the
launch
launch
list
list
component
component
and
and
create
create
a
a
new
new
file
file
called
called
launch
launch
list
list
dot
dot
graphql.
graphql
Now
now
unlike
unlike
the
the
interactive
interactive
editor,
editor
we'll
we'll
start
start
out
out
our
our
query
query
by
by
writing
writing
the
the
query
query
keyword,
keyword
and
and
then
then
we
we
can
can
give
give
that
that
a
a
name
name
called
called
past
past
launches
launches
list.
list
And
and
we'll
we'll
have
have
it
it
take
take
a
a
parameter
parameter
called
called
limit,
limit
which
which
will
will
take
take
an
an
integer
integer
argument,
argument
and
and
the
the
exclamation
exclamation
mark
mark
after
after
the
the
type
type
makes
makes
it
it
required.
required
Then
then
inside
inside
the
the
query,
query
we'll
we'll
write
write
some
some
GraphQL
graphql
code
code
just
just
like
like
we
we
did
did
earlier
earlier
in
in
the
the
video.
video
We'll
we'll
make
make
a
a
reference
reference
to
to
the
the
launches
launches
past
past
query
query
that's
that's
provided
provided
by
by
SpaceX,
spacex
and
and
then
then
we'll
we'll
pass
pass
in
in
our
our
limit
limit
argument.
argument
From
from
there,
there
we'll
we'll
add
add
the
the
actual
actual
fields
fields
that
that
we
we
want
want
for
for
each
each
individual
individual
launch
launch
object
object
like
like
the
the
ID,
id
mission
mission
name,
name
links
links
to
to
some
some
images,
images
and
and
so
so
So
so
this
this
defines
defines
all
all
the
the
data
data
that
that
we
we
want
want
to
to
show
show
in
in
our
our
launch
launch
list
list
component.
component
And
and
now
now
we'll
we'll
move
move
over
over
to
to
our
our
launch
launch
details
details
component
component
and
and
do
do
the
the
same
same
thing
thing
by
by
creating
creating
a
a
launch
launch
details
details
GraphQL
graphql
file.
file
Aisle.
aisle
One
one
thing
thing
you'll
you'll
notice
notice
on
on
this
this
query
query
is
is
that
that
we
we
have
have
a
a
required
required
type
type
of
of
ID.
id
The
the
ID
id
type
type
works
works
just
just
like
like
a
a
string,
string
except
except
that
that
it
it
signals
signals
that
that
it's
it's
a
a
unique
unique
value.
value
Then
then
we
we
can
can
pass
pass
that
that
ID
id
to
to
the
the
launch
launch
query
query
in
in
GraphQL
graphql
and
and
then
then
filter
filter
by
by
the
the
fields
fields
that
that
we
we
actually
actually
want
want
from
from
the
the
API.
api
So
so
now
now
that
that
we
we
have
have
our
our
GraphQL
graphql
queries
queries
in
in
place,
place
We
we
can
can
generate
generate
a
a
whole
whole
bunch
bunch
of
of
code
code
automatically.
automatically
The
the
first
first
thing
thing
we'll
we'll
need
need
to
to
do
do
is
is
integrate
integrate
Apollo
apollo
into
into
this
this
project.
project
So
so
head
head
over
over
to
to
the
the
command
command
line
line
and
and
run
run
n
n
g
g
add
add
apollo
apollo
angular.
angular
This
this
command
command
will
will
install
install
our
our
Apollo
apollo
dependencies
dependencies
and
and
also
also
create
create
a
a
GraphQL
graphql
module
module
in
in
the
the
app
app
directory.
directory
Go
go
ahead
ahead
and
and
open
open
up
up
that
that
file
file
and
and
tell
tell
it
it
where
where
to
to
find
find
the
the
GraphQL
graphql
API
api
by
by
modifying
modifying
this
this
URI
uri
variable.
variable
So
so
that
that
takes
takes
care
care
of
of
the
the
setup
setup
for
for
Apollo,
apollo
but
but
we
we
want
want
to
to
generate
generate
a
a
lot
lot
of
of
our
our
code
code
as
as
opposed
opposed
to
to
writing
writing
it
it
manually.
manually
The
the
tool
tool
that
that
can
can
help
help
us
us
do
do
that
that
is
is
the
the
GraphQL
graphql
code
code
generator.
generator
This
this
is
is
a
a
really
really
awesome
awesome
tool
tool
that
that
you
you
can
can
use
use
on
on
both
both
the
the
back
back
end
end
and
and
front
front
end
end
To
to
look
look
at
at
your
your
GraphQL
graphql
schema
schema
and
and
then
then
automatically
automatically
generate
generate
TypeScript
typescript
interfaces
interfaces
and
and
in
in
our
our
case,
case
Angular
angular
services
services
that
that
can
can
fetch
fetch
the
the
data
data
from
from
the
the
back
back
end.
end
We
we
have
have
this
this
big
big
long
long
install
install
command
command
and
and
you
you
can
can
copy
copy
and
and
paste
paste
that
that
from
from
the
the
lesson
lesson
repo.
repo
Once
once
those
those
are
are
installed,
installed
we'll
we'll
create
create
a
a
codegen.
codegen
Yaml
yaml
file
file
in
in
the
the
root
root
of
of
the
the
project.
project
This
this
simply
simply
tells
tells
the
the
code
code
generator
generator
where
where
to
to
find
find
our
our
GraphQL
graphql
files
files
and
and
what
what
to
to
generate
generate
once
once
it
it
finds
finds
them.
them
And
and
now
now
that
that
we
we
have
have
that
that
configuration
configuration
in
in
place,
place
we
we
just
just
need
need
a
a
command
command
to
to
run
run
that
that
will
will
actually
actually
run
run
the
the
generator.
generator
We
we
can
can
do
do
that
that
by
by
going
going
into
into
the
the
package
package
JSON
json
and
and
going
going
into
into
the
the
scripts.
scripts
We'll
we'll
create
create
a
a
new
new
command
command
called
called
co
co
gen
gen
that
that
runs
runs
the
the
generator.
generator
Then
then
we
we
can
can
open
open
up
up
the
the
terminal
terminal
and
and
run
run
that
that
command,
command
and
and
you'll
you'll
see
see
it
it
generates
generates
a
a
new
new
directory
directory
called
called
services
services
with
with
a
a
service
service
that
that
we
we
can
can
use
use
to
to
fetch
fetch
data
data
from
from
the
the
GraphQL
graphql
API.
api
Now
now
the
the
cool
cool
thing
thing
about
about
the
the
code
code
generator
generator
is
is
that
that
it
it
looked
looked
at
at
the
the
actual
actual
schema
schema
of
of
the
the
SpaceX
spacex
API
api
and
and
also
also
our
our
local
local
GraphQL
graphql
queries
queries
and
and
combined
combined
the
the
2
2
together.
together
So
so
we
we
now
now
have
have
an
an
Angular
angular
service
service
that
that
has
has
all
all
of
of
the
the
interfaces
interfaces
from
from
the
the
SpaceX
spacex
API
api
and
and
also
also
methods
methods
to
to
fetch
fetch
the
the
data
data
that
that
we
we
actually
actually
want
want
based
based
on
on
our
our
own
own
local
local
GraphQL
graphql
queries.
queries
That
that
was
was
quite
quite
a
a
bit
bit
of
of
configuration
configuration
to
to
get
get
started,
started
but
but
now
now
that
that
we
we
have
have
that
that
done,
done
we
we
really
really
only
only
have
have
to
to
focus
focus
on
on
writing
writing
components
components
and
and
writing
writing
GraphQL
graphql
queries.
queries
Now
now
let's
let's
go
go
ahead
ahead
and
and
finish
finish
things
things
up
up
by
by
writing
writing
the
the
components
components
for
for
the
the
user
user
interface.
interface
To
to
make
make
things
things
look
look
nice,
nice
I'll
i'll
go
go
ahead
ahead
and
and
add
add
Angular
angular
Material
material
to
to
this
this
project
project
by
by
running
running
n
n
g
g
add
add
at
at
Angular
angular
Material.
material
And
and
then
then
in
in
the
the
app
app
component,
component
I'll
i'll
import
import
the
the
material
material
card
card
module.
module
From
from
there,
there
I'm
i'm
going
going
to
to
head
head
over
over
to
to
the
the
launch
launch
list
list
component
component
typescript,
typescript
And
and
the
the
first
first
thing
thing
I'll
i'll
do
do
is
is
inject
inject
the
the
past
past
launches
launches
service
service
in
in
the
the
constructor.
constructor
Remember,
remember
this
this
service
service
was
was
automatically
automatically
generated
generated
by
by
the
the
code
code
generator.
generator
The
the
service
service
is
is
able
able
to
to
fetch
fetch
the
the
past
past
launches
launches
from
from
SpaceX
spacex
by
by
using
using
the
the
fetch
fetch
method,
method
and
and
then
then
we
we
can
can
pass
pass
in
in
a
a
limit
limit
argument
argument
and
and
set
set
it
it
to
to
30.
30
The
the
response
response
is
is
going
going
to
to
have
have
some
some
additional
additional
data
data
that
that
we
we
don't
don't
really
really
need.
need
So
so
what
what
we'll
we'll
do
do
is
is
pipe
pipe
in
in
the
the
map
map
operator,
operator
and
and
then
then
we'll
we'll
just
just
map
map
the
the
response
response
down
down
to
to
the
the
actual
actual
data
data
that
that
we
we
want
want
to
to
show
show
in
in
the
the
UI,
ui
which
which
in
in
this
this
case
case
will
will
be
be
the
the
response
response
data
data
launches
launches
passed.
passed
Now
now
if
if
we
we
go
go
into
into
the
the
template,
template
We
we
can
can
unwrap
unwrap
the
the
past
past
launches
launches
observable
observable
by
by
using
using
the
the
async
async
pipe,
pipe
and
and
then
then
we'll
we'll
set
set
the
the
result
result
as
as
a
a
template
template
variable
variable
called
called
past
past
launches.
launches
The
the
past
past
launches
launches
will
will
be
be
an
an
array
array
of
of
launch
launch
objects,
objects
so
so
we
we
can
can
simply
simply
loop
loop
over
over
them
them
using
using
the
the
n
n
g
g
4
4
directive
directive
in
in
Angular.
angular
That
that
will
will
give
give
us
us
a
a
material
material
card
card
for
for
each
each
individual
individual
launch,
launch
and
and
then
then
we
we
can
can
add
add
a
a
router
router
link
link
that
that
will
will
point
point
to
to
that
that
specific
specific
launch
launch
ID.
id
So
so
when
when
the
the
user
user
clicks
clicks
on
on
a
a
card,
card
it
it
will
will
route
route
them
them
to
to
the
the
launch
launch
details
details
component.
component
And
and
then
then
everything
everything
after
after
that
that
is
is
pretty
pretty
standard
standard
Angular
angular
templating.
templating
We'll
we'll
display
display
a
a
material
material
card
card
header
header
with
with
an
an
image
image
and
and
then
then
a
a
title
title
and
and
a
a
subtitle.
subtitle
At
at
this
this
point,
point
you
you
should
should
be
be
able
able
to
to
run
run
n
n
g
g
serve
serve
from
from
the
the
terminal
terminal
and
and
then
then
open
open
up
up
local
local
host
host
42100
42100
and
and
see
see
a
a
list
list
of
of
launches
launches
from
from
the
the
SpaceX
spacex
API.
api
Now
now
at
at
this
this
point,
point
when
when
you
you
click
click
on
on
an
an
actual
actual
item,
item
it
it
will
will
take
take
you
you
to
to
the
the
launch
launch
details
details
component,
component
but
but
we
we
haven't
haven't
actually
actually
built
built
that
that
one
one
out
out
yet.
yet
So
so
let's
let's
go
go
ahead
ahead
and
and
do
do
that
that
now.
now
Go
go
ahead
ahead
and
and
open
open
up
up
the
the
launch
launch
details
details
component
component
TypeScript,
typescript
and
and
then
then
we'll
we'll
import
import
activated
activated
route
route
from
from
Angular
angular
router
router
and
and
also
also
our
our
launch
launch
details
details
GraphQL
graphql
service.
service
And
and
then
then
we'll
we'll
go
go
ahead
ahead
and
and
inject
inject
those
those
in
in
the
the
constructor.
constructor
The
the
reason
reason
we
we
need
need
activated
activated
route
route
is
is
because
because
our
our
GraphQL
graphql
query
query
takes
takes
an
an
ID
id
as
as
its
its
argument,
argument
And
and
we
we
get
get
that
that
ID
id
from
from
the
the
URL
url
in
in
the
the
browser.
browser
Angular
angular
provides
provides
all
all
of
of
the
the
URL
url
parameters
parameters
as
as
an
an
observable,
observable
which
which
we
we
can
can
access
access
on
on
the
the
activated
activated
route
route
param
param
map.
map
When
when
we
we
have
have
that
that
observable,
observable
we
we
want
want
to
to
switch
switch
to
to
an
an
observable
observable
of
of
the
the
actual
actual
data
data
from
from
GraphQL.
graphql
That's
that's
a
a
perfect
perfect
use
use
case
case
for
for
the
the
RxJS
rxjs
switch
switch
map
map
operator.
operator
In
in
other
other
words,
words
once
once
we
we
have
have
the
the
ID
id
parameter
parameter
from
from
the
the
URL,
url
we'll
we'll
go
go
ahead
ahead
and
and
switch
switch
to
to
another
another
observable,
observable
which
which
in
in
this
this
case
case
is
is
the
the
launch
launch
detail
detail
service
service
fetch
fetch
of
of
that
that
specific
specific
ID.
id
And
and
then
then
like
like
we
we
did
did
in
in
the
the
previous
previous
example,
example
we'll
we'll
go
go
ahead
ahead
and
and
map
map
the
the
response
response
down
down
just
just
to
to
the
the
raw
raw
data
data
because
because
we
we
don't
don't
need
need
any
any
of
of
the
the
additional
additional
metadata
metadata
that
that
comes
comes
back
back
with
with
the
the
response.
response
And
and
then
then
also
also
like
like
we
we
did
did
in
in
the
the
previous
previous
example,
example
we'll
we'll
unwrap
unwrap
the
the
observable
observable
at
at
the
the
top
top
of
of
the
the
file
file
by
by
using
using
the
the
async
async
pipe,
pipe
and
and
then
then
we'll
we'll
set
set
a
a
template
template
variable
variable
as
as
launch
launch
details.
details
Then
then
from
from
there,
there
we
we
simply
simply
add
add
some
some
HTML
html
for
for
the
the
UI
ui
and
and
interpolate
interpolate
the
the
values
values
that
that
we
we
want
want
to
to
show
show
to
to
the
the
user.
user
And
and
keep
keep
in
in
mind,
mind
I
i
am
am
using
using
a
a
few
few
Custom
custom
CSS
css
styles
styles
here,
here
you
you
can
can
find
find
those
those
in
in
the
the
full
full
lesson
lesson
repo.
repo
And
and
if
if
we
we
go
go
back
back
to
to
our
our
app,
app
you'll
you'll
notice
notice
that
that
when
when
we
we
click
click
on
on
a
a
launch,
launch
it
it
will
will
show
show
the
the
actual
actual
launch
launch
details
details
and
and
some
some
additional
additional
photos
photos
in
in
the
the
We'll
we'll
launch
launch
details
details
and
and
some
some
additional
additional
photos
photos
in
in
the
the
detail
detail
page.
page
Congratulations.
congratulations
You
you
now
now
have
have
a
a
full
full
stack
stack
Apollo
apollo
GraphQL
graphql
powered
powered
Angular
angular
app.
app
Now
now
if
if
you
you
want
want
some
some
extra
extra
credit,
credit
I'd
i'd
recommend
recommend
going
going
to
to
the
the
full
full
lesson
lesson
repo,
repo
give
give
it
it
a
a
star,
star
and
and
check
check
out
out
the
the
extra
extra
credit
credit
section
section
at
at
the
the
very
very
end.
end
It'll
it'll
show
show
you
you
how
how
to
to
build
build
an
an
Angular
angular
pipe
pipe
that
that
will
will
format
format
the
the
actual
actual
dates
dates
of
of
the
the
launches
launches
in
in
relative
relative
time.
time
For
for
example,
example
it
it
will
will
say
say
a
a
launch
launch
10
10
seconds
seconds
ago,
ago
yesterday,
yesterday
5
5
days
days
ago,
ago
and
and
so
so
on.
on
I'm
i'm
gonna
gonna
go
go
ahead
ahead
and
and
wrap
wrap
things
things
up
up
there.
there
If
if
this
this
video
video
helped
helped
you,
you
please
please
like
like
and
and
Subscribe
subscribe
and
and
consider
consider
becoming
becoming
a
a
pro
pro
member
member
at
at
FireShip
fireship
IO
io
to
to
get
get
access
access
to
to
even
even
more
more
content.
content
Thanks
thanks
for
for
watching
watching
and
and
I
i
will
will
talk
talk
to
to
you
you
Tim.
tim
543210.
543210
All
all
engine
engine
running.
running
Lift
lift
off.
off
We
we
have
have
a
a
lift
lift
off.
off
success
The concept of GraphQL is used in front end applications to communicate with back end applications. GraphQL allows for filtering of data requests and the flexibility of multiple developers. It is used in front end applications like the public SpaceX API, and in a real-world project for creating a new launch list and launch details components. A full stack Apollo GraphQL powered Angular app is recommended, and viewers can follow the speaker's YouTube channel and subscribe to their channel.
GraphQL Basics - Build an app with the SpaceX API
GraphQL, a query language for APIs. You define a schema for your data, then tell GraphQL how to fetch and supply that schema. And in doing so, amazing things might happen as we'll see in this video. 10, 9, ignition sequence start. In today's video, you'll learn the fundamental concepts of GraphQL by interacting with the public SpaceX API. If you're new here, like and subscribe, and I'd like to give a special thanks to Arjun Yellamanshelli, who is the mastermind behind this video. If you're looking for a GraphQL expert, you can find his LinkedIn and GitHub in the description below. Let's start by answering the question of what is GraphQL? In the most basic sense, it's a language that allows your front end applications to communicate with your back end applications. A Rosetta Stone, if you will. A consistent way for your front end to request data from your back end despite any differences in the underlying programming language. For example, your mobile application might need to request a sandwich from your API. It can make that request by sending a GraphQL query. The query will have the same shape that you expect to receive back from the API as JSON. So in this case, we expect a sandwich object with bread, ham, and cheese. On the server, GraphQL also functions as a runtime for executing queries. The server defines types for the data that's available there, and also resolvers to actually fetch the data from a database or some other data source. Now because everything on the server is strongly typed, we can get some really amazing tooling with GraphQL. To demonstrate this, let's head over to the GraphQL Explorer for the public SpaceX API. If you're the consumer or using the API in your front end application, you can do introspection to the back end to see what data is available there. As you can see here, we have a whole bunch of different check boxes that represent different queries we can make to the SpaceX API. In the middle panel, We already have an example GraphQL query ready to go. Now go ahead and hit the play button to execute the query, and then you'll see on the right side, we get a JSON payload returned from the server. And what you'll notice is that the properties on this JSON object are identical to the way we structured them in our GraphQL query. And on top of that, everything is strongly typed. If we hover over a field in our GraphQL query, you can see that it gives us a type. There are several built in types like string, integer, etcetera. And the server can also define its own custom types. So when working with GraphQL as a front end developer, you'll always know the exact shape of the data that you're expecting back from the server. And speaking of that, let's take a second to look at the differences between REST APIs and GraphQL APIs. REST stands for representational state transfer, and it's the status quo for API design that we've been following for the last 20 years. Now let's say our front end application wants to make a sandwich. In REST, we might make 3 different requests, one for bread, ham, and cheese. Each request is mapped to its own unique URL, and each response from the server would contain the full JSON payload with everything that we need, like the full loaf of bread, a full pig, and a full wedge of cheese. Even though our front end application doesn't necessarily need all that data, we can just filter it out in the front end code. Now in GraphQL world, things are quite a bit different. Instead of having multiple URL endpoints, we just have a single entry point into the API. So it's the actual query sent from the front end that determines what the back end will return. It's not based on a URL or any specific mapping like that. In addition, the GraphQL API will only return the actual fields that were requested. Instead of requesting ingredients 1 by 1, we just get the full sandwich all put together. Now let's say we also want to add a side salad and a drink to this query. In GraphQL, it's a simple matter of updating the query, But in REST, we would likely have to make at least 2 more requests to 2 different unique URLs to get this data. The beauty of GraphQL is that it simplifies the way you request data from your front end code. So obviously, GraphQL is way better than REST, and you should never use REST ever again. Right? Well, it's really not that simple. While GraphQL provides a lot of advantages, there are some disadvantages as well. The biggest disadvantage in my opinion is that there is some added complexity upfront. You can build a RESTful service with Express JS with, like, 5 lines of code. But with GraphQL, you have some additional dependencies, a type system, and the benefits might not be that substantial if you're a small team or have a relatively simple API. The benefits of GraphQL really kick in when you have multiple developers working with a large API that needs to map together a whole bunch of different back end data sources. In any case, GraphQL is very fun to work with as a developer, so let's go ahead and play around with some queries to SpaceX. Let's go ahead and delete the default, And then we'll make a query for all of the rockets in SpaceX. Click the box for rockets, and then if you hover over rockets, you'll notice that it returns a query of an array of rockets. A rocket is a custom type defined by the server, and if we click on it, we can see all the different data properties available there. And then we can simply click the Checkboxes for the properties that we want returned from this query. And what you'll also notice is that queries can take arguments. In this case, we can set a limit to a specific number of rockets or we can offset it if we're doing pagination. So now that we have a list of rockets, let's go ahead and copy 1 of the IDs and make a request for an individual rocket. Go ahead and click the rocket box, and you'll notice this query takes an ID as its argument. Then simply select the properties that you want to read on the rocket object. And that's really all there is to it when it comes to fetching data from a GraphQL API. But there are a couple more advanced things that you should know about. You can reuse values throughout your queries by using variables, which you'll see prefixed with a dollar sign. But sometimes, you might actually want to change the query entirely based on the value of a table. For example, you can see we have this gluten free variable, so we might not want to include bread if that option is set to true. So if the gluten free boolean is true, then it will include bread on this order. But that's not exactly right, so let's go ahead and do the exact opposite with the skip directive to exclude bread if it's set to true. And it's also possible that your GraphQL schema has a certain property that returns multiple types or a union type. For example, our sandwich might come with a side, and that side might either be french fries or a salad. If it's a salad, then we might want to return the dressing field. And if it's French fries, then we might want to return the side field. So as a front end developer, GraphQL gives you a lot of flexibility for structuring your queries, And then it's up to your back end developers to write the code to resolve the queries, which tends to be the more difficult part. In addition to reading data by making queries, You might also want to write data or modify data on the server by using a mutation. A mutation works just like a query, but it's a convention that signals that some data will be modified on the server. So now that you know the basics of GraphQL, I wanna show you how to put it to use in an actual real world front end application. The most popular way to work with GraphQL from a front end application is to use the Apollo client. It's essentially a state management library that allows you to write GraphQL queries, then see the results automatically updated in your UI. Apollo has integrations for all the major JavaScript frameworks like Angular, React, Vue, etcetera, including vanilla web components and also native platforms like iOS and Android. What I want to show you over the next few minutes is a practical example combining Apollo, GraphQL, and Angular. Our goal is to create a simple web app that will fetch the recent launches from SpaceX. Then when we click on a Specific launch, it will take us to the details for that launch along with some pictures. Now as I mentioned earlier, one of the big advantages of GraphQL is the awesome tooling that it provides, And when combined with TypeScript, it gets even better. You'll also learn how to convert your GraphQL API into a series of interfaces that you can use directly in your front end application. So when you combine Angular with GraphQL, you get end to end type safety providing an amazing developer experience. You can see here I'm in a brand new Angular app, And the first thing I want to do is install the Apollo GraphQL Extension for Versus Code. It provides syntax highlighting and everything else you need to work with GraphQL and Versus Code. From there, we'll go to the root of the project and create a new file called apollo config dotjs. This will tell Apollo where to find our back end API, which in this case should point to the public SpaceX API. The next step is to generate a couple of components that we can use for the screens in this app. We have a list view that will show all the recent launches from SpaceX and then also a detail view. We can generate these components with the Angular CLI, And we'll also set the change detection to on push, which is just a little performance optimization that we can use here because with Apollo and GraphQL, the only thing that we All I need to do is subscribe to observables for our data. So we don't need to use Angular's built in change detection. The next thing we'll do is jump into the app routing module and set up routes for these actual components. We'll set the route route to our launch list component. That's the default route the user lands on. Then if they click On one of the launch cards, it will take them to a URL parameter with that ID, then show additional details about that specific launch. That takes care of our routing configuration. Now let's go into the app component and delete all of the boilerplate code that comes with the default Angular app. Just make sure to leave the router outlet. And now we're ready to write our 1st GraphQL query. And the reason I want to do this first is because as you'll see in a minute here, we can use the query to automatically generate Angular services, interfaces, and basically everything else we need to work with our back end data. Go into the launch list component and create a new file called launch list dot graphql. Now unlike the interactive editor, we'll start out our query by writing the query keyword, and then we can give that a name called past launches list. And we'll have it take a parameter called limit, which will take an integer argument, and the exclamation mark after the type makes it required. Then inside the query, we'll write some GraphQL code just like we did earlier in the video. We'll make a reference to the launches past query that's provided by SpaceX, and then we'll pass in our limit argument. From there, we'll add the actual fields that we want for each individual launch object like the ID, mission name, links to some images, and so So this defines all the data that we want to show in our launch list component. And now we'll move over to our launch details component and do the same thing by creating a launch details GraphQL file. Aisle. One thing you'll notice on this query is that we have a required type of ID. The ID type works just like a string, except that it signals that it's a unique value. Then we can pass that ID to the launch query in GraphQL and then filter by the fields that we actually want from the API. So now that we have our GraphQL queries in place, We can generate a whole bunch of code automatically. The first thing we'll need to do is integrate Apollo into this project. So head over to the command line and run n g add apollo angular. This command will install our Apollo dependencies and also create a GraphQL module in the app directory. Go ahead and open up that file and tell it where to find the GraphQL API by modifying this URI variable. So that takes care of the setup for Apollo, but we want to generate a lot of our code as opposed to writing it manually. The tool that can help us do that is the GraphQL code generator. This is a really awesome tool that you can use on both the back end and front end To look at your GraphQL schema and then automatically generate TypeScript interfaces and in our case, Angular services that can fetch the data from the back end. We have this big long install command and you can copy and paste that from the lesson repo. Once those are installed, we'll create a codegen. Yaml file in the root of the project. This simply tells the code generator where to find our GraphQL files and what to generate once it finds them. And now that we have that configuration in place, we just need a command to run that will actually run the generator. We can do that by going into the package JSON and going into the scripts. We'll create a new command called co gen that runs the generator. Then we can open up the terminal and run that command, and you'll see it generates a new directory called services with a service that we can use to fetch data from the GraphQL API. Now the cool thing about the code generator is that it looked at the actual schema of the SpaceX API and also our local GraphQL queries and combined the 2 together. So we now have an Angular service that has all of the interfaces from the SpaceX API and also methods to fetch the data that we actually want based on our own local GraphQL queries. That was quite a bit of configuration to get started, but now that we have that done, we really only have to focus on writing components and writing GraphQL queries. Now let's go ahead and finish things up by writing the components for the user interface. To make things look nice, I'll go ahead and add Angular Material to this project by running n g add at Angular Material. And then in the app component, I'll import the material card module. From there, I'm going to head over to the launch list component typescript, And the first thing I'll do is inject the past launches service in the constructor. Remember, this service was automatically generated by the code generator. The service is able to fetch the past launches from SpaceX by using the fetch method, and then we can pass in a limit argument and set it to 30. The response is going to have some additional data that we don't really need. So what we'll do is pipe in the map operator, and then we'll just map the response down to the actual data that we want to show in the UI, which in this case will be the response data launches passed. Now if we go into the template, We can unwrap the past launches observable by using the async pipe, and then we'll set the result as a template variable called past launches. The past launches will be an array of launch objects, so we can simply loop over them using the n g 4 directive in Angular. That will give us a material card for each individual launch, and then we can add a router link that will point to that specific launch ID. So when the user clicks on a card, it will route them to the launch details component. And then everything after that is pretty standard Angular templating. We'll display a material card header with an image and then a title and a subtitle. At this point, you should be able to run n g serve from the terminal and then open up local host 42100 and see a list of launches from the SpaceX API. Now at this point, when you click on an actual item, it will take you to the launch details component, but we haven't actually built that one out yet. So let's go ahead and do that now. Go ahead and open up the launch details component TypeScript, and then we'll import activated route from Angular router and also our launch details GraphQL service. And then we'll go ahead and inject those in the constructor. The reason we need activated route is because our GraphQL query takes an ID as its argument, And we get that ID from the URL in the browser. Angular provides all of the URL parameters as an observable, which we can access on the activated route param map. When we have that observable, we want to switch to an observable of the actual data from GraphQL. That's a perfect use case for the RxJS switch map operator. In other words, once we have the ID parameter from the URL, we'll go ahead and switch to another observable, which in this case is the launch detail service fetch of that specific ID. And then like we did in the previous example, we'll go ahead and map the response down just to the raw data because we don't need any of the additional metadata that comes back with the response. And then also like we did in the previous example, we'll unwrap the observable at the top of the file by using the async pipe, and then we'll set a template variable as launch details. Then from there, we simply add some HTML for the UI and interpolate the values that we want to show to the user. And keep in mind, I am using a few Custom CSS styles here, you can find those in the full lesson repo. And if we go back to our app, you'll notice that when we click on a launch, it will show the actual launch details and some additional photos in the We'll launch details and some additional photos in the detail page. Congratulations. You now have a full stack Apollo GraphQL powered Angular app. Now if you want some extra credit, I'd recommend going to the full lesson repo, give it a star, and check out the extra credit section at the very end. It'll show you how to build an Angular pipe that will format the actual dates of the launches in relative time. For example, it will say a launch 10 seconds ago, yesterday, 5 days ago, and so on. I'm gonna go ahead and wrap things up there. If this video helped you, please like and Subscribe and consider becoming a pro member at FireShip IO to get access to even more content. Thanks for watching and I will talk to you Tim. 543210. All engine running. Lift off. We have a lift off.
The concept of GraphQL is used in front end applications to communicate with back end applications. GraphQL allows for filtering of data requests and the flexibility of multiple developers. It is used in front end applications like the public SpaceX API, and in a real-world project for creating a new launch list and launch details components. A full stack Apollo GraphQL powered Angular app is recommended, and viewers can follow the speaker's YouTube channel and subscribe to their channel.