hey guys welcome back to my channel my
name is Alex and in this video seriously
the Explorer graph QL so a graph kill
was probably something you’ve heard
about
it’s a project lunched by Facebook in
2012 and has been gaining a lot of
popularity recently so what is graph QL
well in essence graph QL is first of all
a query language for your api’s but it’s
also a server-side runtime for executing
those queries now grant qo is not really
a storage engine or a database engine
it’s just simply an abstraction layer on
top of the existing API that allows you
to query your existing data with the
existing code base so imagine that you
have some kind of a database and you
have projects in that application or
database
so when graph QL you would basically
define a type you’ll call it a project
you need to find the set of fields that
that type will have so for example name
which would be a string a tag line
contributors as an array of users and
then when you issue queries to your
graph QL web service your queries would
basically be a set of curly braces where
you have a type in this case a project
it might also have arguments like name
for example graph QL and they also list
the set of fields that you like to
request from that service or basically
web application right and as a response
you’re gonna get a JSON object that
contains a key so project this is
exactly the type that you requested and
also the list of fields that you asked
for so the advantage of graph QL is that
actually allows you to ask for specific
fields in your web service and receive
those fields back as a JSON response now
as it turns out this is actually very
useful for restful api because one of
the inherent problems with restful api
is is either under fetching of data or
over fetching of data and we’re going to
explore that in detail but essentially
even if you look at this simple example
or here they have a query with a hero
and they ask for specific fields on that
type on that hero type so you could ask
for a name if you add more fields let’s
say a height then that field is also
going to be included in the response and
like I said this is pretty useful for
restful api s’ and it’s also very useful
for different kinds of clients so for
example your api might have a web client
might have mobile apps that also
interact with that api well it’s kind of
useful for those at the eyes because
with graph QL you could specify the
exact information that you want to
now some of the other advantages of
graph QL is that it has a type system so
what happens is you don’t necessarily
have to build your application from
scratch so what that means is you could
actually introduce graph tool to an
existing application you’re just
basically going to define a type system
that contains the types and the types
like I said basically represent
different objects in your application
and then you have a single endpoint
which is typically slash and graph to
well where you basically send all of
your queries or requests and as you can
see here in the example we can have
different types that have different
fields and of course they could also be
nested so for example a hero type might
have France France could be another type
that’s nested in the hero
and then France might have other fields
that could also be composite fields or
other types one of the other cool things
about graph QL is its IDE which is known
as graphical so what graphical allows
you to do is to basically issue queries
inside of a web page and then get
immediate results from your web server
and apart from that some of the other
advantages is that what graph QL will
have simplified version of our API is
and like I said we don’t necessarily
have to rebuild the whole application in
order to introduce graph QL we could do
is to just simply import graph QL and
then have a few type definitions set up
an endpoint pointing to graph QL service
and then we’re basically gonna have a
functional running graph QL server and
then we can basically start building on
top of it and of course there’s quite a
few companies who already use graph QL
one of them is obviously Facebook you
might have heard of github graph QL API
and there’s quite a few other big
players on the scene who actually use
graph tool so we’re gonna do throughout
this year’s is we’re gonna build a
simple chat application to explore graph
kill and we’re actually going to begin
from very scratch with a very basic sub
graph kill and as we move along I’m
gonna introduce you to different tools
like a polo server or la polo client
we’re gonna also explore graph QL yoga
and some of the other tools as well
but like I said we’re gonna begin with
the bare basics just to understand how
graph QL actually works so what I’m
gonna do next is I’m gonna switch to my
terminal and in my directory I’m going
to create a new project so let me let’s
make a new directory I’m gonna call it
chat and navigate in that directory I’m
gonna do next is I’m gonna initialize a
new project sold ooh yarn in it
– why a – white flag is basically going
to answer all of the questions with a
yes and then I’ll open it in Visual
Studio code so what I’m gonna do next is
I’ll open I’ll go back to the terminal
and let’s also open up a new file I’ll
call it index GS all right so let’s get
started so if I go back to the browser
there’s actually quite a few links on
the website so if you go to code at the
top you’re gonna see that graphic you’ll
actually comes with quite a few as the
case or different implementations for
different languages so for example I
have C sharp go Java and there’s one
actually for JavaScript so if you click
on that one you’re gonna be navigated to
this section where you’re gonna see some
information about the graph ql j s
library so if we switch to that one
here’s the information about the graph
ql j s so all we have to do is to
basically just install graph QL let’s go
back to the terminal so what I’ll do is
I’ll do yarn add graph QL so this is
going to install the graph QL dependency
now back in our code editor let’s do the
following let’s import graph QL as well
as build schema and this is gonna come
from graph QL like that what we can do
next is to call the graph QL function
and the graphical function expects at
least three parameters we’re gonna need
to have a schema we’re gonna need to
have a query and we’re also gonna have
what’s known as a root value so what
this function allows us to do is the
first of all have a schema we’re gonna
begin with the schema first let’s have a
schema I’m gonna create a new constant
schema and we’re gonna call the build
schema helper what this allows us to do
is to have a schema definition and as
you can see here I’m using backticks
it’s basically just a string so what it
requires us to include is first of all a
query type so we really kind of talked
about the types in graph QL graph QL is
built with the type system at the heart
so the types are the definitions for
different kinds of objects or entities
in the application so the route type is
known as the query and that’s the main
type that you always have to include so
for example in the core you can have a
message write a message could be a
string
with something like that once we have
that query we’re basically telling graph
QL that there is a message property or a
field that we can query and when we
query that field we’re gonna get back a
string now of course in order to
actually return something for that
message we’re gonna have to have a
resolver function so what I’ll do next
is I’ll create a new constant I’ll call
it root value and this one would need to
be an object that contains a key that
will correspond to the message so in
this case we have a definition for a
message that’s why we have to use the
same exact key we can provide a function
and then that function can return
something so in this case we could
return a string we just simply say graph
QL works something like that right so
finally in order to actually execute
that query we’re gonna pass that in so
this would be the actual graph QL query
that we need to execute so the format
for queries is pretty standard there is
a set of curly braces like that and then
inside you could basically specify the
types or fields that you want to execute
so in this case we only have one type
it’s a message and it’s a string so we
can leave it off like that and then at
the end this graph QL function is just
basically gonna give us a promise so we
can chain it with a then we can have a
response look at console.log that
response but in this case because we’re
simply doing a console log the other
thing we could do is just to simply pass
the console log reference itself and
this is basically going to involve the
console log function with the only
argument and then finally we could also
catch it and I’m gonna pass a reference
to console error okay I’m gonna save
that and back in the terminal what you
do here is we can run node on the
index.js file and as you can see here we
get back a response which essentially is
a JSON object that contains an important
data key property all the responses on
the core is that you run on in graph QL
are actually going to have this data
property and then as an object as a
value for that data property we get an
actual object which contains the message
key and the message key contains the
string that we
defining graph QL now it’s probably not
very useful to just have a simple string
on this schema it might be interesting
to create something more complicated so
for example let’s actually have a custom
type so for example if we’re building a
chat application every child application
will probably have users in the database
right so what could do is we could have
a query on users let’s say and that type
or that query will actually correspond
to the user type so it’s something that
will actually have to create but we’ll
have to create a user type now the user
type will probably have an ID it will
probably have an email it’ll probably
have let’s say a name it may be an
avatar URL or something like that now
when you have those fields when you
basically lists those fields you also
have to define the actual type of those
fields so in this case we could actually
use the standard types in graph tool
which are string integer float or
boolean also known as scalars so in this
case the ID could actually be a special
ID type which essentially behaves like a
string the difference is the ID is
specifically designed for unique
identifiers and then the exclamation
mark says that every user type must have
an ID which pretty much makes sense if
you have a database of users every users
needs to be uniquely identified by an ID
so that exclamation mark basically says
whenever we return a user it must have
an ID then the email will that make
sense to be a string write the name same
thing we could make it a string and then
the email is probably something that
we’re gonna have to require all the time
so I’m also going to add an exclamation
mark and then the avatar URL could just
simply be a string right so we have a
definition for a user and of course as
you probably know we’re gonna have to
create a resolver function for that user
so let’s say we have users and this is
going to be a function again so we’re
gonna have to return something now what
I’m gonna do in this case I’m actually
going to create a fake database so let’s
have a simple constant database which
has a collection of users and this would
be an array which contains a bunch of
objects so for example the first one I
have an idea of one we could have an
email of alex at gmail.com
it also have an e
let’s say Alex could also create a few
more so for example or creates a second
one let’s say max at jingle comm and I
finally have to switch the name so let’s
add max so that’s pretty much it so now
we have to user objects and then finally
here what we could do is we can access
the database object and then the users
collection so that’s basically going to
return the array of all users so for our
quarry what we could do here is instead
of message we can now reference users
and then finally we cannot leave it off
like that because users is actually a
type so it’s not a string it’s not a
boolean or a float or something like
that it’s actually a composite type so
we also have to list the fields that we
actually want to fetch for that type so
in this case let’s say I’m interested in
the email for each user we’re
essentially expecting to get an array of
users and we’re expecting to see the
email property or field on every user
instance so one returned database users
we actually expect to get an array that
contains users inside of it so
individual user objects essentially and
in this case we actually have to change
users not to the user type but to
actually an array of users because we’re
expecting a list and not the individual
type so what I’ll do is I’ll add square
brackets and this basically indicates a
list and then finally I’m also going to
add an exclamation point meaning that I
don’t want to have any no objects inside
of that array so the exclamation once
again means that the value cannot be
null and I’m also gonna say the same
thing for the array itself so what this
means
the first exclamation mark over here
outside of the US means that the list
itself cannot be a null or a no
reference this has to be at least an
empty array or an array with objects and
then these second one inside and the
second exclamation point means that the
object itself cannot be null so the user
inside of the array has to be an actual
object and not null so I’m gonna save
this and then back in the terminal I’m
gonna do node index jeaious and as you
can see here we get a bunch of objects
now we can’t actually inspect those
object we can see the inner properties
of those objects so what I’m going to do
instead is I’ll come back to this then
clause what I’ll do instead is I’ll
actually pass a callback function and
then I’ll do console
and it’ll pass the response but I’m also
gonna pass an option here I’m gonna say
that the depth is gonna be null so this
is actually going to print out the
object as if rerun this and we’re
actually gonna see the inner properties
of those objects and as you can see here
the interesting thing is we don’t
actually get all the properties on the
user so what I mean by that is that in
our fake database we have objects that I
have a bunch of fields right we have an
ID we have an email we also have a name
so each object sort of follows that
convention but in this case for the
query we’re only interested in the email
property so for some reason we may not
necessarily need the ID we may not
necessarily need other properties like
let’s say we add messages or we add more
types if we complicate the database
structure we only want to know the email
and if you want to know about other
fuels as well
you could add let’s say the ID if I
rerun the query again or the the
application here are you gonna see we
get the array it contains the objects
and each object is gonna have the ID as
well as the email so like I said you ask
for specific fields and you get those
exact fields back in response or in
return now it’s probably not the case
they’re going to be running terminal
applications that often so if I go back
to the browser
we actually have different options for
our graphical applications so what
you’ve seen so far is just a simple
application that uses the graphic you
library and that library basically just
uses a CLI so we did here is we
basically created a simple schema right
create a schema the type of query the
type of user and then we have a user’s
quarry on it and then we also have a
route resolver function which basically
returns you the list of users and then
we simply issue a query with users now
in order to make this more flexible in
order to make this an actual application
you can interact with we’re gonna have to use another library
name is Alex and in this video seriously
the Explorer graph QL so a graph kill
was probably something you’ve heard
about
it’s a project lunched by Facebook in
2012 and has been gaining a lot of
popularity recently so what is graph QL
well in essence graph QL is first of all
a query language for your api’s but it’s
also a server-side runtime for executing
those queries now grant qo is not really
a storage engine or a database engine
it’s just simply an abstraction layer on
top of the existing API that allows you
to query your existing data with the
existing code base so imagine that you
have some kind of a database and you
have projects in that application or
database
so when graph QL you would basically
define a type you’ll call it a project
you need to find the set of fields that
that type will have so for example name
which would be a string a tag line
contributors as an array of users and
then when you issue queries to your
graph QL web service your queries would
basically be a set of curly braces where
you have a type in this case a project
it might also have arguments like name
for example graph QL and they also list
the set of fields that you like to
request from that service or basically
web application right and as a response
you’re gonna get a JSON object that
contains a key so project this is
exactly the type that you requested and
also the list of fields that you asked
for so the advantage of graph QL is that
actually allows you to ask for specific
fields in your web service and receive
those fields back as a JSON response now
as it turns out this is actually very
useful for restful api because one of
the inherent problems with restful api
is is either under fetching of data or
over fetching of data and we’re going to
explore that in detail but essentially
even if you look at this simple example
or here they have a query with a hero
and they ask for specific fields on that
type on that hero type so you could ask
for a name if you add more fields let’s
say a height then that field is also
going to be included in the response and
like I said this is pretty useful for
restful api s’ and it’s also very useful
for different kinds of clients so for
example your api might have a web client
might have mobile apps that also
interact with that api well it’s kind of
useful for those at the eyes because
with graph QL you could specify the
exact information that you want to
now some of the other advantages of
graph QL is that it has a type system so
what happens is you don’t necessarily
have to build your application from
scratch so what that means is you could
actually introduce graph tool to an
existing application you’re just
basically going to define a type system
that contains the types and the types
like I said basically represent
different objects in your application
and then you have a single endpoint
which is typically slash and graph to
well where you basically send all of
your queries or requests and as you can
see here in the example we can have
different types that have different
fields and of course they could also be
nested so for example a hero type might
have France France could be another type
that’s nested in the hero
and then France might have other fields
that could also be composite fields or
other types one of the other cool things
about graph QL is its IDE which is known
as graphical so what graphical allows
you to do is to basically issue queries
inside of a web page and then get
immediate results from your web server
and apart from that some of the other
advantages is that what graph QL will
have simplified version of our API is
and like I said we don’t necessarily
have to rebuild the whole application in
order to introduce graph QL we could do
is to just simply import graph QL and
then have a few type definitions set up
an endpoint pointing to graph QL service
and then we’re basically gonna have a
functional running graph QL server and
then we can basically start building on
top of it and of course there’s quite a
few companies who already use graph QL
one of them is obviously Facebook you
might have heard of github graph QL API
and there’s quite a few other big
players on the scene who actually use
graph tool so we’re gonna do throughout
this year’s is we’re gonna build a
simple chat application to explore graph
kill and we’re actually going to begin
from very scratch with a very basic sub
graph kill and as we move along I’m
gonna introduce you to different tools
like a polo server or la polo client
we’re gonna also explore graph QL yoga
and some of the other tools as well
but like I said we’re gonna begin with
the bare basics just to understand how
graph QL actually works so what I’m
gonna do next is I’m gonna switch to my
terminal and in my directory I’m going
to create a new project so let me let’s
make a new directory I’m gonna call it
chat and navigate in that directory I’m
gonna do next is I’m gonna initialize a
new project sold ooh yarn in it
– why a – white flag is basically going
to answer all of the questions with a
yes and then I’ll open it in Visual
Studio code so what I’m gonna do next is
I’ll open I’ll go back to the terminal
and let’s also open up a new file I’ll
call it index GS all right so let’s get
started so if I go back to the browser
there’s actually quite a few links on
the website so if you go to code at the
top you’re gonna see that graphic you’ll
actually comes with quite a few as the
case or different implementations for
different languages so for example I
have C sharp go Java and there’s one
actually for JavaScript so if you click
on that one you’re gonna be navigated to
this section where you’re gonna see some
information about the graph ql j s
library so if we switch to that one
here’s the information about the graph
ql j s so all we have to do is to
basically just install graph QL let’s go
back to the terminal so what I’ll do is
I’ll do yarn add graph QL so this is
going to install the graph QL dependency
now back in our code editor let’s do the
following let’s import graph QL as well
as build schema and this is gonna come
from graph QL like that what we can do
next is to call the graph QL function
and the graphical function expects at
least three parameters we’re gonna need
to have a schema we’re gonna need to
have a query and we’re also gonna have
what’s known as a root value so what
this function allows us to do is the
first of all have a schema we’re gonna
begin with the schema first let’s have a
schema I’m gonna create a new constant
schema and we’re gonna call the build
schema helper what this allows us to do
is to have a schema definition and as
you can see here I’m using backticks
it’s basically just a string so what it
requires us to include is first of all a
query type so we really kind of talked
about the types in graph QL graph QL is
built with the type system at the heart
so the types are the definitions for
different kinds of objects or entities
in the application so the route type is
known as the query and that’s the main
type that you always have to include so
for example in the core you can have a
message write a message could be a
string
with something like that once we have
that query we’re basically telling graph
QL that there is a message property or a
field that we can query and when we
query that field we’re gonna get back a
string now of course in order to
actually return something for that
message we’re gonna have to have a
resolver function so what I’ll do next
is I’ll create a new constant I’ll call
it root value and this one would need to
be an object that contains a key that
will correspond to the message so in
this case we have a definition for a
message that’s why we have to use the
same exact key we can provide a function
and then that function can return
something so in this case we could
return a string we just simply say graph
QL works something like that right so
finally in order to actually execute
that query we’re gonna pass that in so
this would be the actual graph QL query
that we need to execute so the format
for queries is pretty standard there is
a set of curly braces like that and then
inside you could basically specify the
types or fields that you want to execute
so in this case we only have one type
it’s a message and it’s a string so we
can leave it off like that and then at
the end this graph QL function is just
basically gonna give us a promise so we
can chain it with a then we can have a
response look at console.log that
response but in this case because we’re
simply doing a console log the other
thing we could do is just to simply pass
the console log reference itself and
this is basically going to involve the
console log function with the only
argument and then finally we could also
catch it and I’m gonna pass a reference
to console error okay I’m gonna save
that and back in the terminal what you
do here is we can run node on the
index.js file and as you can see here we
get back a response which essentially is
a JSON object that contains an important
data key property all the responses on
the core is that you run on in graph QL
are actually going to have this data
property and then as an object as a
value for that data property we get an
actual object which contains the message
key and the message key contains the
string that we
defining graph QL now it’s probably not
very useful to just have a simple string
on this schema it might be interesting
to create something more complicated so
for example let’s actually have a custom
type so for example if we’re building a
chat application every child application
will probably have users in the database
right so what could do is we could have
a query on users let’s say and that type
or that query will actually correspond
to the user type so it’s something that
will actually have to create but we’ll
have to create a user type now the user
type will probably have an ID it will
probably have an email it’ll probably
have let’s say a name it may be an
avatar URL or something like that now
when you have those fields when you
basically lists those fields you also
have to define the actual type of those
fields so in this case we could actually
use the standard types in graph tool
which are string integer float or
boolean also known as scalars so in this
case the ID could actually be a special
ID type which essentially behaves like a
string the difference is the ID is
specifically designed for unique
identifiers and then the exclamation
mark says that every user type must have
an ID which pretty much makes sense if
you have a database of users every users
needs to be uniquely identified by an ID
so that exclamation mark basically says
whenever we return a user it must have
an ID then the email will that make
sense to be a string write the name same
thing we could make it a string and then
the email is probably something that
we’re gonna have to require all the time
so I’m also going to add an exclamation
mark and then the avatar URL could just
simply be a string right so we have a
definition for a user and of course as
you probably know we’re gonna have to
create a resolver function for that user
so let’s say we have users and this is
going to be a function again so we’re
gonna have to return something now what
I’m gonna do in this case I’m actually
going to create a fake database so let’s
have a simple constant database which
has a collection of users and this would
be an array which contains a bunch of
objects so for example the first one I
have an idea of one we could have an
email of alex at gmail.com
it also have an e
let’s say Alex could also create a few
more so for example or creates a second
one let’s say max at jingle comm and I
finally have to switch the name so let’s
add max so that’s pretty much it so now
we have to user objects and then finally
here what we could do is we can access
the database object and then the users
collection so that’s basically going to
return the array of all users so for our
quarry what we could do here is instead
of message we can now reference users
and then finally we cannot leave it off
like that because users is actually a
type so it’s not a string it’s not a
boolean or a float or something like
that it’s actually a composite type so
we also have to list the fields that we
actually want to fetch for that type so
in this case let’s say I’m interested in
the email for each user we’re
essentially expecting to get an array of
users and we’re expecting to see the
email property or field on every user
instance so one returned database users
we actually expect to get an array that
contains users inside of it so
individual user objects essentially and
in this case we actually have to change
users not to the user type but to
actually an array of users because we’re
expecting a list and not the individual
type so what I’ll do is I’ll add square
brackets and this basically indicates a
list and then finally I’m also going to
add an exclamation point meaning that I
don’t want to have any no objects inside
of that array so the exclamation once
again means that the value cannot be
null and I’m also gonna say the same
thing for the array itself so what this
means
the first exclamation mark over here
outside of the US means that the list
itself cannot be a null or a no
reference this has to be at least an
empty array or an array with objects and
then these second one inside and the
second exclamation point means that the
object itself cannot be null so the user
inside of the array has to be an actual
object and not null so I’m gonna save
this and then back in the terminal I’m
gonna do node index jeaious and as you
can see here we get a bunch of objects
now we can’t actually inspect those
object we can see the inner properties
of those objects so what I’m going to do
instead is I’ll come back to this then
clause what I’ll do instead is I’ll
actually pass a callback function and
then I’ll do console
and it’ll pass the response but I’m also
gonna pass an option here I’m gonna say
that the depth is gonna be null so this
is actually going to print out the
object as if rerun this and we’re
actually gonna see the inner properties
of those objects and as you can see here
the interesting thing is we don’t
actually get all the properties on the
user so what I mean by that is that in
our fake database we have objects that I
have a bunch of fields right we have an
ID we have an email we also have a name
so each object sort of follows that
convention but in this case for the
query we’re only interested in the email
property so for some reason we may not
necessarily need the ID we may not
necessarily need other properties like
let’s say we add messages or we add more
types if we complicate the database
structure we only want to know the email
and if you want to know about other
fuels as well
you could add let’s say the ID if I
rerun the query again or the the
application here are you gonna see we
get the array it contains the objects
and each object is gonna have the ID as
well as the email so like I said you ask
for specific fields and you get those
exact fields back in response or in
return now it’s probably not the case
they’re going to be running terminal
applications that often so if I go back
to the browser
we actually have different options for
our graphical applications so what
you’ve seen so far is just a simple
application that uses the graphic you
library and that library basically just
uses a CLI so we did here is we
basically created a simple schema right
create a schema the type of query the
type of user and then we have a user’s
quarry on it and then we also have a
route resolver function which basically
returns you the list of users and then
we simply issue a query with users now
in order to make this more flexible in
order to make this an actual application
you can interact with we’re gonna have to use another library
Please follow and like us: