hey guys welcome back to a Marin stack
with graph QL tutorial video series in
the last video we took a look at Express
graph QL which is a library that allows
you to create graph tool servers with
the Express framework and we actually
saw some of the limitations where at
least inconveniences with creating graph
tool schemas and resolvers with the
official library from Facebook
now there’s also another open source
library known as a polo server which is
actually part of a larger project
developed by the Apolo team and what a
polo server does is it basically
simplifies the development of graphical
servers in the nodejs environment
now the basic premise is still pretty
much the same we basically first create
your schema so you read out the
definition of your back-end schema with
the different types then you create your
resolvers object with a different
resolver functions which basically map
that scheme and provide an
implementation for it now apart from
those things there’s also some of the
other features that a polo server
provides and one of them is this schema
first approach so that basically means
that a polo focuses on separating your
schema from your business logic it also
provides tool for simple mocking which
is useful for testing
it also has things known as schema
directives which we’re gonna take a look
at eventually in the series and it also
provides schema stitching which is
basically separating your schema to
multiple files or objects and then
gluing them up together into a single
schema you also have your graphic you’ll
subscriptions and you also have things
like cache control and tracing which
also go back to a polo engine now one of
the useful tools that a polo provides is
known as a polo lunch pad and it’s sort
of like a cloud playground where you can
spin up a graphical server and then you
can connect to it with your front-end
clients from anywhere now we’re gonna do
in this video is we’re actually looking
at started with a polo server and this
is gonna lead us through the
documentation page but this is the
documentation for a polo server the one
we want to do is we actually want to
click on the drop down over here and
this would be the version that’s still
in beta but it’s soon gonna be released
as the official apple server
implementation and if you’d like to read
more about it be sure to check out the
documentation they actually have a
tutorial to get started with a poll
server and we’re gonna do in this video
actually is we’re gonna go back to the
terminal
if we do cat package.json you’re gonna
see that we already have Express and
Express craftool dependencies so what
I’ll do first is I’ll actually gonna
remove them so the yarn remove Express
and Express graph QL so that’s gonna
remove those two dependencies if I do
cat package.json again you’re gonna see
that those dependencies are gone so what
I will do next is all do yarn add a pole
server add beta make sure to include the
beta tag that’s gonna download the
latest Apple server from the beta branch
and if this is a new project for you
make sure to also include graph QL I’m
not gonna do that because we already
have the graph kill dependency in our
package JSON so just install Apollo
server so once that’s done I’m gonna
switch to our editor and the first thing
I’ll do is I’ll basically select
everything and comment it out so the
first thing I’ll do to get started is
I’ll import a whole server as well as
gql from Apollo server like that we’re
gonna create our type definitions which
is basically gonna be your schema will
create our resolvers map and then we’ll
create the instance of the server itself
now for the type definitions I’m gonna
scroll down and we can reuse the schema
that we created in the past and we can
grab the types from there so I’ll bring
them back up over here for the type
definitions in this case we’re gonna
need to call the gql helper and this
will actually be pretty useful because
it’s also gonna color code the different
types and properties for our schema so
I’ll save it and then over here we don’t
need this schema anymore for the
resolvers we can actually also reuse
some of it so I’ll bring back the
objects over here the only difference
though between the wood value and the
resolvers over here is that well it’s
also an object but we’re gonna need to
have different types at the root of that
object so we’re going to need to have
the keys like query this will be an
object we’re gonna need to have one for
mutation and I also think we’re gonna
need to have one for the user because
we’re going to need to resolve the
messages so for now I’ll just paste them
in
and the users as well as the user and
messages are going to go inside the main
query now the reason for that is because
we have our users user and messages on
the query type so we need to resolve
those properties with these functions in
this case we actually don’t need to wrap
the user with the user class so I’ll
just remove that part for now for the
mutation we have the add user function
which we can put over here then for the
user like I said we’re gonna have to
resolve messages so what I’ll do is I’ll
create a function and this function is
going to need to return the messages for
user so this will be this messages
getter function that we created on the
user class in one video back so we’ll
bring it back over here in the messages
property of the user type on the
resolvers once again and we’re gonna
need to bring back our fake database as
well so put it back over here just after
the imports this will be a fake database
with a few collections like users and
messages for now so we could save that
and finally for the messages resolver
function what we need to do is we need
to also have a parent value on that
function now that’s one of the arguments
for that bazolar function and in fact is
a few other ones like arguments context
and info we’re gonna take a look at
those in the next videos for now we’re
just gonna have one argument which is
the parent itself now we need the parent
in order to extract the user ID of that
parent object so that parent is
basically going to refer to the user
object that the messages are gonna
belong to so in this case we’re gonna
have to change from this ID just simply
ID and like I said this would be the ID
of the user we can also simplify it by
removing the return keyword and also
removing the curly braces like this and
then finally to create an instance of
the server we’re going to call the Apolo
server constructor and we’re going to
pass in the type definitions which is
our schema as well as the resolvers map
what we’re gonna do next is we’re gonna
call a server listen and this is
basically going to spin up the Express
server and then finally when that’s done
we’re gonna get back some server
information so this would be a callback
function or it can console.log let’s say
a polo server listening at and in this
case we can access the URL on the server
info so Cadoo server info dot URL this
will basically be the URL at which the
Apolo server is gonna be available and
finally one thing we forgot is the
crypto library we’re gonna need it to
create users actually to generate the ID
for users and here and then the rest of
the code can actually be deleted so I’ll
select it and remove so what can do next
is to head over to our terminal and I’m
gonna say npx supervisor on the current
folder so if I click on that we’re gonna
end up in graph QL playground which is
similar to graphical but it does have
some additional features as well so I’ll
write out the users query we’re going to
access the ID the name as well as the
messages collection and we’re gonna grab
the body of each message so if I run
that as you’re gonna see
we’ll get our users collection which
contains two objects one is Alex and one
of them is max and both of them have
messages which again are objects which
contain the body property so we’ve done
in this tutorial is basically created a
standalone graphical server if you
already have an Express application and
you want to add a graphical server on
top of it you could also make use of the
Express integration library that Apple
comes with in this case I would suggest
that you go back to the documentation
and specifically I would directly to the
migration guide which basically
describes the steps that you need to
take to go from version one to version
two and like I said if you want to use
the middleware option you’re gonna need
to also install a whole server Express
with the beta flag as well you could
import the register server function and
then when you create your app and since
the instance of the Express framework
you can basically pass in the app to
that register server function and then
you can finally spin up the server
with the listen function like we did
before so as you can see the difference
is pretty much just a few lines of code
and in this case it’ll basically allows
you to have additional middleware or
functionality with your Express
application but in this case we want to
create a standalone server so we don’t
actually need to have a polo server
Express and like I said this will
basically spit up a built-in Express
server for us and it will just basically
be able to extract the URL from it but
of course you could provide your own
custom port and hostname and all of that
in the configuration for your Apolo
server instance so that’s pretty much it
as far as getting started so I’m gonna
stop over here for now and in the next
video we’re going to actually start
fleshing out our database so we’re gonna
start playing with Mongo and Mongoose so
I hope you stick around and I’ll see you next time
with graph QL tutorial video series in
the last video we took a look at Express
graph QL which is a library that allows
you to create graph tool servers with
the Express framework and we actually
saw some of the limitations where at
least inconveniences with creating graph
tool schemas and resolvers with the
official library from Facebook
now there’s also another open source
library known as a polo server which is
actually part of a larger project
developed by the Apolo team and what a
polo server does is it basically
simplifies the development of graphical
servers in the nodejs environment
now the basic premise is still pretty
much the same we basically first create
your schema so you read out the
definition of your back-end schema with
the different types then you create your
resolvers object with a different
resolver functions which basically map
that scheme and provide an
implementation for it now apart from
those things there’s also some of the
other features that a polo server
provides and one of them is this schema
first approach so that basically means
that a polo focuses on separating your
schema from your business logic it also
provides tool for simple mocking which
is useful for testing
it also has things known as schema
directives which we’re gonna take a look
at eventually in the series and it also
provides schema stitching which is
basically separating your schema to
multiple files or objects and then
gluing them up together into a single
schema you also have your graphic you’ll
subscriptions and you also have things
like cache control and tracing which
also go back to a polo engine now one of
the useful tools that a polo provides is
known as a polo lunch pad and it’s sort
of like a cloud playground where you can
spin up a graphical server and then you
can connect to it with your front-end
clients from anywhere now we’re gonna do
in this video is we’re actually looking
at started with a polo server and this
is gonna lead us through the
documentation page but this is the
documentation for a polo server the one
we want to do is we actually want to
click on the drop down over here and
this would be the version that’s still
in beta but it’s soon gonna be released
as the official apple server
implementation and if you’d like to read
more about it be sure to check out the
documentation they actually have a
tutorial to get started with a poll
server and we’re gonna do in this video
actually is we’re gonna go back to the
terminal
if we do cat package.json you’re gonna
see that we already have Express and
Express craftool dependencies so what
I’ll do first is I’ll actually gonna
remove them so the yarn remove Express
and Express graph QL so that’s gonna
remove those two dependencies if I do
cat package.json again you’re gonna see
that those dependencies are gone so what
I will do next is all do yarn add a pole
server add beta make sure to include the
beta tag that’s gonna download the
latest Apple server from the beta branch
and if this is a new project for you
make sure to also include graph QL I’m
not gonna do that because we already
have the graph kill dependency in our
package JSON so just install Apollo
server so once that’s done I’m gonna
switch to our editor and the first thing
I’ll do is I’ll basically select
everything and comment it out so the
first thing I’ll do to get started is
I’ll import a whole server as well as
gql from Apollo server like that we’re
gonna create our type definitions which
is basically gonna be your schema will
create our resolvers map and then we’ll
create the instance of the server itself
now for the type definitions I’m gonna
scroll down and we can reuse the schema
that we created in the past and we can
grab the types from there so I’ll bring
them back up over here for the type
definitions in this case we’re gonna
need to call the gql helper and this
will actually be pretty useful because
it’s also gonna color code the different
types and properties for our schema so
I’ll save it and then over here we don’t
need this schema anymore for the
resolvers we can actually also reuse
some of it so I’ll bring back the
objects over here the only difference
though between the wood value and the
resolvers over here is that well it’s
also an object but we’re gonna need to
have different types at the root of that
object so we’re going to need to have
the keys like query this will be an
object we’re gonna need to have one for
mutation and I also think we’re gonna
need to have one for the user because
we’re going to need to resolve the
messages so for now I’ll just paste them
in
and the users as well as the user and
messages are going to go inside the main
query now the reason for that is because
we have our users user and messages on
the query type so we need to resolve
those properties with these functions in
this case we actually don’t need to wrap
the user with the user class so I’ll
just remove that part for now for the
mutation we have the add user function
which we can put over here then for the
user like I said we’re gonna have to
resolve messages so what I’ll do is I’ll
create a function and this function is
going to need to return the messages for
user so this will be this messages
getter function that we created on the
user class in one video back so we’ll
bring it back over here in the messages
property of the user type on the
resolvers once again and we’re gonna
need to bring back our fake database as
well so put it back over here just after
the imports this will be a fake database
with a few collections like users and
messages for now so we could save that
and finally for the messages resolver
function what we need to do is we need
to also have a parent value on that
function now that’s one of the arguments
for that bazolar function and in fact is
a few other ones like arguments context
and info we’re gonna take a look at
those in the next videos for now we’re
just gonna have one argument which is
the parent itself now we need the parent
in order to extract the user ID of that
parent object so that parent is
basically going to refer to the user
object that the messages are gonna
belong to so in this case we’re gonna
have to change from this ID just simply
ID and like I said this would be the ID
of the user we can also simplify it by
removing the return keyword and also
removing the curly braces like this and
then finally to create an instance of
the server we’re going to call the Apolo
server constructor and we’re going to
pass in the type definitions which is
our schema as well as the resolvers map
what we’re gonna do next is we’re gonna
call a server listen and this is
basically going to spin up the Express
server and then finally when that’s done
we’re gonna get back some server
information so this would be a callback
function or it can console.log let’s say
a polo server listening at and in this
case we can access the URL on the server
info so Cadoo server info dot URL this
will basically be the URL at which the
Apolo server is gonna be available and
finally one thing we forgot is the
crypto library we’re gonna need it to
create users actually to generate the ID
for users and here and then the rest of
the code can actually be deleted so I’ll
select it and remove so what can do next
is to head over to our terminal and I’m
gonna say npx supervisor on the current
folder so if I click on that we’re gonna
end up in graph QL playground which is
similar to graphical but it does have
some additional features as well so I’ll
write out the users query we’re going to
access the ID the name as well as the
messages collection and we’re gonna grab
the body of each message so if I run
that as you’re gonna see
we’ll get our users collection which
contains two objects one is Alex and one
of them is max and both of them have
messages which again are objects which
contain the body property so we’ve done
in this tutorial is basically created a
standalone graphical server if you
already have an Express application and
you want to add a graphical server on
top of it you could also make use of the
Express integration library that Apple
comes with in this case I would suggest
that you go back to the documentation
and specifically I would directly to the
migration guide which basically
describes the steps that you need to
take to go from version one to version
two and like I said if you want to use
the middleware option you’re gonna need
to also install a whole server Express
with the beta flag as well you could
import the register server function and
then when you create your app and since
the instance of the Express framework
you can basically pass in the app to
that register server function and then
you can finally spin up the server
with the listen function like we did
before so as you can see the difference
is pretty much just a few lines of code
and in this case it’ll basically allows
you to have additional middleware or
functionality with your Express
application but in this case we want to
create a standalone server so we don’t
actually need to have a polo server
Express and like I said this will
basically spit up a built-in Express
server for us and it will just basically
be able to extract the URL from it but
of course you could provide your own
custom port and hostname and all of that
in the configuration for your Apolo
server instance so that’s pretty much it
as far as getting started so I’m gonna
stop over here for now and in the next
video we’re going to actually start
fleshing out our database so we’re gonna
start playing with Mongo and Mongoose so
I hope you stick around and I’ll see you next time
Please follow and like us: