hey guys welcome back to cold room in
this video we’re gonna talk about a
polar graph QL now I’ve made a video
about the pole a few months ago but
there’s been quite a few updates and I
wanted to make you remake off this video
to keep things up to date now the first
question would be what is a polar graph
QL now as it turns out it’s actually an
open source platform that includes a
bunch of different products one of them
is a polo client and this is basically a
library that allows you to connect your
front-end with the graphical back-end
and it also comes with a bunch of
implementations for libraries like react
view and angular next up we have a polo
engine which is a library that provides
you with a bunch of tools for
performance and error tracking and last
stop we also have a polo server and this
is the one I’m going to be focusing on
in this video and this library basically
allows you to create graph QL backends
within OGS server so if we click on
learn more we’re gonna be redirected to
the home page of a polo server and now
the premise of a polo server is actually
pretty simple just like with Express
graph QL you define your schema with a
bunch of type definitions you create a
map of resolver functions to resolve all
of the fields on the schema and last
stop you new up the instance of a polo
server you pass in tab definitions and
resolvers and finally you can tell the
server to listen to any incoming
connections now if you look at some of
the highlights of a polo server it has a
schema first approach which is basically
to say that the development of the
server is data driven we also have
automatic persisted queries and this
basically allows you to pass in IDs or
hashes instead of the entire queries we
also have simplified mocking so instead
of providing a map of resolver so you
can actually set the mocks to true and
so basically map all your schema with
some dummy data we also have simplified
real time data updates so even though
graph key already has subscription
support Apolo server actually makes it a
lot simpler to integrate and implement
we also have tools to measure
performance and also report any errors
happening in the application now this
actually comes from a polo engine but a
polo server itself provides an easy
integration with that service and last
stop we also have advanced caching and
this one refers to the technique of
batching and caching your queries to
avoid fetching the same
multiple times now to see this in action
we’re gonna go back to our project over
here so if you don’t have this
repository you can basically go to
github.com slash Alex nine nine six
slash graft you all chat but I also
include the link in the description
below but so far we have the same
application from video number two and if
you’re interested to see the code for
video 1 you can also switch the branch
to graph QL j/s alright so what you can
do is you can go ahead and clone the
repo yourself you’re gonna get the
starter project for this video now I
already have the code in my editors I’m
going to switch back there and the first
thing we need to do is let’s go to
package.json so far we have three
different dependencies we have Express
we have Express graph qo which is in
middleware from Facebook to instantiate
a graphical server on top of the
existing Express application and last
step we also have graph QL which is a
library for parsing and validating and
executing graphical queries now we do
need to keep the graph QL dependency but
we don’t actually need any of the two
other dependencies so we can actually
uninstall them first so let’s do yarn
remove those two dependencies I’m gonna
remove Express and I’m also gonna remove
Express graph QL so once they’re gone we
can actually go ahead and add a poll
server this is gonna install the Apolo
server dependency for us no uphol server
actually requires you to install graph
QL though because we already have it we
can just skip that step and just include
a poll server alone it’s also safe to
remove Express from the list of the
Bennis ease because a poll server comes
in with an integrated Express server so
we don’t actually have to install it
ourselves now if we go back to index j s
we already have a bunch of code in here
so we’re gonna start refactoring it but
first of all we’re gonna pull in a poll
server so let’s do exactly that let’s do
Const we’re gonna have a named import
now we’re gonna have a required
statement of Apollo server so now let’s
go back up here and we can have an
Apollo server import we also need to
import gql template literal helper and
this one is gonna be used for our schema
but let’s do it step by step so first of
all we can remove Express we can also
get rid of graph QL HTTP
built schema we can also keep crypto for
now because it’s gonna be used to
generate IDs for our users over here now
moving on let’s actually update the
schema when I change it to type
definitions and this is really just a
convention to follow but you could
basically call it anything you’re gonna
see in a second why it’s useful to call
it type definitions now we also need to
change build schema to gql now this will
be not a function call but it’s actually
going to be the template literal call so
we’re gonna call it on gql so we need to
remove those parentheses you could also
see that we get syntax highlighting out
of the box and that’s actually because
of a special extension you can install
it’s called graph ql4 vs code so this
one basically allows you to see your
graph your schema with useful highlights
but so once we have our type definitions
we can move on to our route value which
I’m going to change to resolvers well
this one is gonna be a map so you can
provide in object just a simple object
literal but you also need to provide a
bunch of keys now the first one of them
is actually query and queries where you
define all your top-level resolvers so
anything that goes inside of the root
query also needs to be present on the
query resolver map did you put inside
the resolvers
object so we can go ahead and move
messages user and users instead of query
we’re gonna need to update the code as
well so first off I’m gonna get rid of
this map function so we don’t need to
wrap the users with the user class so we
can safely remove that call now for the
user itself we can go ahead and fetch
the user so I’m going to remove the
brackets over here we don’t need them
remove that rest of the code as well so
what we need to do is we basically need
to call the find method on the user’s
collection or array and then we’re gonna
find the user by the ID passed to the
arguments now we have to be careful with
the arguments over here because the
signature for resolver functions is
actually different in a polo server as
it is in Express graph QL so as it turns
out in Express graph QL we get a method
that has the following signature so we
first of all get a list of arguments as
the first parameter we also get the
context
value and we also get the info object
and now this I actually documented in
the repo if you scroll down to the
readme you’re gonna find a signature for
each resolver function and you can also
put it on the class as well it’s gonna
have the same exact signature as an
individual resolver function so we get
our arguments we get the context and we
also get the info object but the context
is something you can provide optionally
and the info is basically an object that
contains the information about the
incoming query now with a pole server
like I said the signature of this
function becomes a little bit different
first of all we get the root object now
this would object by default is going to
be the value of the root value you can
pass into your server optionally in this
case we’re not gonna have any root value
but we do have a list of arguments so
the arguments in fact become the second
argument to this resolver function over
here so we can actually go ahead and
destructor it ourselves we can grab the
ID out of it like this the messages we
can keep them as they are but for the
add user mutation we actually need to
add in another key over here so we can
call it mutation will pass in the add
user
function inside like this let me kill
off that space and now lastly the add
user function is gonna change as well so
the first argument once again is not
going to be the list of arguments but it
will actually be the root object which
in this case will be undefined we still
have to provide it so make sure to put
in the arguments as the second parameter
to the function now we can kill the
instantiation of express we don’t have
any Express framework so far we can
actually also remove all the code at the
end now what do we do with these
messages over here because the messages
have to be resolved on the user object
what if we make a query that asks for
messages on the user so we’re gonna need
to find a way to deal with those
messages now in Express graph kill you
really don’t have that much choice
because your root value object only
allows you to create top-level resolvers
with a pole server everything actually
changes because now you can go ahead and
create nested types so you can actually
go ahead and create a definition for a
user so anything that you want to
resolve on the user that’s not available
on the actual data source so something
like let’s say messages right that’s
actually not available on the data
source we can go ahead and create a
definition for those messages inside of
that user resolver function so we can go
ahead and paste the messages in here I’m
going to go ahead and create this as a
function once again we can remove the
curly braces we can just return any
messages but in this case we do need to
provide one argument and it’s actually
going to be the root value now remember
I told you that the root value inside of
query or inside of mutation is typically
going to be undefined unless you provide
a value for root value to your server in
this case the root object will actually
be the user now that’s because the user
is being resolved on the user’s
collection so for example if you make a
query to users and you also include a
sub selection of messages on those users
those messages will be resolved on the
user object and that’s why this user key
over here
anything that’s listed under that key
will also be resolved with the user
object itself so we can basically just
rename root to user just for clarity and
this one will refer to a single
individual user object when this
function is being called so we can go
ahead and reference the user ID like
this we do need to actually check those
messages against the user ID to filter
them down accordingly but once that’s
done we should be good to go we should
be all set now we have our type
definitions as well as the resolvers and
everything should hopefully be resolved
correctly so we can go ahead and create
our server in the end so let’s do a
constant of server we’re gonna call a
poll server like this we’re gonna new it
up we’re gonna pass in our type
definitions as well as resolvers so once
that’s done we can actually go ahead and
do a server listen command this is gonna
spit up a raw file server on a slash
graph QL endpoint and it’s also gonna
serve up on port 4000 by default but
once this listen function resolves we’re
gonna have an object so let’s do it then
we’re gonna have destructuring statement
let’s have a URL off of that object now
let’s finally do a console log of that
URL like this unless thought because
we’re resolving messages on the user
object inside of resolvers map we can
actually go ahead and delete the user
class it’s not going to be used anymore
so let’s delete it and then finally we
can go back to our package JSON let’s go
ahead and create a script so we can call
it let’s say watch we can just call node
Mon like this without any arguments and
it’s going to default to index GS file
that we have in here okay so going back
to our terminal we can go ahead and do
yarn watch this will spin up the server
so we can go ahead and click on the link
this will open up the graph QL
playground ID so what we can do is we
can actually fire off queries from over
here just like what we do
with graphical interface if I go ahead
and run that query this will get us all
the users with all of the messages but
we could also go ahead and select an
individual user so let’s say a user with
ID of 1 we can go ahead and fetch the ID
the name perhaps also the messages off
that user let’s say the body and create
it at so there we go we got an object of
user with the idea of 1 and we also get
all of the messages for that user so all
of the queries should be working fine
but this is really just the beginning
Apolo server comes with a lot of
different features that we can start
using so for example if you wanted to go
ahead and experiment with walking we can
actually go ahead and remove resolvers
from our Polo server instantiation
statement we can actually just put in
machs and set it to true and now we’re
not passing any resolvers so we’re not
going to be resolving any data we’re not
gonna be actually reaching out its your
static collection over here and we’re
actually gonna be serving up and walks
so if I go back to the browser let’s say
if I go ahead and switch back to our
previous query on all of the users so if
I go ahead and fire off that you’re
gonna see that we get a bunch of
different objects actually we got two
but you can see that they have randomly
generated IDs and also
randomly-generated fields like email and
name and the same goes also for messages
so all those different scalar types like
ID or a string on the body or created
that field those are gonna be
auto-generated for us because we’ve set
up the marks property to true now this
is useful for prototyping especially if
you were developing the front-end and we
really don’t have a functional backing
yet or that backing is being actively
developed you just go ahead and set the
mark’s property to true and this will
basically mock up the back end for you
but i’ll bring it back to resolvers and
so far we’re basically done this is a
functional server what we’re basically
done is we’ve converted it from Express
graph QL to a polo server who can
actually close off right now but one of
the things I’ll mention before signing
off is if you go back to the
documentation over here if you go ahead
and click on get started first of all we
can find the documentation for the
resolver so if you go ahead and click on
fetch data with resolvers this will
bring you up to this section over here
you can read up more about the actual
signature of each resolver function like
I said you really have to be careful
about this one because the first
argument will be the root value or the
parent value as opposed to the arguments
object as it is an express graphical and
I was aside from that and what we’ve
done in this video is we’ve created a
standalone server and this is really
just sugar for creating an express
server and attaching the Apolo server on
top of it but you could actually go
ahead and do it yourself so if you
switch to building a server section
scroll down you’re gonna find is
subsection for creating an Express
server yourself now let me go ahead and
find it this would be the middle worth
section over here if you pull in a polo
Server Express library this one allows
you to apply the graph QL middleware
yourself so you can go ahead and create
your server like with it in this video
but if you already have an existing
Express app you can go ahead and just
simply apply the middleware bypassing
the application instance that you
already have in your app and then of
course you could also have a bunch of
different other routes that you want to
initialize so you can basically
to all servers alongside the existing
Express application right so this is
basically it for this video and as
you’ve probably guessed I’m coming back
to the graph QL series so starting with
this week I’m gonna be working on that
series again so with the exception of a
few videos perhaps in the material UI
series I’m gonna be focusing on this
playlist exclusively so I’m back in the
game and we’re gonna be continuing with
a series next week so I hope you enjoyed
this tutorial and I’m gonna see you next time take care
this video we’re gonna talk about a
polar graph QL now I’ve made a video
about the pole a few months ago but
there’s been quite a few updates and I
wanted to make you remake off this video
to keep things up to date now the first
question would be what is a polar graph
QL now as it turns out it’s actually an
open source platform that includes a
bunch of different products one of them
is a polo client and this is basically a
library that allows you to connect your
front-end with the graphical back-end
and it also comes with a bunch of
implementations for libraries like react
view and angular next up we have a polo
engine which is a library that provides
you with a bunch of tools for
performance and error tracking and last
stop we also have a polo server and this
is the one I’m going to be focusing on
in this video and this library basically
allows you to create graph QL backends
within OGS server so if we click on
learn more we’re gonna be redirected to
the home page of a polo server and now
the premise of a polo server is actually
pretty simple just like with Express
graph QL you define your schema with a
bunch of type definitions you create a
map of resolver functions to resolve all
of the fields on the schema and last
stop you new up the instance of a polo
server you pass in tab definitions and
resolvers and finally you can tell the
server to listen to any incoming
connections now if you look at some of
the highlights of a polo server it has a
schema first approach which is basically
to say that the development of the
server is data driven we also have
automatic persisted queries and this
basically allows you to pass in IDs or
hashes instead of the entire queries we
also have simplified mocking so instead
of providing a map of resolver so you
can actually set the mocks to true and
so basically map all your schema with
some dummy data we also have simplified
real time data updates so even though
graph key already has subscription
support Apolo server actually makes it a
lot simpler to integrate and implement
we also have tools to measure
performance and also report any errors
happening in the application now this
actually comes from a polo engine but a
polo server itself provides an easy
integration with that service and last
stop we also have advanced caching and
this one refers to the technique of
batching and caching your queries to
avoid fetching the same
multiple times now to see this in action
we’re gonna go back to our project over
here so if you don’t have this
repository you can basically go to
github.com slash Alex nine nine six
slash graft you all chat but I also
include the link in the description
below but so far we have the same
application from video number two and if
you’re interested to see the code for
video 1 you can also switch the branch
to graph QL j/s alright so what you can
do is you can go ahead and clone the
repo yourself you’re gonna get the
starter project for this video now I
already have the code in my editors I’m
going to switch back there and the first
thing we need to do is let’s go to
package.json so far we have three
different dependencies we have Express
we have Express graph qo which is in
middleware from Facebook to instantiate
a graphical server on top of the
existing Express application and last
step we also have graph QL which is a
library for parsing and validating and
executing graphical queries now we do
need to keep the graph QL dependency but
we don’t actually need any of the two
other dependencies so we can actually
uninstall them first so let’s do yarn
remove those two dependencies I’m gonna
remove Express and I’m also gonna remove
Express graph QL so once they’re gone we
can actually go ahead and add a poll
server this is gonna install the Apolo
server dependency for us no uphol server
actually requires you to install graph
QL though because we already have it we
can just skip that step and just include
a poll server alone it’s also safe to
remove Express from the list of the
Bennis ease because a poll server comes
in with an integrated Express server so
we don’t actually have to install it
ourselves now if we go back to index j s
we already have a bunch of code in here
so we’re gonna start refactoring it but
first of all we’re gonna pull in a poll
server so let’s do exactly that let’s do
Const we’re gonna have a named import
now we’re gonna have a required
statement of Apollo server so now let’s
go back up here and we can have an
Apollo server import we also need to
import gql template literal helper and
this one is gonna be used for our schema
but let’s do it step by step so first of
all we can remove Express we can also
get rid of graph QL HTTP
built schema we can also keep crypto for
now because it’s gonna be used to
generate IDs for our users over here now
moving on let’s actually update the
schema when I change it to type
definitions and this is really just a
convention to follow but you could
basically call it anything you’re gonna
see in a second why it’s useful to call
it type definitions now we also need to
change build schema to gql now this will
be not a function call but it’s actually
going to be the template literal call so
we’re gonna call it on gql so we need to
remove those parentheses you could also
see that we get syntax highlighting out
of the box and that’s actually because
of a special extension you can install
it’s called graph ql4 vs code so this
one basically allows you to see your
graph your schema with useful highlights
but so once we have our type definitions
we can move on to our route value which
I’m going to change to resolvers well
this one is gonna be a map so you can
provide in object just a simple object
literal but you also need to provide a
bunch of keys now the first one of them
is actually query and queries where you
define all your top-level resolvers so
anything that goes inside of the root
query also needs to be present on the
query resolver map did you put inside
the resolvers
object so we can go ahead and move
messages user and users instead of query
we’re gonna need to update the code as
well so first off I’m gonna get rid of
this map function so we don’t need to
wrap the users with the user class so we
can safely remove that call now for the
user itself we can go ahead and fetch
the user so I’m going to remove the
brackets over here we don’t need them
remove that rest of the code as well so
what we need to do is we basically need
to call the find method on the user’s
collection or array and then we’re gonna
find the user by the ID passed to the
arguments now we have to be careful with
the arguments over here because the
signature for resolver functions is
actually different in a polo server as
it is in Express graph QL so as it turns
out in Express graph QL we get a method
that has the following signature so we
first of all get a list of arguments as
the first parameter we also get the
context
value and we also get the info object
and now this I actually documented in
the repo if you scroll down to the
readme you’re gonna find a signature for
each resolver function and you can also
put it on the class as well it’s gonna
have the same exact signature as an
individual resolver function so we get
our arguments we get the context and we
also get the info object but the context
is something you can provide optionally
and the info is basically an object that
contains the information about the
incoming query now with a pole server
like I said the signature of this
function becomes a little bit different
first of all we get the root object now
this would object by default is going to
be the value of the root value you can
pass into your server optionally in this
case we’re not gonna have any root value
but we do have a list of arguments so
the arguments in fact become the second
argument to this resolver function over
here so we can actually go ahead and
destructor it ourselves we can grab the
ID out of it like this the messages we
can keep them as they are but for the
add user mutation we actually need to
add in another key over here so we can
call it mutation will pass in the add
user
function inside like this let me kill
off that space and now lastly the add
user function is gonna change as well so
the first argument once again is not
going to be the list of arguments but it
will actually be the root object which
in this case will be undefined we still
have to provide it so make sure to put
in the arguments as the second parameter
to the function now we can kill the
instantiation of express we don’t have
any Express framework so far we can
actually also remove all the code at the
end now what do we do with these
messages over here because the messages
have to be resolved on the user object
what if we make a query that asks for
messages on the user so we’re gonna need
to find a way to deal with those
messages now in Express graph kill you
really don’t have that much choice
because your root value object only
allows you to create top-level resolvers
with a pole server everything actually
changes because now you can go ahead and
create nested types so you can actually
go ahead and create a definition for a
user so anything that you want to
resolve on the user that’s not available
on the actual data source so something
like let’s say messages right that’s
actually not available on the data
source we can go ahead and create a
definition for those messages inside of
that user resolver function so we can go
ahead and paste the messages in here I’m
going to go ahead and create this as a
function once again we can remove the
curly braces we can just return any
messages but in this case we do need to
provide one argument and it’s actually
going to be the root value now remember
I told you that the root value inside of
query or inside of mutation is typically
going to be undefined unless you provide
a value for root value to your server in
this case the root object will actually
be the user now that’s because the user
is being resolved on the user’s
collection so for example if you make a
query to users and you also include a
sub selection of messages on those users
those messages will be resolved on the
user object and that’s why this user key
over here
anything that’s listed under that key
will also be resolved with the user
object itself so we can basically just
rename root to user just for clarity and
this one will refer to a single
individual user object when this
function is being called so we can go
ahead and reference the user ID like
this we do need to actually check those
messages against the user ID to filter
them down accordingly but once that’s
done we should be good to go we should
be all set now we have our type
definitions as well as the resolvers and
everything should hopefully be resolved
correctly so we can go ahead and create
our server in the end so let’s do a
constant of server we’re gonna call a
poll server like this we’re gonna new it
up we’re gonna pass in our type
definitions as well as resolvers so once
that’s done we can actually go ahead and
do a server listen command this is gonna
spit up a raw file server on a slash
graph QL endpoint and it’s also gonna
serve up on port 4000 by default but
once this listen function resolves we’re
gonna have an object so let’s do it then
we’re gonna have destructuring statement
let’s have a URL off of that object now
let’s finally do a console log of that
URL like this unless thought because
we’re resolving messages on the user
object inside of resolvers map we can
actually go ahead and delete the user
class it’s not going to be used anymore
so let’s delete it and then finally we
can go back to our package JSON let’s go
ahead and create a script so we can call
it let’s say watch we can just call node
Mon like this without any arguments and
it’s going to default to index GS file
that we have in here okay so going back
to our terminal we can go ahead and do
yarn watch this will spin up the server
so we can go ahead and click on the link
this will open up the graph QL
playground ID so what we can do is we
can actually fire off queries from over
here just like what we do
with graphical interface if I go ahead
and run that query this will get us all
the users with all of the messages but
we could also go ahead and select an
individual user so let’s say a user with
ID of 1 we can go ahead and fetch the ID
the name perhaps also the messages off
that user let’s say the body and create
it at so there we go we got an object of
user with the idea of 1 and we also get
all of the messages for that user so all
of the queries should be working fine
but this is really just the beginning
Apolo server comes with a lot of
different features that we can start
using so for example if you wanted to go
ahead and experiment with walking we can
actually go ahead and remove resolvers
from our Polo server instantiation
statement we can actually just put in
machs and set it to true and now we’re
not passing any resolvers so we’re not
going to be resolving any data we’re not
gonna be actually reaching out its your
static collection over here and we’re
actually gonna be serving up and walks
so if I go back to the browser let’s say
if I go ahead and switch back to our
previous query on all of the users so if
I go ahead and fire off that you’re
gonna see that we get a bunch of
different objects actually we got two
but you can see that they have randomly
generated IDs and also
randomly-generated fields like email and
name and the same goes also for messages
so all those different scalar types like
ID or a string on the body or created
that field those are gonna be
auto-generated for us because we’ve set
up the marks property to true now this
is useful for prototyping especially if
you were developing the front-end and we
really don’t have a functional backing
yet or that backing is being actively
developed you just go ahead and set the
mark’s property to true and this will
basically mock up the back end for you
but i’ll bring it back to resolvers and
so far we’re basically done this is a
functional server what we’re basically
done is we’ve converted it from Express
graph QL to a polo server who can
actually close off right now but one of
the things I’ll mention before signing
off is if you go back to the
documentation over here if you go ahead
and click on get started first of all we
can find the documentation for the
resolver so if you go ahead and click on
fetch data with resolvers this will
bring you up to this section over here
you can read up more about the actual
signature of each resolver function like
I said you really have to be careful
about this one because the first
argument will be the root value or the
parent value as opposed to the arguments
object as it is an express graphical and
I was aside from that and what we’ve
done in this video is we’ve created a
standalone server and this is really
just sugar for creating an express
server and attaching the Apolo server on
top of it but you could actually go
ahead and do it yourself so if you
switch to building a server section
scroll down you’re gonna find is
subsection for creating an Express
server yourself now let me go ahead and
find it this would be the middle worth
section over here if you pull in a polo
Server Express library this one allows
you to apply the graph QL middleware
yourself so you can go ahead and create
your server like with it in this video
but if you already have an existing
Express app you can go ahead and just
simply apply the middleware bypassing
the application instance that you
already have in your app and then of
course you could also have a bunch of
different other routes that you want to
initialize so you can basically
to all servers alongside the existing
Express application right so this is
basically it for this video and as
you’ve probably guessed I’m coming back
to the graph QL series so starting with
this week I’m gonna be working on that
series again so with the exception of a
few videos perhaps in the material UI
series I’m gonna be focusing on this
playlist exclusively so I’m back in the
game and we’re gonna be continuing with
a series next week so I hope you enjoyed
this tutorial and I’m gonna see you next time take care
Please follow and like us: