one of the popular libraries for nodejs
is known as Express Express is a
framework for building web applications
in OGS and if you want to use Express
with no GS and graph QL you’re gonna
need to install another library which is
known as Express graph tool so let’s do
exactly that
back in the terminal what I’ll do is
we’ll first clear out all of the output
so what I’m gonna do is yarn add first
of all Express the framework as well as
Express graph QL like that now back in
the editor what I’m gonna do next is
we’re actually gonna have our Express
dependency we’re gonna require it like
that Express and with that in place
let’s actually initialize our
application so we’ll have an app we’re
gonna call Express like that and then
finally we could just simply do listen
let’s say we’re gonna have a port of
3,000 and then we’re gonna pass a
callback we’re gonna say console.log
let’s say listening on the 3000 and the
rest over here I’m actually I just
commented out for now let’s go back up
and then in the terminal I’ll go back
and clear this out let’s do node that’s
gonna start the service on port 3000 if
I open a new terminal so what I’ll do is
actually it’s do CRO localhost 3000 and
we get a response
so I’m HTML over here but this basically
says that we cannot get the slash route
because we don’t have any route
definitions in the application but
that’s fine right so in order to hook up
graph QL to Express we’re going to need
to have another import so let’s say we
have an import for craft UL HTTP this
would be the main middleware that we’re
gonna have to use let’s gonna come from
graph kill Express and then we’re also
gonna have to have our build schema as
well because we need to build a schema
or graph QL so this is gonna come from
graph QL is library so then once we have
the application let’s also have a
definition for schema just like before
in fact I’m gonna do is I’m gonna scroll
down when I grab all this stuff from
here actually including the fake
database that we used to have so I paste
it back in uncomment it so we’re gonna
use the same stuff just like before so
we’re gonna have a data be
the users we’re also gonna have a schema
we have a root value now in order to
hook up graph kill to the app we
actually have to use the middleware so
we do here will define a an endpoint
it’s gonna be graph QL and then we pass
in the graph QL HTTP middleware and then
we also have to pass an object with the
configuration so we have to pass the
schema we have to pass the booth value
and then finally remember the graphical
IDE that I mentioned in the beginning
well we could actually set it up over
here as well so we could say the graph
QL or graphical actually we could set it
to true so what this means is that the
graphical interface is actually gonna be
available from the browser so back in a
terminal I’ll go back to my first one
the first tab I’ll actually stop it and
run it again so now we’re actually
listening on port 3000 so in this case
I’m gonna go back to the browser I’ll
type of localhost 3000 like that and
we’re gonna have to go to the graph QL
endpoint which is gonna load the
graphical interface and what we do here
is we can actually start executing
queries for example we have the users
query in our main query type we can
request the idea as well as the email
and let’s say the Avatar URL of the
users you know it’s around 8 you could
just simply do ctrl enter and it seems
like we forgot to add the Avatar URL the
database so let’s call backup
what can do here is I’m gonna actually
add it for both of the objects let’s do
Avatar URL and this could be just a
simple URL for now I’m just gonna say
HTTP let’s do gravatar.com and then
something right so and then we’re gonna
have to also restart the service and now
this is getting actually annoying so
what I’m gonna do is I’m gonna do yarn
add we’re gonna add a dev dependency of
supervisor the supervisor is kind of
like node mo on war forever which is a
library for basically running your
nodejs server locally and also listening
for file changes as well so what I’ll do
is once we have the supervisor in fact
we can just basically go to package JSON
just to verify now we have a dev
dependency of supervisor so we could do
back in the terminal so I’ll do MPX
supervisor
I’m gonna run this basically on the
index.js file with a dot so now back in
here you could actually run my query now
and there we go we got two objects with
the Avatar URL as well as the email and
the ID and then I’m gonna also pre-fly
this so get rid of the other stuff like
that and we get the same result so just
to reiterate the response is basically a
JSON object that is always going to have
the data field so this is something that
you saw before in the terminal always
when you get a JSON response from your
graphical endpoint it’s gonna be
prefixed by the data property and then
the data properly itself contains the
object with all of your fields that you
requested so in this case we have the
only one which is users and that
corresponds exactly to the users query
you know finally we get the array of
user objects each object has an ID as an
email as where as the avatar URL okay so
I’m going to delete the rest of the code
over here because we don’t actually need
this and then there’s quite a few
interesting things that we can actually
explore right here so apart from the
main query type is also another built in
site which is known as mutation
so what mutation allows you to do is to
create actions on your graph q server so
for example one of the typical actions
in a card application would be to create
a resource so in this case we could have
a function let’s call it add user or
actually a mutation function so what
this is gonna do is it’s actually going
to accept an email which has to be a
string and it cannot be no we’re
basically saying that this email address
is a required field we could also ask
for a name which could be optional so in
this case I’ll just say a string but I
won’t add the exclamation because in
this case you’ll be optional and then
when you call that add user action we’re
gonna expect to get back a user object
or basically an object of the user type
in order to actually implement this add
user function we’re gonna have to add it
in the resolvers object on this wound
value object so what I’m gonna do is
let’s say we have an add user function
and we’re gonna do inside of the
function is let’s say we’re gonna create
a user which would be an object we’re
gonna set the ID to date now in fact the
other thing we could also do is let’s
say we could also import the crypto
right which is not actually a library
but it’s actually a built-in module in
nodejs and then once we have crypto what
we could do here is let’s say crypto dot
random bytes okay I have ten bytes and
then we can just basically call us to
string and this would be more or less
unique identifier and then we can have
our name as well as the email address so
let’s have name and email well you might
ask whether those properties actually
come from well they’re gonna come from
the arguments object which is one of the
arguments that this function can expect
once again these curly braces define a
function the function is known as
adduser and this function is going to
expect arguments now one of the
arguments is known as the arguments
object which basically refers to the
arguments that are going to be passed
with the query into your graph QL
endpoint now in this case the arguments
we could actually least work for them
and we can grab the email as well as the
name right and once we have the user
object what we could do is we could do
users collection on the database push
that user object and then finally we’re
also gonna return that user object like
that
so back in our browser if I just refresh
this page we could do here instead of
the query we can now have a mutation now
in order to distinguish between queries
and mutations but the mutation you could
simply add the mutation keyword and then
we could say add user let’s say the user
is gonna have an email and this email
could just simply be let’s say Alex at
gmail.com like that and then finally
we’re gonna expect an ID let’s also have
an email address and then let’s see the
name I’m expecting it to be null let’s
run this it looks like I forgot the hex
arguments to the two string method but
if we save that let’s run this and this
is the object that we’re gonna get in
return as an ID also has the email
address and then the name is null
because we basically did not specify it
if you don’t provide a name this is
gonna be undefined which is why we get
null so that’s basically a rundown of
mutations now apart from that we could
also have queries that accept arguments
so for example we might have another
query let’s say it’s a user in this case
is going to accept an ID which would be
required and again
it’s a type of ID which is a built-in
type in graph tool and then finally this
is gonna return a user and of course
like always we’re gonna have to write a
definition for that user so what I’ll do
is I’ll add another entry over here it’s
gonna be a function that accepts args
and then in here what we do is we can go
into users and then we can find a user
such that that user ID matches the
arguments ID like that and then we’re
gonna need to have a comma at the end
like that so if I go back to the browser
if you refresh we can now write out the
query for our users so let’s say we’re
looking for a user such that it has an
ID let’s see have one and then we’re
gonna have to ask for an email and maybe
let’s also ask for a name so I run it we
get Alex at gmail.com my name is Alex
and that refers to this first user over
here and this is basically how you pass
arguments to your queries and of course
using graphical there’s actually a bit
of a different approach to this so with
Cori’s you could also specify a query
keyword so this basically tells graph QL
that this is a query it’s the same thing
as not passing the query parameter but
it’s kind of useful if you want to
distinguish between mutations as well as
the queries but if you want to pass in
arguments you actually have to specify
the query and then you also have to give
that Corian name so let’s call it get
user that query is actually going to
expect an ID of the user that ID
variable is going to be of type ID right
and then an user instead of hard-coding
the value of one this is actually going
to be a variable it’s going to reference
the ID pass it like that and then
finally in order to actually have a
definition for those variables you can
expand the query variables section over
here at the bottom and then you provide
a JSON object with the variables so in
this case we’re going to need to have an
ID and it could just simply be one so if
I do that let’s do ctrl enter we get the
same object if I change the value 8 to 2
let’s rerun this and we get max this ID
is basically being passed through the
query as a variable and then it’s also
being passed to the actual query on the
user like that and once again we’re
expecting the email and the name
fields so as you can see this is more or
less fairly simple for individual type
so in this example we’re basically not
going any more levels deep than one so
essentially we’re just having users in
the main query type but what if users
had messages so what I’ll do here is
I’ll create a new collection of messages
this is going to be an array of objects
each object is obviously going to have
an ID like that then we might also have
a user ID so let’s say the first message
corresponds to user 1 let’s say a
message host has a body so we might say
for example like hello that was the
first message and perhaps also a
timestamp like that or actually let’s
call it created at create of that and
this could be just simply date of now
which is going to be an integer value
and I’m gonna do the same thing for the
other user so I’ll just copy it over and
then for this one let’s say this message
is gonna be idea of two user to the body
is gonna be hi it simple like that and
I’ll copy it over again and the last one
I’ll do ID of 3 user ID is gonna be 1
and we’re gonna have a body of let’s say
what’s up something like that so we can
save it now so in order to actually add
those messages I’ll add a new query so
this is gonna be messages this is gonna
return an array of message type which
are we’re gonna have to create once
again the array itself cannot be no but
also the object inside the message
cannot be no either so that’s why I have
the two exclamation points and then
we’re gonna have to create a new type as
well for that message so we’re gonna add
a new message type has an ID which has
to be an ID graphical ID it also has to
have a body which needs to be a string
cannot be empty it cannot be null and
we’re gonna have a created add field
which is simply a string like that now
the reason that this is actually a
string because well the date of now is
actually gonna be an integer but it’s
fairly long it’s actually more than what
the integer value could possibly
represent so it has to be a string and
then finally over here we’re gonna have
a messages function this is going to
return database dot messages
like that I’ll put in a comma so I’ll
save that so now back any browsers so
what can I brush that and then if I
delete everything we can now query
messages and we can ask for ID you can
ask for body like that get all of the
messages but it also be useful if you
get messages by user now this is where
we actually need to work with the neset
types so the thing is that users have
messages meaning that the relationship
is such that a message belongs to user
so how do you represent that because
let’s say we ask for users and we also
want to include messages so let’s go
back to the browser what I mean by that
is let’s say we create a query for users
right let’s say I want to know the email
address of the user but I also want to
know the messages for that user and for
every message let’s say I want to know
the body of that message now this would
not actually work if I try to run that
we get an error cannot query filled
messages on type user now that’s because
the users don’t actually have messages
yet but we couldn’t simply add them so
what I’ll do is let’s say users will
have messages like that we can have a
message type this would be an array if I
save it we have supervisor running so if
I just refresh the page again we run it
but we get cannot return null for non
nullable filled user messages so what’s
happening behind the scenes is that we
try to access the messages property off
the user object so let’s say the first
one but there’s no messages property on
the user so like what do we do in this
example well what craft qlg s or even
express graph QL there’s not really that
much you could do one of the typical
ways you would handle this is you would
create a model class for user so I might
have a class for user so let’s say we
have a constructor the constructor
expects a user object right and then
what can do here is we could inside the
constructor call the object assign
method so we could assign all of the
properties of the user on the current
object which would be the object of that
user and then finally here we’re gonna
create a new method look and call it
messages and then finally we could do
for the messages is we could do
let’s have database messages where
can access the messages collection we’re
gonna filter it down to those messages
whose user ID matches this ID which
would be the idea of this user the user
object they would pass in so now if I
actually scroll down and when we turn
the users we could actually map them so
I’ll do a function call back the closure
function and we have a user now wrap
each user in the user class I’ll pass in
the user inside so going back to the
browser if I now run this we actually
get the messages over there a nested
inside so how does this actually work
so when we have the users type we access
the user’s collection essentially just a
property of the fake database object
that would create it so we’re accessing
this array and then when we map through
that array we actually wrap every user
with the user class now every user class
will have a messages property
essentially a method actually it’s a
method which when you invoke that method
you’re gonna get back all of the
messages that belong to that user and we
filter down those messages by the user
ID so of course that’s one thing you
could do and besides that you could also
make this method a getter so you don’t
necessarily have to have it as a
function but this could also be a getter
function which you invoke as a property
so if I save the file and if I run the
query we’re gonna get the exact same
result back now if you’re kind of
curious how this actually works if I
open up the network tab in my browser
I’m gonna magnify it once again so once
I actually execute the query and in this
case we don’t actually use any variables
we don’t need them so I’ll close that
off what actually happens is if I run
this query once again you could see a
request coming out to the garage Q
endpoint and we get here is a post
request so what’s happening is it’s
actually executing a post on the graph
QL endpoint on our server on localhost
3000 what it’s doing is it’s actually
sending out the quarry as the value in
the payload and as a response is getting
all of the data so we’re to do here’s
what could actually mark that request in
order to see the mechanics of craft QL
so we can just simply issue a request
this would be a post
set the header to content type
application JSON like that and the data
needs to be an object so I’ll use single
quotes I’ll pass in a JavaScript object
this has to be json stringify so we’re
gonna have to have a Cori field or a key
and then as the value we’re gonna pass
in another object inside of that object
this is basically going to be the query
itself so what I’ll pass in is let’s say
users and for every user we’re gonna
expect an ID and finally I have to
specify localhost 3000 and I’m also
gonna add a new line at the end like
that if I run it I get cannot post to
slash that’s because I forgot to graph
QL but if I add that there we go we got
the data back so we get back the users
array which contains all the user
objects with the ID and of course we can
modify the query to add more fields for
example apart from ID we could also ask
for email we could ask for avatar URL
all the other stuff as well so it’s
gonna work the exact same way so as you
can see here all that graphical is doing
is it’s basically making a post request
with some JSON so content type
application JSON and it’s passing in
some value which is typically an object
with a query sometimes you might also
have variables if let’s say recording an
individual user and then as the query
itself you pass in the query that you
will typically type out in graphical so
that’s how graphical works it takes in
the query it passes in the query as a
payload and then sometimes it also
includes like I said variables as you
can see here in this example it’s
actually no but sometimes it’s an object
or the actual values and then as a
response you get back the JSON object
from the server but like I said this
request is actually the meet of graph QL
so it’s something that you might imagine
creating from a client so you could
actually make an AJAX request and this
is basically how some of the clients for
graph QL actually works so something
like a polo client is actually making
Ajax requests to your graphical server
just like we could simply do from the
terminal so once again I want to
emphasize that graphical is not a
storage engine or a database engine it’s
just simply an abstraction layer on top
the existing API and it comes up with
the query language that basically allows
you to create queries for your graph QL
service when you query your service your
graphical service you basically issue
queries with the specific types of data
that you want to access as well as a
specific field of those types that you
want to get back in this case we’re
interested in users but let’s say users
might have a bunch of different fields
but we might only be interested in let’s
say email as well as the messages body
so we specify that type of data and we
get back that exact data in that exact
format and of course if your graph kill
sits directly on your server so you have
a direct interface with the database you
might also have a selection of specific
fields from that database so you might
imagine that the web application to be
very efficient even on slow connections
when we have to be careful with the
amount of payload that we’re exchanging
between the servers so that’s basically
it for the introduction guys and once
again like I said this approach with the
classes is kind of tricky because once
you actually start going into multiple
levels of types we if you have nested
types it gets more complicated and of
course there’s different tools to manage
that one of the tools is known as a polo
server and we’re actually going to look
at that in the very next video in detail
so thanks for watching and I’ll see you then
is known as Express Express is a
framework for building web applications
in OGS and if you want to use Express
with no GS and graph QL you’re gonna
need to install another library which is
known as Express graph tool so let’s do
exactly that
back in the terminal what I’ll do is
we’ll first clear out all of the output
so what I’m gonna do is yarn add first
of all Express the framework as well as
Express graph QL like that now back in
the editor what I’m gonna do next is
we’re actually gonna have our Express
dependency we’re gonna require it like
that Express and with that in place
let’s actually initialize our
application so we’ll have an app we’re
gonna call Express like that and then
finally we could just simply do listen
let’s say we’re gonna have a port of
3,000 and then we’re gonna pass a
callback we’re gonna say console.log
let’s say listening on the 3000 and the
rest over here I’m actually I just
commented out for now let’s go back up
and then in the terminal I’ll go back
and clear this out let’s do node that’s
gonna start the service on port 3000 if
I open a new terminal so what I’ll do is
actually it’s do CRO localhost 3000 and
we get a response
so I’m HTML over here but this basically
says that we cannot get the slash route
because we don’t have any route
definitions in the application but
that’s fine right so in order to hook up
graph QL to Express we’re going to need
to have another import so let’s say we
have an import for craft UL HTTP this
would be the main middleware that we’re
gonna have to use let’s gonna come from
graph kill Express and then we’re also
gonna have to have our build schema as
well because we need to build a schema
or graph QL so this is gonna come from
graph QL is library so then once we have
the application let’s also have a
definition for schema just like before
in fact I’m gonna do is I’m gonna scroll
down when I grab all this stuff from
here actually including the fake
database that we used to have so I paste
it back in uncomment it so we’re gonna
use the same stuff just like before so
we’re gonna have a data be
the users we’re also gonna have a schema
we have a root value now in order to
hook up graph kill to the app we
actually have to use the middleware so
we do here will define a an endpoint
it’s gonna be graph QL and then we pass
in the graph QL HTTP middleware and then
we also have to pass an object with the
configuration so we have to pass the
schema we have to pass the booth value
and then finally remember the graphical
IDE that I mentioned in the beginning
well we could actually set it up over
here as well so we could say the graph
QL or graphical actually we could set it
to true so what this means is that the
graphical interface is actually gonna be
available from the browser so back in a
terminal I’ll go back to my first one
the first tab I’ll actually stop it and
run it again so now we’re actually
listening on port 3000 so in this case
I’m gonna go back to the browser I’ll
type of localhost 3000 like that and
we’re gonna have to go to the graph QL
endpoint which is gonna load the
graphical interface and what we do here
is we can actually start executing
queries for example we have the users
query in our main query type we can
request the idea as well as the email
and let’s say the Avatar URL of the
users you know it’s around 8 you could
just simply do ctrl enter and it seems
like we forgot to add the Avatar URL the
database so let’s call backup
what can do here is I’m gonna actually
add it for both of the objects let’s do
Avatar URL and this could be just a
simple URL for now I’m just gonna say
HTTP let’s do gravatar.com and then
something right so and then we’re gonna
have to also restart the service and now
this is getting actually annoying so
what I’m gonna do is I’m gonna do yarn
add we’re gonna add a dev dependency of
supervisor the supervisor is kind of
like node mo on war forever which is a
library for basically running your
nodejs server locally and also listening
for file changes as well so what I’ll do
is once we have the supervisor in fact
we can just basically go to package JSON
just to verify now we have a dev
dependency of supervisor so we could do
back in the terminal so I’ll do MPX
supervisor
I’m gonna run this basically on the
index.js file with a dot so now back in
here you could actually run my query now
and there we go we got two objects with
the Avatar URL as well as the email and
the ID and then I’m gonna also pre-fly
this so get rid of the other stuff like
that and we get the same result so just
to reiterate the response is basically a
JSON object that is always going to have
the data field so this is something that
you saw before in the terminal always
when you get a JSON response from your
graphical endpoint it’s gonna be
prefixed by the data property and then
the data properly itself contains the
object with all of your fields that you
requested so in this case we have the
only one which is users and that
corresponds exactly to the users query
you know finally we get the array of
user objects each object has an ID as an
email as where as the avatar URL okay so
I’m going to delete the rest of the code
over here because we don’t actually need
this and then there’s quite a few
interesting things that we can actually
explore right here so apart from the
main query type is also another built in
site which is known as mutation
so what mutation allows you to do is to
create actions on your graph q server so
for example one of the typical actions
in a card application would be to create
a resource so in this case we could have
a function let’s call it add user or
actually a mutation function so what
this is gonna do is it’s actually going
to accept an email which has to be a
string and it cannot be no we’re
basically saying that this email address
is a required field we could also ask
for a name which could be optional so in
this case I’ll just say a string but I
won’t add the exclamation because in
this case you’ll be optional and then
when you call that add user action we’re
gonna expect to get back a user object
or basically an object of the user type
in order to actually implement this add
user function we’re gonna have to add it
in the resolvers object on this wound
value object so what I’m gonna do is
let’s say we have an add user function
and we’re gonna do inside of the
function is let’s say we’re gonna create
a user which would be an object we’re
gonna set the ID to date now in fact the
other thing we could also do is let’s
say we could also import the crypto
right which is not actually a library
but it’s actually a built-in module in
nodejs and then once we have crypto what
we could do here is let’s say crypto dot
random bytes okay I have ten bytes and
then we can just basically call us to
string and this would be more or less
unique identifier and then we can have
our name as well as the email address so
let’s have name and email well you might
ask whether those properties actually
come from well they’re gonna come from
the arguments object which is one of the
arguments that this function can expect
once again these curly braces define a
function the function is known as
adduser and this function is going to
expect arguments now one of the
arguments is known as the arguments
object which basically refers to the
arguments that are going to be passed
with the query into your graph QL
endpoint now in this case the arguments
we could actually least work for them
and we can grab the email as well as the
name right and once we have the user
object what we could do is we could do
users collection on the database push
that user object and then finally we’re
also gonna return that user object like
that
so back in our browser if I just refresh
this page we could do here instead of
the query we can now have a mutation now
in order to distinguish between queries
and mutations but the mutation you could
simply add the mutation keyword and then
we could say add user let’s say the user
is gonna have an email and this email
could just simply be let’s say Alex at
gmail.com like that and then finally
we’re gonna expect an ID let’s also have
an email address and then let’s see the
name I’m expecting it to be null let’s
run this it looks like I forgot the hex
arguments to the two string method but
if we save that let’s run this and this
is the object that we’re gonna get in
return as an ID also has the email
address and then the name is null
because we basically did not specify it
if you don’t provide a name this is
gonna be undefined which is why we get
null so that’s basically a rundown of
mutations now apart from that we could
also have queries that accept arguments
so for example we might have another
query let’s say it’s a user in this case
is going to accept an ID which would be
required and again
it’s a type of ID which is a built-in
type in graph tool and then finally this
is gonna return a user and of course
like always we’re gonna have to write a
definition for that user so what I’ll do
is I’ll add another entry over here it’s
gonna be a function that accepts args
and then in here what we do is we can go
into users and then we can find a user
such that that user ID matches the
arguments ID like that and then we’re
gonna need to have a comma at the end
like that so if I go back to the browser
if you refresh we can now write out the
query for our users so let’s say we’re
looking for a user such that it has an
ID let’s see have one and then we’re
gonna have to ask for an email and maybe
let’s also ask for a name so I run it we
get Alex at gmail.com my name is Alex
and that refers to this first user over
here and this is basically how you pass
arguments to your queries and of course
using graphical there’s actually a bit
of a different approach to this so with
Cori’s you could also specify a query
keyword so this basically tells graph QL
that this is a query it’s the same thing
as not passing the query parameter but
it’s kind of useful if you want to
distinguish between mutations as well as
the queries but if you want to pass in
arguments you actually have to specify
the query and then you also have to give
that Corian name so let’s call it get
user that query is actually going to
expect an ID of the user that ID
variable is going to be of type ID right
and then an user instead of hard-coding
the value of one this is actually going
to be a variable it’s going to reference
the ID pass it like that and then
finally in order to actually have a
definition for those variables you can
expand the query variables section over
here at the bottom and then you provide
a JSON object with the variables so in
this case we’re going to need to have an
ID and it could just simply be one so if
I do that let’s do ctrl enter we get the
same object if I change the value 8 to 2
let’s rerun this and we get max this ID
is basically being passed through the
query as a variable and then it’s also
being passed to the actual query on the
user like that and once again we’re
expecting the email and the name
fields so as you can see this is more or
less fairly simple for individual type
so in this example we’re basically not
going any more levels deep than one so
essentially we’re just having users in
the main query type but what if users
had messages so what I’ll do here is
I’ll create a new collection of messages
this is going to be an array of objects
each object is obviously going to have
an ID like that then we might also have
a user ID so let’s say the first message
corresponds to user 1 let’s say a
message host has a body so we might say
for example like hello that was the
first message and perhaps also a
timestamp like that or actually let’s
call it created at create of that and
this could be just simply date of now
which is going to be an integer value
and I’m gonna do the same thing for the
other user so I’ll just copy it over and
then for this one let’s say this message
is gonna be idea of two user to the body
is gonna be hi it simple like that and
I’ll copy it over again and the last one
I’ll do ID of 3 user ID is gonna be 1
and we’re gonna have a body of let’s say
what’s up something like that so we can
save it now so in order to actually add
those messages I’ll add a new query so
this is gonna be messages this is gonna
return an array of message type which
are we’re gonna have to create once
again the array itself cannot be no but
also the object inside the message
cannot be no either so that’s why I have
the two exclamation points and then
we’re gonna have to create a new type as
well for that message so we’re gonna add
a new message type has an ID which has
to be an ID graphical ID it also has to
have a body which needs to be a string
cannot be empty it cannot be null and
we’re gonna have a created add field
which is simply a string like that now
the reason that this is actually a
string because well the date of now is
actually gonna be an integer but it’s
fairly long it’s actually more than what
the integer value could possibly
represent so it has to be a string and
then finally over here we’re gonna have
a messages function this is going to
return database dot messages
like that I’ll put in a comma so I’ll
save that so now back any browsers so
what can I brush that and then if I
delete everything we can now query
messages and we can ask for ID you can
ask for body like that get all of the
messages but it also be useful if you
get messages by user now this is where
we actually need to work with the neset
types so the thing is that users have
messages meaning that the relationship
is such that a message belongs to user
so how do you represent that because
let’s say we ask for users and we also
want to include messages so let’s go
back to the browser what I mean by that
is let’s say we create a query for users
right let’s say I want to know the email
address of the user but I also want to
know the messages for that user and for
every message let’s say I want to know
the body of that message now this would
not actually work if I try to run that
we get an error cannot query filled
messages on type user now that’s because
the users don’t actually have messages
yet but we couldn’t simply add them so
what I’ll do is let’s say users will
have messages like that we can have a
message type this would be an array if I
save it we have supervisor running so if
I just refresh the page again we run it
but we get cannot return null for non
nullable filled user messages so what’s
happening behind the scenes is that we
try to access the messages property off
the user object so let’s say the first
one but there’s no messages property on
the user so like what do we do in this
example well what craft qlg s or even
express graph QL there’s not really that
much you could do one of the typical
ways you would handle this is you would
create a model class for user so I might
have a class for user so let’s say we
have a constructor the constructor
expects a user object right and then
what can do here is we could inside the
constructor call the object assign
method so we could assign all of the
properties of the user on the current
object which would be the object of that
user and then finally here we’re gonna
create a new method look and call it
messages and then finally we could do
for the messages is we could do
let’s have database messages where
can access the messages collection we’re
gonna filter it down to those messages
whose user ID matches this ID which
would be the idea of this user the user
object they would pass in so now if I
actually scroll down and when we turn
the users we could actually map them so
I’ll do a function call back the closure
function and we have a user now wrap
each user in the user class I’ll pass in
the user inside so going back to the
browser if I now run this we actually
get the messages over there a nested
inside so how does this actually work
so when we have the users type we access
the user’s collection essentially just a
property of the fake database object
that would create it so we’re accessing
this array and then when we map through
that array we actually wrap every user
with the user class now every user class
will have a messages property
essentially a method actually it’s a
method which when you invoke that method
you’re gonna get back all of the
messages that belong to that user and we
filter down those messages by the user
ID so of course that’s one thing you
could do and besides that you could also
make this method a getter so you don’t
necessarily have to have it as a
function but this could also be a getter
function which you invoke as a property
so if I save the file and if I run the
query we’re gonna get the exact same
result back now if you’re kind of
curious how this actually works if I
open up the network tab in my browser
I’m gonna magnify it once again so once
I actually execute the query and in this
case we don’t actually use any variables
we don’t need them so I’ll close that
off what actually happens is if I run
this query once again you could see a
request coming out to the garage Q
endpoint and we get here is a post
request so what’s happening is it’s
actually executing a post on the graph
QL endpoint on our server on localhost
3000 what it’s doing is it’s actually
sending out the quarry as the value in
the payload and as a response is getting
all of the data so we’re to do here’s
what could actually mark that request in
order to see the mechanics of craft QL
so we can just simply issue a request
this would be a post
set the header to content type
application JSON like that and the data
needs to be an object so I’ll use single
quotes I’ll pass in a JavaScript object
this has to be json stringify so we’re
gonna have to have a Cori field or a key
and then as the value we’re gonna pass
in another object inside of that object
this is basically going to be the query
itself so what I’ll pass in is let’s say
users and for every user we’re gonna
expect an ID and finally I have to
specify localhost 3000 and I’m also
gonna add a new line at the end like
that if I run it I get cannot post to
slash that’s because I forgot to graph
QL but if I add that there we go we got
the data back so we get back the users
array which contains all the user
objects with the ID and of course we can
modify the query to add more fields for
example apart from ID we could also ask
for email we could ask for avatar URL
all the other stuff as well so it’s
gonna work the exact same way so as you
can see here all that graphical is doing
is it’s basically making a post request
with some JSON so content type
application JSON and it’s passing in
some value which is typically an object
with a query sometimes you might also
have variables if let’s say recording an
individual user and then as the query
itself you pass in the query that you
will typically type out in graphical so
that’s how graphical works it takes in
the query it passes in the query as a
payload and then sometimes it also
includes like I said variables as you
can see here in this example it’s
actually no but sometimes it’s an object
or the actual values and then as a
response you get back the JSON object
from the server but like I said this
request is actually the meet of graph QL
so it’s something that you might imagine
creating from a client so you could
actually make an AJAX request and this
is basically how some of the clients for
graph QL actually works so something
like a polo client is actually making
Ajax requests to your graphical server
just like we could simply do from the
terminal so once again I want to
emphasize that graphical is not a
storage engine or a database engine it’s
just simply an abstraction layer on top
the existing API and it comes up with
the query language that basically allows
you to create queries for your graph QL
service when you query your service your
graphical service you basically issue
queries with the specific types of data
that you want to access as well as a
specific field of those types that you
want to get back in this case we’re
interested in users but let’s say users
might have a bunch of different fields
but we might only be interested in let’s
say email as well as the messages body
so we specify that type of data and we
get back that exact data in that exact
format and of course if your graph kill
sits directly on your server so you have
a direct interface with the database you
might also have a selection of specific
fields from that database so you might
imagine that the web application to be
very efficient even on slow connections
when we have to be careful with the
amount of payload that we’re exchanging
between the servers so that’s basically
it for the introduction guys and once
again like I said this approach with the
classes is kind of tricky because once
you actually start going into multiple
levels of types we if you have nested
types it gets more complicated and of
course there’s different tools to manage
that one of the tools is known as a polo
server and we’re actually going to look
at that in the very next video in detail
so thanks for watching and I’ll see you then
Please follow and like us: