Build an optimistic UI in Angular using Apollo Boost. In this episode, we query our GraphQL server and create mutations that update the UI at lightning speed https://angularfirebase.com/lessons/apollo-angular-tutorial-query-and-mutate/

- Arjun's Code https://github.com/arjunyel/angular-apollo-example
- Part 1 https://youtu.be/8D9XnnjFGMs
2024-02-04T07:28:03.427Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
b831b197-7a3e-46e6-9953-bd4bddfc292f
185016685b7fa11dab0e3d041324bad3011c3f64bf7952c2b083d42e6299eb7f
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
A few weeks ago we built a GraphQL server with Apollo and Node.
Js.
If you haven't seen that video, make sure to check that one out first to get a better understanding of GraphQL on Apollo, because in today's episode we're going to be tackling the front end side of this equation which involves querying data and providing mutations with optimistic updates in our Angular app.
If you're new here make sure to like and subscribe and send a thank you to Arjan Yelamancelli was responsible for writing the code for this lesson.
To get started let's first talk about why Apollo and GraphQL are awesome technologies from the front end developer perspective.
Notice how when I click this hard button that the count increases and then a second later our server responds with an error and then it reverts back to the old value.
That's known as an optimistic update or latency compensation.
And if you use Firebase, you're probably already familiar with this because that's one of the things that the SDK does for you automatically.
But if you're not using the Firebase SDK, this is a feature that would be really difficult to implement from scratch.
Apollo Angular makes it easy to implement features like this, Plus we can use it with any back end data source that we've set up in our GraphQL server.
If we open this project in Versus Code, you'll notice that we have a back end and front end folder.
The back end is the GraphQL server that we built in the first episode.
We'll go in there and make some updates, but for the most part, we'll be in the front end, which is an Angular 6 app.
In In our front end app, we're going to install Apollo Angular Boost, which is a client library that makes it easy to set up GraphQL in an Angular app, and also a library called Apollo Cogen, which will allow us to generate TypeScript definitions from our server side automatically, which is another really awesome feature that we'll see here in a few minutes.
And lastly, we'll use the Angular CLI to generate an NG module for our GraphQL feature.
Then we can go ahead and open up that module, and we'll want to import the Apollo Boost library and add it to the imports array in the NG module.
Then we'll add Apollo Boost to the constructor of this module and call Apollo boost create and then point it to wherever our GraphQL server is being hosted.
In this case, we're hosting it on local host 4000/graphQL.
And lastly, we'll make sure to import this GraphQL module inside of our app module.
So that takes care of the front end setup, but now I'm gonna go into the back end and set up a mutation so we have some data that we can actually update in this app.
Unlike a REST API where we would use something like post, patch, or put to update data on the back end, we just have a single mutation query that we can make that signifies data is going to be updated with this query.
So we'll set up a mutation here that allows a user to like a tweet.
To make that possible, we'll just create a mutation type called like tweet that takes in a tweet ID as an argument and then returns the newly created tweet as its response.
Then we just need to write a resolver for this mutation.
In the resolvers, we'll go ahead and create a mutation object, then give it a like tweet function that is asynchronous, meaning it returns a promise.
Inside this function, we perform the mutation, which is just updating the tweet like count.
So we'll go ahead and make a reference to the tweet itself, then pull the current count of tweets, increment it by 1, then update the data in the database.
And lastly, we'll return the freshest data from the database.
And we'll also want to catch any errors here and return an Apollo error back to the client if the update fails.
That takes of the back end.
Now I wanna show you something really cool you can do on the front end with the Apollo CLI, which is generating all of your type definitions in your Angular app by making a query to your back end server.
First, I'm creating a new directory called types, and then we have this big long command here that you can copy and paste from the source code that will generate the types as a schema dot JSON file.
It does this by making what's called an introspection query, which is a special thing in GraphQL that will return the entire schema of the database to your front end client.
But it's extremely powerful if you're a front end developer because you now know the entire shape of all the data that's available in the back ackend.
So you can see here we now have a TypeScript type for the tweets query that retrieves the items from the database and then also another one for the like tweet mutation, which will update the tweak count.
Now let's go ahead and put these types to use in our app component.
As you saw from the demo, we need this component to loop over an observable array of tweak content and also update the light count when the heart button is clicked.
So we'll bring in Apollo and GraphQL, a few things from RxJS, and the types that we just generated.
First, we'll declare a property called tweets, which is just an observable of the tweet data.
Then we have the tweets query, which is a GraphQL object that defines how we retrieve this from the GraphQL back end.
This is nice because we can explicitly define the data that's needed for the front end user experience, which in this case would just be the tweet ID, the text content, and the like count.
The next step is to send this query off to our back end and return the data as an observable.
So Apollo is a service that we can inject in the constructor, and then to make a query we can call a Apollo watch query, which is just a reference.
And then to get an observable back of the data, we call value changes on it.
Then the A actual observable will contain some additional metadata, so we can just pipe that down to the actual data that we want to show in the front end.
And now we have an observable that we can just subscribe to with the async pipe in the HTML, which we'll see here in a minute.
The mutation is similar, but takes in an ID as a variable, so that value can change depending on which heart button the user clicks.
So we'll define the actual GraphQL query inside of this method which we're calling like tweet, And then it takes in the ID as an argument, and it will return all of the new data about that tweet including its updated like count.
Instead of using Apollo watch query like we did last time, this time we'll use Apollo mutate.
And what's special about this is that we can define our own optimistic response behavior.
In In our case, we know when the user hits the like button, it should increment the current like count by 1.
So by setting up this logic, we'll have A update appear in the UI instantly in the eyes of the user.
And in most cases, we won't have any errors on the back end, so it'll just stay there like it happened instantaneously.
But But if any kind of error does happen, it will come back and revert to the actual value from the server.
So it'll feel like there's 0 latency for your user even though in real life it might take your server a second or 2 to respond.
So now we can jump into the HTML, and we just have a simple observable of tweets that we can loop over.
I'm wrapping it in parentheses then accessing its tweets property because that's where the actual tweet objects live.
Then we can display the text for each tweet and then we'll set up a button here that will update the light count.
Then below that will display the light count which should update instantly when this button is clicked.
On my back end code I set up a method that will give a 5050 chance of throwing an error for each mutation.
So the first time I click the button it goes to 77, gets an error then reverts back to 76.
On the second attempt we don't get an error it days at 77, and then we get the tweet data logged in the console.
Overall, Apollo gives you an awesome way to query a GraphQL API from an Angular app.
If this video helped you, please like and subscribe.
And if you want to learn more about these technologies, consider becoming a pro member at angularfirebase.com.
You'll get access to all kinds of exclusive content and a free copy of my book.
Thanks for watching, and I'll talk to you soon.

Speaker 0: A few weeks ago we built a GraphQL server with Apollo and Node. Js. If you haven't seen that video, make sure to check that one out first to get a better understanding of GraphQL on Apollo, because in today's episode we're going to be tackling the front end side of this equation which involves querying data and providing mutations with optimistic updates in our Angular app. If you're new here make sure to like and subscribe and send a thank you to Arjan Yelamancelli was responsible for writing the code for this lesson. To get started let's first talk about why Apollo and GraphQL are awesome technologies from the front end developer perspective.

Notice how when I click this hard button that the count increases and then a second later our server responds with an error and then it reverts back to the old value. That's known as an optimistic update or latency compensation. And if you use Firebase, you're probably already familiar with this because that's one of the things that the SDK does for you automatically. But if you're not using the Firebase SDK, this is a feature that would be really difficult to implement from scratch. Apollo Angular makes it easy to implement features like this, Plus we can use it with any back end data source that we've set up in our GraphQL server.

If we open this project in Versus Code, you'll notice that we have a back end and front end folder. The back end is the GraphQL server that we built in the first episode. We'll go in there and make some updates, but for the most part, we'll be in the front end, which is an Angular 6 app. In In our front end app, we're going to install Apollo Angular Boost, which is a client library that makes it easy to set up GraphQL in an Angular app, and also a library called Apollo Cogen, which will allow us to generate TypeScript definitions from our server side automatically, which is another really awesome feature that we'll see here in a few minutes. And lastly, we'll use the Angular CLI to generate an NG module for our GraphQL feature.

Then we can go ahead and open up that module, and we'll want to import the Apollo Boost library and add it to the imports array in the NG module. Then we'll add Apollo Boost to the constructor of this module and call Apollo boost create and then point it to wherever our GraphQL server is being hosted. In this case, we're hosting it on local host 4000/graphQL. And lastly, we'll make sure to import this GraphQL module inside of our app module. So that takes care of the front end setup, but now I'm gonna go into the back end and set up a mutation so we have some data that we can actually update in this app.

Unlike a REST API where we would use something like post, patch, or put to update data on the back end, we just have a single mutation query that we can make that signifies data is going to be updated with this query. So we'll set up a mutation here that allows a user to like a tweet. To make that possible, we'll just create a mutation type called like tweet that takes in a tweet ID as an argument and then returns the newly created tweet as its response. Then we just need to write a resolver for this mutation. In the resolvers, we'll go ahead and create a mutation object, then give it a like tweet function that is asynchronous, meaning it returns a promise.

Inside this function, we perform the mutation, which is just updating the tweet like count. So we'll go ahead and make a reference to the tweet itself, then pull the current count of tweets, increment it by 1, then update the data in the database. And lastly, we'll return the freshest data from the database. And we'll also want to catch any errors here and return an Apollo error back to the client if the update fails. That takes of the back end.

Now I wanna show you something really cool you can do on the front end with the Apollo CLI, which is generating all of your type definitions in your Angular app by making a query to your back end server. First, I'm creating a new directory called types, and then we have this big long command here that you can copy and paste from the source code that will generate the types as a schema dot JSON file. It does this by making what's called an introspection query, which is a special thing in GraphQL that will return the entire schema of the database to your front end client. But it's extremely powerful if you're a front end developer because you now know the entire shape of all the data that's available in the back ackend. So you can see here we now have a TypeScript type for the tweets query that retrieves the items from the database and then also another one for the like tweet mutation, which will update the tweak count.

Now let's go ahead and put these types to use in our app component. As you saw from the demo, we need this component to loop over an observable array of tweak content and also update the light count when the heart button is clicked. So we'll bring in Apollo and GraphQL, a few things from RxJS, and the types that we just generated. First, we'll declare a property called tweets, which is just an observable of the tweet data. Then we have the tweets query, which is a GraphQL object that defines how we retrieve this from the GraphQL back end.

This is nice because we can explicitly define the data that's needed for the front end user experience, which in this case would just be the tweet ID, the text content, and the like count. The next step is to send this query off to our back end and return the data as an observable. So Apollo is a service that we can inject in the constructor, and then to make a query we can call a Apollo watch query, which is just a reference. And then to get an observable back of the data, we call value changes on it. Then the A actual observable will contain some additional metadata, so we can just pipe that down to the actual data that we want to show in the front end.

And now we have an observable that we can just subscribe to with the async pipe in the HTML, which we'll see here in a minute. The mutation is similar, but takes in an ID as a variable, so that value can change depending on which heart button the user clicks. So we'll define the actual GraphQL query inside of this method which we're calling like tweet, And then it takes in the ID as an argument, and it will return all of the new data about that tweet including its updated like count. Instead of using Apollo watch query like we did last time, this time we'll use Apollo mutate. And what's special about this is that we can define our own optimistic response behavior.

In In our case, we know when the user hits the like button, it should increment the current like count by 1. So by setting up this logic, we'll have A update appear in the UI instantly in the eyes of the user. And in most cases, we won't have any errors on the back end, so it'll just stay there like it happened instantaneously. But But if any kind of error does happen, it will come back and revert to the actual value from the server. So it'll feel like there's 0 latency for your user even though in real life it might take your server a second or 2 to respond.

So now we can jump into the HTML, and we just have a simple observable of tweets that we can loop over. I'm wrapping it in parentheses then accessing its tweets property because that's where the actual tweet objects live. Then we can display the text for each tweet and then we'll set up a button here that will update the light count. Then below that will display the light count which should update instantly when this button is clicked. On my back end code I set up a method that will give a 5050 chance of throwing an error for each mutation.

So the first time I click the button it goes to 77, gets an error then reverts back to 76. On the second attempt we don't get an error it days at 77, and then we get the tweet data logged in the console. Overall, Apollo gives you an awesome way to query a GraphQL API from an Angular app. If this video helped you, please like and subscribe. And if you want to learn more about these technologies, consider becoming a pro member at angularfirebase.com.

You'll get access to all kinds of exclusive content and a free copy of my book. Thanks for watching, and I'll talk to you soon.
A few weeks ago we built a GraphQL server with Apollo and Node. Js. If you haven't seen that video, make sure to check that one out first to get a better understanding of GraphQL on Apollo, because in today's episode we're going to be tackling the front end side of this equation which involves querying data and providing mutations with optimistic updates in our Angular app. If you're new here make sure to like and subscribe and send a thank you to Arjan Yelamancelli was responsible for writing the code for this lesson. To get started let's first talk about why Apollo and GraphQL are awesome technologies from the front end developer perspective. Notice how when I click this hard button that the count increases and then a second later our server responds with an error and then it reverts back to the old value. That's known as an optimistic update or latency compensation. And if you use Firebase, you're probably already familiar with this because that's one of the things that the SDK does for you automatically. But if you're not using the Firebase SDK, this is a feature that would be really difficult to implement from scratch. Apollo Angular makes it easy to implement features like this, Plus we can use it with any back end data source that we've set up in our GraphQL server. If we open this project in Versus Code, you'll notice that we have a back end and front end folder. The back end is the GraphQL server that we built in the first episode. We'll go in there and make some updates, but for the most part, we'll be in the front end, which is an Angular 6 app. In In our front end app, we're going to install Apollo Angular Boost, which is a client library that makes it easy to set up GraphQL in an Angular app, and also a library called Apollo Cogen, which will allow us to generate TypeScript definitions from our server side automatically, which is another really awesome feature that we'll see here in a few minutes. And lastly, we'll use the Angular CLI to generate an NG module for our GraphQL feature. Then we can go ahead and open up that module, and we'll want to import the Apollo Boost library and add it to the imports array in the NG module. Then we'll add Apollo Boost to the constructor of this module and call Apollo boost create and then point it to wherever our GraphQL server is being hosted.
In this case, we're hosting it on local host 4000/graphQL. And lastly, we'll make sure to import this GraphQL module inside of our app module. So that takes care of the front end setup, but now I'm gonna go into the back end and set up a mutation so we have some data that we can actually update in this app.
databases
Unlike a REST API where we would use something like post, patch, or put to update data on the back end, we just have a single mutation query that we can make that signifies data is going to be updated with this query. So we'll set up a mutation here that allows a user to like a tweet. To make that possible, we'll just create a mutation type called like tweet that takes in a tweet ID as an argument and then returns the newly created tweet as its response. Then we just need to write a resolver for this mutation. In the resolvers, we'll go ahead and create a mutation object, then give it a like tweet function that is asynchronous, meaning it returns a promise.
Inside this function, we perform the mutation, which is just updating the tweet like count. So we'll go ahead and make a reference to the tweet itself, then pull the current count of tweets, increment it by 1, then update the data in the database. And lastly, we'll return the freshest data from the database.
twitter
And we'll also want to catch any errors here and return an Apollo error back to the client if the update fails. That takes of the back end. Now I wanna show you something really cool you can do on the front end with the Apollo CLI, which is generating all of your type definitions in your Angular app by making a query to your back end server.
First, I'm creating a new directory called types, and then we have this big long command here that you can copy and paste from the source code that will generate the types as a schema dot JSON file. It does this by making what's called an introspection query, which is a special thing in GraphQL that will return the entire schema of the database to your front end client. But it's extremely powerful if you're a front end developer because you now know the entire shape of all the data that's available in the back ackend. So you can see here we now have a TypeScript type for the tweets query that retrieves the items from the database and then also another one for the like tweet mutation, which will update the tweak count. Now let's go ahead and put these types to use in our app component. As you saw from the demo, we need this component to loop over an observable array of tweak content and also update the light count when the heart button is clicked. So we'll bring in Apollo and GraphQL, a few things from RxJS, and the types that we just generated. First, we'll declare a property called tweets, which is just an observable of the tweet data. Then we have the tweets query, which is a GraphQL object that defines how we retrieve this from the GraphQL back end. This is nice because we can explicitly define the data that's needed for the front end user experience, which in this case would just be the tweet ID, the text content, and the like count.
data management
databases
twitter
visualization
The next step is to send this query off to our back end and return the data as an observable. So Apollo is a service that we can inject in the constructor, and then to make a query we can call a Apollo watch query, which is just a reference.
And then to get an observable back of the data, we call value changes on it. Then the A actual observable will contain some additional metadata, so we can just pipe that down to the actual data that we want to show in the front end. And now we have an observable that we can just subscribe to with the async pipe in the HTML, which we'll see here in a minute.
data
The mutation is similar, but takes in an ID as a variable, so that value can change depending on which heart button the user clicks. So we'll define the actual GraphQL query inside of this method which we're calling like tweet, And then it takes in the ID as an argument, and it will return all of the new data about that tweet including its updated like count. Instead of using Apollo watch query like we did last time, this time we'll use Apollo mutate. And what's special about this is that we can define our own optimistic response behavior. In In our case, we know when the user hits the like button, it should increment the current like count by 1. So by setting up this logic, we'll have A update appear in the UI instantly in the eyes of the user. And in most cases, we won't have any errors on the back end, so it'll just stay there like it happened instantaneously. But But if any kind of error does happen, it will come back and revert to the actual value from the server.
So it'll feel like there's 0 latency for your user even though in real life it might take your server a second or 2 to respond. So now we can jump into the HTML, and we just have a simple observable of tweets that we can loop over. I'm wrapping it in parentheses then accessing its tweets property because that's where the actual tweet objects live. Then we can display the text for each tweet and then we'll set up a button here that will update the light count. Then below that will display the light count which should update instantly when this button is clicked. On my back end code I set up a method that will give a 5050 chance of throwing an error for each mutation.
twitter
So the first time I click the button it goes to 77, gets an error then reverts back to 76. On the second attempt we don't get an error it days at 77, and then we get the tweet data logged in the console. Overall, Apollo gives you an awesome way to query a GraphQL API from an Angular app.
If this video helped you, please like and subscribe. And if you want to learn more about these technologies, consider becoming a pro member at angularfirebase.com. You'll get access to all kinds of exclusive content and a free copy of my book. Thanks for watching, and I'll talk to you soon.
books
copyright
publishing
youtube
reading
magazines
A few weeks ago we built a GraphQL server with Apollo and Node. Js. If you haven't seen that video, make sure to check that one out first to get a better understanding of GraphQL on Apollo, because in today's episode we're going to be tackling the front end side of this equation which involves querying data and providing mutations with optimistic updates in our Angular app. If you're new here make sure to like and subscribe and send a thank you to Arjan Yelamancelli was responsible for writing the code for this lesson. To get started let's first talk about why Apollo and GraphQL are awesome technologies from the front end developer perspective. Notice how when I click this hard button that the count increases and then a second later our server responds with an error and then it reverts back to the old value. That's known as an optimistic update or latency compensation. And if you use Firebase, you're probably already familiar with this because that's one of the things that the SDK does for you automatically. But if you're not using the Firebase SDK, this is a feature that would be really difficult to implement from scratch. Apollo Angular makes it easy to implement features like this, Plus we can use it with any back end data source that we've set up in our GraphQL server. If we open this project in Versus Code, you'll notice that we have a back end and front end folder. The back end is the GraphQL server that we built in the first episode. We'll go in there and make some updates, but for the most part, we'll be in the front end, which is an Angular 6 app. In In our front end app, we're going to install Apollo Angular Boost, which is a client library that makes it easy to set up GraphQL in an Angular app, and also a library called Apollo Cogen, which will allow us to generate TypeScript definitions from our server side automatically, which is another really awesome feature that we'll see here in a few minutes. And lastly, we'll use the Angular CLI to generate an NG module for our GraphQL feature. Then we can go ahead and open up that module, and we'll want to import the Apollo Boost library and add it to the imports array in the NG module. Then we'll add Apollo Boost to the constructor of this module and call Apollo boost create and then point it to wherever our GraphQL server is being hosted. In this case, we're hosting it on local host 4000/graphQL. And lastly, we'll make sure to import this GraphQL module inside of our app module. So that takes care of the front end setup, but now I'm gonna go into the back end and set up a mutation so we have some data that we can actually update in this app. Unlike a REST API where we would use something like post, patch, or put to update data on the back end, we just have a single mutation query that we can make that signifies data is going to be updated with this query. So we'll set up a mutation here that allows a user to like a tweet. To make that possible, we'll just create a mutation type called like tweet that takes in a tweet ID as an argument and then returns the newly created tweet as its response. Then we just need to write a resolver for this mutation. In the resolvers, we'll go ahead and create a mutation object, then give it a like tweet function that is asynchronous, meaning it returns a promise. Inside this function, we perform the mutation, which is just updating the tweet like count. So we'll go ahead and make a reference to the tweet itself, then pull the current count of tweets, increment it by 1, then update the data in the database. And lastly, we'll return the freshest data from the database. And we'll also want to catch any errors here and return an Apollo error back to the client if the update fails. That takes of the back end. Now I wanna show you something really cool you can do on the front end with the Apollo CLI, which is generating all of your type definitions in your Angular app by making a query to your back end server. First, I'm creating a new directory called types, and then we have this big long command here that you can copy and paste from the source code that will generate the types as a schema dot JSON file. It does this by making what's called an introspection query, which is a special thing in GraphQL that will return the entire schema of the database to your front end client. But it's extremely powerful if you're a front end developer because you now know the entire shape of all the data that's available in the back ackend. So you can see here we now have a TypeScript type for the tweets query that retrieves the items from the database and then also another one for the like tweet mutation, which will update the tweak count. Now let's go ahead and put these types to use in our app component. As you saw from the demo, we need this component to loop over an observable array of tweak content and also update the light count when the heart button is clicked. So we'll bring in Apollo and GraphQL, a few things from RxJS, and the types that we just generated. First, we'll declare a property called tweets, which is just an observable of the tweet data. Then we have the tweets query, which is a GraphQL object that defines how we retrieve this from the GraphQL back end. This is nice because we can explicitly define the data that's needed for the front end user experience, which in this case would just be the tweet ID, the text content, and the like count. The next step is to send this query off to our back end and return the data as an observable. So Apollo is a service that we can inject in the constructor, and then to make a query we can call a Apollo watch query, which is just a reference. And then to get an observable back of the data, we call value changes on it. Then the A actual observable will contain some additional metadata, so we can just pipe that down to the actual data that we want to show in the front end. And now we have an observable that we can just subscribe to with the async pipe in the HTML, which we'll see here in a minute. The mutation is similar, but takes in an ID as a variable, so that value can change depending on which heart button the user clicks. So we'll define the actual GraphQL query inside of this method which we're calling like tweet, And then it takes in the ID as an argument, and it will return all of the new data about that tweet including its updated like count. Instead of using Apollo watch query like we did last time, this time we'll use Apollo mutate. And what's special about this is that we can define our own optimistic response behavior. In In our case, we know when the user hits the like button, it should increment the current like count by 1. So by setting up this logic, we'll have A update appear in the UI instantly in the eyes of the user. And in most cases, we won't have any errors on the back end, so it'll just stay there like it happened instantaneously. But But if any kind of error does happen, it will come back and revert to the actual value from the server. So it'll feel like there's 0 latency for your user even though in real life it might take your server a second or 2 to respond. So now we can jump into the HTML, and we just have a simple observable of tweets that we can loop over. I'm wrapping it in parentheses then accessing its tweets property because that's where the actual tweet objects live. Then we can display the text for each tweet and then we'll set up a button here that will update the light count. Then below that will display the light count which should update instantly when this button is clicked. On my back end code I set up a method that will give a 5050 chance of throwing an error for each mutation. So the first time I click the button it goes to 77, gets an error then reverts back to 76. On the second attempt we don't get an error it days at 77, and then we get the tweet data logged in the console. Overall, Apollo gives you an awesome way to query a GraphQL API from an Angular app. If this video helped you, please like and subscribe. And if you want to learn more about these technologies, consider becoming a pro member at angularfirebase.com. You'll get access to all kinds of exclusive content and a free copy of my book. Thanks for watching, and I'll talk to you soon.
A
a
few
few
weeks
weeks
ago
ago
we
we
built
built
a
a
GraphQL
graphql
server
server
with
with
Apollo
apollo
and
and
Node.
node
Js.
js
If
if
you
you
haven't
haven't
seen
seen
that
that
video,
video
make
make
sure
sure
to
to
check
check
that
that
one
one
out
out
first
first
to
to
get
get
a
a
better
better
understanding
understanding
of
of
GraphQL
graphql
on
on
Apollo,
apollo
because
because
in
in
today's
today's
episode
episode
we're
we're
going
going
to
to
be
be
tackling
tackling
the
the
front
front
end
end
side
side
of
of
this
this
equation
equation
which
which
involves
involves
querying
querying
data
data
and
and
providing
providing
mutations
mutations
with
with
optimistic
optimistic
updates
updates
in
in
our
our
Angular
angular
app.
app
If
if
you're
you're
new
new
here
here
make
make
sure
sure
to
to
like
like
and
and
subscribe
subscribe
and
and
send
send
a
a
thank
thank
you
you
to
to
Arjan
arjan
Yelamancelli
yelamancelli
was
was
responsible
responsible
for
for
writing
writing
the
the
code
code
for
for
this
this
lesson.
lesson
To
to
get
get
started
started
let's
let's
first
first
talk
talk
about
about
why
why
Apollo
apollo
and
and
GraphQL
graphql
are
are
awesome
awesome
technologies
technologies
from
from
the
the
front
front
end
end
developer
developer
perspective.
perspective
Notice
notice
how
how
when
when
I
i
click
click
this
this
hard
hard
button
button
that
that
the
the
count
count
increases
increases
and
and
then
then
a
a
second
second
later
later
our
our
server
server
responds
responds
with
with
an
an
error
error
and
and
then
then
it
it
reverts
reverts
back
back
to
to
the
the
old
old
value.
value
That's
that's
known
known
as
as
an
an
optimistic
optimistic
update
update
or
or
latency
latency
compensation.
compensation
And
and
if
if
you
you
use
use
Firebase,
firebase
you're
you're
probably
probably
already
already
familiar
familiar
with
with
this
this
because
because
that's
that's
one
one
of
of
the
the
things
things
that
that
the
the
SDK
sdk
does
does
for
for
you
you
automatically.
automatically
But
but
if
if
you're
you're
not
not
using
using
the
the
Firebase
firebase
SDK,
sdk
this
this
is
is
a
a
feature
feature
that
that
would
would
be
be
really
really
difficult
difficult
to
to
implement
implement
from
from
scratch.
scratch
Apollo
apollo
Angular
angular
makes
makes
it
it
easy
easy
to
to
implement
implement
features
features
like
like
this,
this
Plus
plus
we
we
can
can
use
use
it
it
with
with
any
any
back
back
end
end
data
data
source
source
that
that
we've
we've
set
set
up
up
in
in
our
our
GraphQL
graphql
server.
server
If
if
we
we
open
open
this
this
project
project
in
in
Versus
versus
Code,
code
you'll
you'll
notice
notice
that
that
we
we
have
have
a
a
back
back
end
end
and
and
front
front
end
end
folder.
folder
The
the
back
back
end
end
is
is
the
the
GraphQL
graphql
server
server
that
that
we
we
built
built
in
in
the
the
first
first
episode.
episode
We'll
we'll
go
go
in
in
there
there
and
and
make
make
some
some
updates,
updates
but
but
for
for
the
the
most
most
part,
part
we'll
we'll
be
be
in
in
the
the
front
front
end,
end
which
which
is
is
an
an
Angular
angular
6
6
app.
app
In
in
In
in
our
our
front
front
end
end
app,
app
we're
we're
going
going
to
to
install
install
Apollo
apollo
Angular
angular
Boost,
boost
which
which
is
is
a
a
client
client
library
library
that
that
makes
makes
it
it
easy
easy
to
to
set
set
up
up
GraphQL
graphql
in
in
an
an
Angular
angular
app,
app
and
and
also
also
a
a
library
library
called
called
Apollo
apollo
Cogen,
cogen
which
which
will
will
allow
allow
us
us
to
to
generate
generate
TypeScript
typescript
definitions
definitions
from
from
our
our
server
server
side
side
automatically,
automatically
which
which
is
is
another
another
really
really
awesome
awesome
feature
feature
that
that
we'll
we'll
see
see
here
here
in
in
a
a
few
few
minutes.
minutes
And
and
lastly,
lastly
we'll
we'll
use
use
the
the
Angular
angular
CLI
cli
to
to
generate
generate
an
an
NG
ng
module
module
for
for
our
our
GraphQL
graphql
feature.
feature
Then
then
we
we
can
can
go
go
ahead
ahead
and
and
open
open
up
up
that
that
module,
module
and
and
we'll
we'll
want
want
to
to
import
import
the
the
Apollo
apollo
Boost
boost
library
library
and
and
add
add
it
it
to
to
the
the
imports
imports
array
array
in
in
the
the
NG
ng
module.
module
Then
then
we'll
we'll
add
add
Apollo
apollo
Boost
boost
to
to
the
the
constructor
constructor
of
of
this
this
module
module
and
and
call
call
Apollo
apollo
boost
boost
create
create
and
and
then
then
point
point
it
it
to
to
wherever
wherever
our
our
GraphQL
graphql
server
server
is
is
being
being
hosted.
hosted
In
in
this
this
case,
case
we're
we're
hosting
hosting
it
it
on
on
local
local
host
host
4000/graphQL.
4000/graphql
And
and
lastly,
lastly
we'll
we'll
make
make
sure
sure
to
to
import
import
this
this
GraphQL
graphql
module
module
inside
inside
of
of
our
our
app
app
module.
module
So
so
that
that
takes
takes
care
care
of
of
the
the
front
front
end
end
setup,
setup
but
but
now
now
I'm
i'm
gonna
gonna
go
go
into
into
the
the
back
back
end
end
and
and
set
set
up
up
a
a
mutation
mutation
so
so
we
we
have
have
some
some
data
data
that
that
we
we
can
can
actually
actually
update
update
in
in
this
this
app.
app
Unlike
unlike
a
a
REST
rest
API
api
where
where
we
we
would
would
use
use
something
something
like
like
post,
post
patch,
patch
or
or
put
put
to
to
update
update
data
data
on
on
the
the
back
back
end,
end
we
we
just
just
have
have
a
a
single
single
mutation
mutation
query
query
that
that
we
we
can
can
make
make
that
that
signifies
signifies
data
data
is
is
going
going
to
to
be
be
updated
updated
with
with
this
this
query.
query
So
so
we'll
we'll
set
set
up
up
a
a
mutation
mutation
here
here
that
that
allows
allows
a
a
user
user
to
to
like
like
a
a
tweet.
tweet
To
to
make
make
that
that
possible,
possible
we'll
we'll
just
just
create
create
a
a
mutation
mutation
type
type
called
called
like
like
tweet
tweet
that
that
takes
takes
in
in
a
a
tweet
tweet
ID
id
as
as
an
an
argument
argument
and
and
then
then
returns
returns
the
the
newly
newly
created
created
tweet
tweet
as
as
its
its
response.
response
Then
then
we
we
just
just
need
need
to
to
write
write
a
a
resolver
resolver
for
for
this
this
mutation.
mutation
In
in
the
the
resolvers,
resolvers
we'll
we'll
go
go
ahead
ahead
and
and
create
create
a
a
mutation
mutation
object,
object
then
then
give
give
it
it
a
a
like
like
tweet
tweet
function
function
that
that
is
is
asynchronous,
asynchronous
meaning
meaning
it
it
returns
returns
a
a
promise.
promise
Inside
inside
this
this
function,
function
we
we
perform
perform
the
the
mutation,
mutation
which
which
is
is
just
just
updating
updating
the
the
tweet
tweet
like
like
count.
count
So
so
we'll
we'll
go
go
ahead
ahead
and
and
make
make
a
a
reference
reference
to
to
the
the
tweet
tweet
itself,
itself
then
then
pull
pull
the
the
current
current
count
count
of
of
tweets,
tweets
increment
increment
it
it
by
by
1,
1
then
then
update
update
the
the
data
data
in
in
the
the
database.
database
And
and
lastly,
lastly
we'll
we'll
return
return
the
the
freshest
freshest
data
data
from
from
the
the
database.
database
And
and
we'll
we'll
also
also
want
want
to
to
catch
catch
any
any
errors
errors
here
here
and
and
return
return
an
an
Apollo
apollo
error
error
back
back
to
to
the
the
client
client
if
if
the
the
update
update
fails.
fails
That
that
takes
takes
of
of
the
the
back
back
end.
end
Now
now
I
i
wanna
wanna
show
show
you
you
something
something
really
really
cool
cool
you
you
can
can
do
do
on
on
the
the
front
front
end
end
with
with
the
the
Apollo
apollo
CLI,
cli
which
which
is
is
generating
generating
all
all
of
of
your
your
type
type
definitions
definitions
in
in
your
your
Angular
angular
app
app
by
by
making
making
a
a
query
query
to
to
your
your
back
back
end
end
server.
server
First,
first
I'm
i'm
creating
creating
a
a
new
new
directory
directory
called
called
types,
types
and
and
then
then
we
we
have
have
this
this
big
big
long
long
command
command
here
here
that
that
you
you
can
can
copy
copy
and
and
paste
paste
from
from
the
the
source
source
code
code
that
that
will
will
generate
generate
the
the
types
types
as
as
a
a
schema
schema
dot
dot
JSON
json
file.
file
It
it
does
does
this
this
by
by
making
making
what's
what's
called
called
an
an
introspection
introspection
query,
query
which
which
is
is
a
a
special
special
thing
thing
in
in
GraphQL
graphql
that
that
will
will
return
return
the
the
entire
entire
schema
schema
of
of
the
the
database
database
to
to
your
your
front
front
end
end
client.
client
But
but
it's
it's
extremely
extremely
powerful
powerful
if
if
you're
you're
a
a
front
front
end
end
developer
developer
because
because
you
you
now
now
know
know
the
the
entire
entire
shape
shape
of
of
all
all
the
the
data
data
that's
that's
available
available
in
in
the
the
back
back
ackend.
ackend
So
so
you
you
can
can
see
see
here
here
we
we
now
now
have
have
a
a
TypeScript
typescript
type
type
for
for
the
the
tweets
tweets
query
query
that
that
retrieves
retrieves
the
the
items
items
from
from
the
the
database
database
and
and
then
then
also
also
another
another
one
one
for
for
the
the
like
like
tweet
tweet
mutation,
mutation
which
which
will
will
update
update
the
the
tweak
tweak
count.
count
Now
now
let's
let's
go
go
ahead
ahead
and
and
put
put
these
these
types
types
to
to
use
use
in
in
our
our
app
app
component.
component
As
as
you
you
saw
saw
from
from
the
the
demo,
demo
we
we
need
need
this
this
component
component
to
to
loop
loop
over
over
an
an
observable
observable
array
array
of
of
tweak
tweak
content
content
and
and
also
also
update
update
the
the
light
light
count
count
when
when
the
the
heart
heart
button
button
is
is
clicked.
clicked
So
so
we'll
we'll
bring
bring
in
in
Apollo
apollo
and
and
GraphQL,
graphql
a
a
few
few
things
things
from
from
RxJS,
rxjs
and
and
the
the
types
types
that
that
we
we
just
just
generated.
generated
First,
first
we'll
we'll
declare
declare
a
a
property
property
called
called
tweets,
tweets
which
which
is
is
just
just
an
an
observable
observable
of
of
the
the
tweet
tweet
data.
data
Then
then
we
we
have
have
the
the
tweets
tweets
query,
query
which
which
is
is
a
a
GraphQL
graphql
object
object
that
that
defines
defines
how
how
we
we
retrieve
retrieve
this
this
from
from
the
the
GraphQL
graphql
back
back
end.
end
This
this
is
is
nice
nice
because
because
we
we
can
can
explicitly
explicitly
define
define
the
the
data
data
that's
that's
needed
needed
for
for
the
the
front
front
end
end
user
user
experience,
experience
which
which
in
in
this
this
case
case
would
would
just
just
be
be
the
the
tweet
tweet
ID,
id
the
the
text
text
content,
content
and
and
the
the
like
like
count.
count
The
the
next
next
step
step
is
is
to
to
send
send
this
this
query
query
off
off
to
to
our
our
back
back
end
end
and
and
return
return
the
the
data
data
as
as
an
an
observable.
observable
So
so
Apollo
apollo
is
is
a
a
service
service
that
that
we
we
can
can
inject
inject
in
in
the
the
constructor,
constructor
and
and
then
then
to
to
make
make
a
a
query
query
we
we
can
can
call
call
a
a
Apollo
apollo
watch
watch
query,
query
which
which
is
is
just
just
a
a
reference.
reference
And
and
then
then
to
to
get
get
an
an
observable
observable
back
back
of
of
the
the
data,
data
we
we
call
call
value
value
changes
changes
on
on
it.
it
Then
then
the
the
A
a
actual
actual
observable
observable
will
will
contain
contain
some
some
additional
additional
metadata,
metadata
so
so
we
we
can
can
just
just
pipe
pipe
that
that
down
down
to
to
the
the
actual
actual
data
data
that
that
we
we
want
want
to
to
show
show
in
in
the
the
front
front
end.
end
And
and
now
now
we
we
have
have
an
an
observable
observable
that
that
we
we
can
can
just
just
subscribe
subscribe
to
to
with
with
the
the
async
async
pipe
pipe
in
in
the
the
HTML,
html
which
which
we'll
we'll
see
see
here
here
in
in
a
a
minute.
minute
The
the
mutation
mutation
is
is
similar,
similar
but
but
takes
takes
in
in
an
an
ID
id
as
as
a
a
variable,
variable
so
so
that
that
value
value
can
can
change
change
depending
depending
on
on
which
which
heart
heart
button
button
the
the
user
user
clicks.
clicks
So
so
we'll
we'll
define
define
the
the
actual
actual
GraphQL
graphql
query
query
inside
inside
of
of
this
this
method
method
which
which
we're
we're
calling
calling
like
like
tweet,
tweet
And
and
then
then
it
it
takes
takes
in
in
the
the
ID
id
as
as
an
an
argument,
argument
and
and
it
it
will
will
return
return
all
all
of
of
the
the
new
new
data
data
about
about
that
that
tweet
tweet
including
including
its
its
updated
updated
like
like
count.
count
Instead
instead
of
of
using
using
Apollo
apollo
watch
watch
query
query
like
like
we
we
did
did
last
last
time,
time
this
this
time
time
we'll
we'll
use
use
Apollo
apollo
mutate.
mutate
And
and
what's
what's
special
special
about
about
this
this
is
is
that
that
we
we
can
can
define
define
our
our
own
own
optimistic
optimistic
response
response
behavior.
behavior
In
in
In
in
our
our
case,
case
we
we
know
know
when
when
the
the
user
user
hits
hits
the
the
like
like
button,
button
it
it
should
should
increment
increment
the
the
current
current
like
like
count
count
by
by
1.
1
So
so
by
by
setting
setting
up
up
this
this
logic,
logic
we'll
we'll
have
have
A
a
update
update
appear
appear
in
in
the
the
UI
ui
instantly
instantly
in
in
the
the
eyes
eyes
of
of
the
the
user.
user
And
and
in
in
most
most
cases,
cases
we
we
won't
won't
have
have
any
any
errors
errors
on
on
the
the
back
back
end,
end
so
so
it'll
it'll
just
just
stay
stay
there
there
like
like
it
it
happened
happened
instantaneously.
instantaneously
But
but
But
but
if
if
any
any
kind
kind
of
of
error
error
does
does
happen,
happen
it
it
will
will
come
come
back
back
and
and
revert
revert
to
to
the
the
actual
actual
value
value
from
from
the
the
server.
server
So
so
it'll
it'll
feel
feel
like
like
there's
there's
0
0
latency
latency
for
for
your
your
user
user
even
even
though
though
in
in
real
real
life
life
it
it
might
might
take
take
your
your
server
server
a
a
second
second
or
or
2
2
to
to
respond.
respond
So
so
now
now
we
we
can
can
jump
jump
into
into
the
the
HTML,
html
and
and
we
we
just
just
have
have
a
a
simple
simple
observable
observable
of
of
tweets
tweets
that
that
we
we
can
can
loop
loop
over.
over
I'm
i'm
wrapping
wrapping
it
it
in
in
parentheses
parentheses
then
then
accessing
accessing
its
its
tweets
tweets
property
property
because
because
that's
that's
where
where
the
the
actual
actual
tweet
tweet
objects
objects
live.
live
Then
then
we
we
can
can
display
display
the
the
text
text
for
for
each
each
tweet
tweet
and
and
then
then
we'll
we'll
set
set
up
up
a
a
button
button
here
here
that
that
will
will
update
update
the
the
light
light
count.
count
Then
then
below
below
that
that
will
will
display
display
the
the
light
light
count
count
which
which
should
should
update
update
instantly
instantly
when
when
this
this
button
button
is
is
clicked.
clicked
On
on
my
my
back
back
end
end
code
code
I
i
set
set
up
up
a
a
method
method
that
that
will
will
give
give
a
a
5050
5050
chance
chance
of
of
throwing
throwing
an
an
error
error
for
for
each
each
mutation.
mutation
So
so
the
the
first
first
time
time
I
i
click
click
the
the
button
button
it
it
goes
goes
to
to
77,
77
gets
gets
an
an
error
error
then
then
reverts
reverts
back
back
to
to
76.
76
On
on
the
the
second
second
attempt
attempt
we
we
don't
don't
get
get
an
an
error
error
it
it
days
days
at
at
77,
77
and
and
then
then
we
we
get
get
the
the
tweet
tweet
data
data
logged
logged
in
in
the
the
console.
console
Overall,
overall
Apollo
apollo
gives
gives
you
you
an
an
awesome
awesome
way
way
to
to
query
query
a
a
GraphQL
graphql
API
api
from
from
an
an
Angular
angular
app.
app
If
if
this
this
video
video
helped
helped
you,
you
please
please
like
like
and
and
subscribe.
subscribe
And
and
if
if
you
you
want
want
to
to
learn
learn
more
more
about
about
these
these
technologies,
technologies
consider
consider
becoming
becoming
a
a
pro
pro
member
member
at
at
angularfirebase.com.
angularfirebase.com
You'll
you'll
get
get
access
access
to
to
all
all
kinds
kinds
of
of
exclusive
exclusive
content
content
and
and
a
a
free
free
copy
copy
of
of
my
my
book.
book
Thanks
thanks
for
for
watching,
watching
and
and
I'll
i'll
talk
talk
to
to
you
you
soon.
soon
success
The speakers discuss the implementation of Apollo and GraphQL for developers, including creating mutation queries to update data in the front end and importing the Apollo Boost library. They also show how to use the API in an app component and explain how to access and display the graphite data. The speakers also mention a free book and encourage viewers to like and subscribe to their channel.
Apollo Angular GraphQL Optimistic UI
A few weeks ago we built a GraphQL server with Apollo and Node. Js. If you haven't seen that video, make sure to check that one out first to get a better understanding of GraphQL on Apollo, because in today's episode we're going to be tackling the front end side of this equation which involves querying data and providing mutations with optimistic updates in our Angular app. If you're new here make sure to like and subscribe and send a thank you to Arjan Yelamancelli was responsible for writing the code for this lesson. To get started let's first talk about why Apollo and GraphQL are awesome technologies from the front end developer perspective. Notice how when I click this hard button that the count increases and then a second later our server responds with an error and then it reverts back to the old value. That's known as an optimistic update or latency compensation. And if you use Firebase, you're probably already familiar with this because that's one of the things that the SDK does for you automatically. But if you're not using the Firebase SDK, this is a feature that would be really difficult to implement from scratch. Apollo Angular makes it easy to implement features like this, Plus we can use it with any back end data source that we've set up in our GraphQL server. If we open this project in Versus Code, you'll notice that we have a back end and front end folder. The back end is the GraphQL server that we built in the first episode. We'll go in there and make some updates, but for the most part, we'll be in the front end, which is an Angular 6 app. In In our front end app, we're going to install Apollo Angular Boost, which is a client library that makes it easy to set up GraphQL in an Angular app, and also a library called Apollo Cogen, which will allow us to generate TypeScript definitions from our server side automatically, which is another really awesome feature that we'll see here in a few minutes. And lastly, we'll use the Angular CLI to generate an NG module for our GraphQL feature. Then we can go ahead and open up that module, and we'll want to import the Apollo Boost library and add it to the imports array in the NG module. Then we'll add Apollo Boost to the constructor of this module and call Apollo boost create and then point it to wherever our GraphQL server is being hosted. In this case, we're hosting it on local host 4000/graphQL. And lastly, we'll make sure to import this GraphQL module inside of our app module. So that takes care of the front end setup, but now I'm gonna go into the back end and set up a mutation so we have some data that we can actually update in this app. Unlike a REST API where we would use something like post, patch, or put to update data on the back end, we just have a single mutation query that we can make that signifies data is going to be updated with this query. So we'll set up a mutation here that allows a user to like a tweet. To make that possible, we'll just create a mutation type called like tweet that takes in a tweet ID as an argument and then returns the newly created tweet as its response. Then we just need to write a resolver for this mutation. In the resolvers, we'll go ahead and create a mutation object, then give it a like tweet function that is asynchronous, meaning it returns a promise. Inside this function, we perform the mutation, which is just updating the tweet like count. So we'll go ahead and make a reference to the tweet itself, then pull the current count of tweets, increment it by 1, then update the data in the database. And lastly, we'll return the freshest data from the database. And we'll also want to catch any errors here and return an Apollo error back to the client if the update fails. That takes of the back end. Now I wanna show you something really cool you can do on the front end with the Apollo CLI, which is generating all of your type definitions in your Angular app by making a query to your back end server. First, I'm creating a new directory called types, and then we have this big long command here that you can copy and paste from the source code that will generate the types as a schema dot JSON file. It does this by making what's called an introspection query, which is a special thing in GraphQL that will return the entire schema of the database to your front end client. But it's extremely powerful if you're a front end developer because you now know the entire shape of all the data that's available in the back ackend. So you can see here we now have a TypeScript type for the tweets query that retrieves the items from the database and then also another one for the like tweet mutation, which will update the tweak count. Now let's go ahead and put these types to use in our app component. As you saw from the demo, we need this component to loop over an observable array of tweak content and also update the light count when the heart button is clicked. So we'll bring in Apollo and GraphQL, a few things from RxJS, and the types that we just generated. First, we'll declare a property called tweets, which is just an observable of the tweet data. Then we have the tweets query, which is a GraphQL object that defines how we retrieve this from the GraphQL back end. This is nice because we can explicitly define the data that's needed for the front end user experience, which in this case would just be the tweet ID, the text content, and the like count. The next step is to send this query off to our back end and return the data as an observable. So Apollo is a service that we can inject in the constructor, and then to make a query we can call a Apollo watch query, which is just a reference. And then to get an observable back of the data, we call value changes on it. Then the A actual observable will contain some additional metadata, so we can just pipe that down to the actual data that we want to show in the front end. And now we have an observable that we can just subscribe to with the async pipe in the HTML, which we'll see here in a minute. The mutation is similar, but takes in an ID as a variable, so that value can change depending on which heart button the user clicks. So we'll define the actual GraphQL query inside of this method which we're calling like tweet, And then it takes in the ID as an argument, and it will return all of the new data about that tweet including its updated like count. Instead of using Apollo watch query like we did last time, this time we'll use Apollo mutate. And what's special about this is that we can define our own optimistic response behavior. In In our case, we know when the user hits the like button, it should increment the current like count by 1. So by setting up this logic, we'll have A update appear in the UI instantly in the eyes of the user. And in most cases, we won't have any errors on the back end, so it'll just stay there like it happened instantaneously. But But if any kind of error does happen, it will come back and revert to the actual value from the server. So it'll feel like there's 0 latency for your user even though in real life it might take your server a second or 2 to respond. So now we can jump into the HTML, and we just have a simple observable of tweets that we can loop over. I'm wrapping it in parentheses then accessing its tweets property because that's where the actual tweet objects live. Then we can display the text for each tweet and then we'll set up a button here that will update the light count. Then below that will display the light count which should update instantly when this button is clicked. On my back end code I set up a method that will give a 5050 chance of throwing an error for each mutation. So the first time I click the button it goes to 77, gets an error then reverts back to 76. On the second attempt we don't get an error it days at 77, and then we get the tweet data logged in the console. Overall, Apollo gives you an awesome way to query a GraphQL API from an Angular app. If this video helped you, please like and subscribe. And if you want to learn more about these technologies, consider becoming a pro member at angularfirebase.com. You'll get access to all kinds of exclusive content and a free copy of my book. Thanks for watching, and I'll talk to you soon.
The speakers discuss the implementation of Apollo and GraphQL for developers, including creating mutation queries to update data in the front end and importing the Apollo Boost library. They also show how to use the API in an app component and explain how to access and display the graphite data. The speakers also mention a free book and encourage viewers to like and subscribe to their channel.