to look at some graph QL basics
I am mpj and you are watching fun fun
function
okay so what is graph QL I personally
think of graph QL as the replacement for
rest with broth QL instead of these post
put and get and stuff we have a little
query language that is slightly more
expressive it allows us to get exactly
the data that we want to know more and
stuff like that
mind you not everyone will agree with me
that it it will replace rest but here
goes my prediction of the future graph
QL is going to mostly replace rest there
I said it and now people can link to
this video in the future and either
laugh at me or I will laugh at them but
it doesn’t really matter whether or not
you think it’s going to replace rest or
not it’s still a very very useful tool
let me show you what it looks like okay
so what you’re looking at here is a tool
called graphic QL that is running on my
my local machine and this is a kind of
debugging tool that you can use to you
know explore your graph QL endpoints and
this is running an express service
it’s the express service it’s kind of
like where we were going at the end of
this video and what we’re seeing here is
a query I can run it yeah so this shows
you the result of an author this is a
graph QL endpoint that exposes the
Goodreads API if you don’t know about
Goodreads it’s a basically a social
network for book nerds I guess but what
we’re looking at here is a query so what
this query does is it requests an author
with ID 4432 so this is the equivalent
of a get in rest and what we then see
here is that we are requesting a name as
well we want the author’s name and that
is what we are getting here as well so
you see here that the query here
and the result are very similar they
they actually are exactly the same all
right well they have exactly the same
structure except that in the in the
result the the actual data is filled in
and if we want to request more data we
can do so by adding for instance books
here and running it and it will show
show books and as you say see here it
automatically fell in to two properties
here for me title and ISBN you might
notice here that unlike rest graph QL
has a schema so there is there is
actually a type structure here that
graphic QL is aware of and can therefore
autocomplete for it so if I delete this
eul’s and type I you see that it will it
will suggest stuff for me and I can also
see here in the in the right-hand column
I can also navigate and check out the
API so know what what select what what
properties what arguments I can select
on when it comes to author and it shows
me here that it is ID that I supposed to
pass in here and that will return an
author
give me an author and if I click the
author I see what kind of feels that has
and we see that books is a list of book
which also shows you what kind of titles
and it all kind of properties it has it
has a title and a nice bien as you see
here ah let’s see
it was ISBN here and now the query here
includes ISBN if I delete the title here
I will get just the the books with their
ISBNs
remove name here there are a lot of more
fancy Quarian stuffs that you can do but
this is what we are going to focus on in
this episode so what we’re looking at
here why is this useful why why are we
just not going
straight towards the the Goodreads API
directly let me show you what the the
author endpoint looks like on in the
Goodreads API so what you see here is
the payload of the REST API endpoint of
author here in the Goodreads API and as
you see it’s well it’s XML for starters
and it’s also it’s also very big so it
gives you a lot of data so if you
you can’t realistically use this from
the client if you want a fast client
because it will like give you all the
data it will even give you all of all of
the authors books as well so you see
here like wow there’s all the books in
here and this is natural when it comes
to REST API as most REST API s give you
a lot of lot of stuff in there endpoints
because there is no query language built
into rest it’s just well we request this
resource we we request this author and
there is nothing specified in the rest
contract about well I want authors with
a title and their books with a with yes
there is PMS that there is no such thing
built into the the rest protocol or the
rest contract or the rest standard oh
you can build this on top of rest and
some ApS have that for instance let’s
say that you could have some kind of
fields equals title here but all of that
would be different from API to API and
you would not be able to reuse any rest
tooling from case to case this is
something each endpoint would have to
build from scratch and all consumers
would also have to tree
every API consumption differently with
what rebuilding this Beltran
alternatively you can build a
intermediate service between the remain
the main service the the Goodreads API
and then you build your own little
backing service perhaps with blue node
Express service that feeds the exact
information back to the client with
basically you basically create a client
specific back-end service Netflix
popularized this actually a couple of
years ago like four four years ago when
they published an article talking about
their architecture where they had they
had their core set of services that all
all things consumed the place where you
got the movies and stuff they were super
generic but then they also had these
aggregation services that picked and
shows what sources to to pick from and
then they served a very client specific
payload to the respective clients so
they had little server service for the
let’s say the Apple TV client a little
service for the android client a little
service for the Roku client and one for
the web service but depending on what
that view needed what information that
needed what I view graph QL as is a more
generic way of creating these
aggregation services so instead of
building this set of services with view
specific delivery mechanisms you can use
graph QL to build one that is pretty
darn decent at delivering exactly the
kind of data that each client requests
so in today’s video what we’re gonna do
is I we’re going to turn this into this
that’s what we’re gonna do let’s begin
by creating
ting a new repository on github yeah I’m
gonna this is now available to you you
can follow along I guess and I’m going
to call it f F F dot graph graph QL and
Goodreads and I won’t bother giving it a
description and I will add a git ignore
for node F my key something perhaps that
create repository clone or download loan
copy copy copy and we are going to get
blown paste that in loading cloning
cloning cloning and see the FFF graph QL
good roots
let’s open code all right
first step is to create a basic web
service server an Express server I’m
gonna do that now we’re gonna create a
serve dot J s and I’m good to write this
now
alright so let’s begin by including
Express require looks Express and the
first step is to create an app it’s just
like via scrolling Express that gives us
an app and then the app is going to
listen to some ports 4000 oh I think and
then we just cancel log listening let me
bring up the console create integrated
terminal both and don’t know sir but yes
cannot find module Express no that’s
correct because we have not pulled in
the npm module
so let’s first go and I am in it so that
we create a package to Jason I’m just
gonna hit enter enter enter enter enter
enter
enter enter enter enter yes whatever and
then we are going to pull in the Express
module and can install – tests – save
Express installing please stand by oh
that was fast
okay let’s run it again node serve gasps
oh this listen cool but we have nothing
really happening here so what we’re
gonna do now is that we are going to
create a graph QL endpoint and to do
that there is a very handy Express
plug-in extension plug-in I I don’t know
either way it’s called group require
Express graph QL and we are going to
kill that graph graph QL HTTP I think
that’s a convention and before listening
we’re going to use it in Express and we
are doing 2 QL I’m not exactly sure what
what it is this is doing but this is how
you set it up in in expressly so let’s
see I suppose that this means that we
are registering this this extension to
I’ll pass it graphic ul true let’s see
if this works
in this form no it won’t because it
cannot find module Express graph QL
let’s include an NPM install – just save
Express graph run again cannot find
module graph QL
why didn’t you install that for me no
because you are using peer dependencies
which are evil either way it means that
as well
let us try it again it’s listening cool
okay I wrote grap ql wrong so let’s see
if this works if I if I go to that now
what happens
localhost correct ql okay
graph QL middleware options must contain
a schema which it doesn’t yet fair
enough
we need to define a schema okay so where
do we get schema from and what is it
so schema is basically the graphic you
are singing it’s the one that contains
the types and it can also contains all
of the information on how to get at the
data so it’s it’s basically where all
the magic happens so we are going to
define a scheme and we are going to put
you know let’s create that new let me
close this console for now save and I’m
gonna remodel J us now before we do
anything I would actually like to get
the data from the from the Goodreads API
and to do that we’re gonna use fetch
fetch is the standard way of getting
data on modern browsers it’s not it
doesn’t exist in node but thankfully we
have fancy things like modules so we can
just get it with an FBI module and we
just cool require node fetch and we are
going to fetch the the endpoint and
hi-yah I’m going to copy paste this here
from our list example the one I paste it
into the browser earlier we are going to
keep
I D hard-coded here for now and and once
we with the response since this is
normally if this was Jason we would do
response dot JSON but this is XML so we
have to deal with that and I’ve
intentionally picked and annoying API
here because API is are quite often very
imperfect you have to do quite a bit of
mangling with them and that is actually
a very good use case for graph QL it’s
this neat thing that you put in front of
a bunch of dirty API so perhaps not
dirty but perhaps just balkanize they
are just not cohesive you cannot get all
the data that you want in one fell swoop
so you add a graph QL thing in the
middle to aggregate that painter for you
either way so I think that let’s see
what happens here comes ax fetch and X
and I’m going to start Quokka here
quokka start on current file yes
kyoool okay we got some stuff here yeah
this gives us the XML as a string fine
this in line evaluation plug-in is
called quokka it’s very handy when you
just want to do a little bit of ripple
based development I like it a lot and
but we don’t want this is hard to deal
with as a string so I would like
something that parses this into a like
it’s still gonna be the xml structure
but i would like it to be as a
javascript object so there is a handy
JSON module sorry npm module for that
it’s called require dot xml let me
minimize this for now
xml – Jas and the
a handy function called parts string
that will do exactly what it is I want
now the problem is that this poor string
it was it’s a very mature tool it’s been
around for a while but as a consequence
it uses callbacks not promises so we are
going to use a YouTube that was added
into node 1.81 for like modern node
require rule u 2 & u 2 dot pro me see
fine so that this thing returns a
promise
instead of using callbacks so that we
can use it in our promise chain down
here I’ll sitcoms parse XML fantastic
and then we pass that into our then
lalala lalala sorry parsec so cool this
is read why is it red cannot find module
XML to JSON is perfectly correct
so let’s toggle toggle integrated
terminal nope and let me be install – –
– save XML – J yes all right
see if this starts running cool parts
XML is not defined
no I typo ok cool now we have and
XML as an object base that is good
enough to proceed let me can I turn off
quak quak off
stop stop cool la la la la la what we
gonna do is that we are going to do
export module exports we’re going to
group at the root here we’re going to
define our query query hard to type and
that is going to be a graph QL qql
object type funk which in turn it’s
gonna have a name we’re going to call it
query it’s gonna have a description I’m
not sure if this is necessary or not all
the examples use it but let’s keep it
there for now and then that thingy is
going to have fields this old maps to
the example we saw earlier Fields is a
function that should return an object
and it’s good to have an author remember
that we’re querying authors in the
Arthur in the API and this is going to
have an author type after type now from
where does author type come from we’re
going to define this in a little bit but
I’m gonna proceed a little while longer
it’s this query requires some arguments
one argument to be specific it requires
an ID and that ID is of type graph QL
int and perhaps we can actually do
proceed with defining the other type
actually let’s do that
that’s how you do that you do coms dot
or third type equals new graph it’s
another one of these I’ve got a copied
graph QL object type and it’s similar to
the query it requires a name Mew Mew Mew
Mew I’m gonna call it author and it’s
gonna have a description as well and
it’s also going to have some fields you
scroll down a little bit so that you can
see both at the same time the fields is
again a function that returns an object
and the author has a name
[Music]
you know what let’s leave that for now
and see if we can get this running
before proceeding so we are exporting
this schema here and comment out this
fetch just for now and yes so we are
quite a schema passing it in
perhaps this will work let’s see toggle
toggle integrate to journal and you know
let’s start the server okay bang graph
QL object type is notify no I have to
actually require these objects these
things in let’s do that
comms booth we’re requiring this from
graph QL do you have to it so I’m gonna
grab that we also use this thing graph
QL schema sorry there there and we also
had graph QL int
what okay let’s run that and see if it
works
no still breaks let’s see what broke
what broke what broke author feels must
be an object with field names as keys or
okay we need to define some field so
let’s do that then let’s have name and
that needs to be have a type wait close
this to not be distracted and the type
is going to be a graph QL string and
[Music]
okay perhaps that’s enough
let’s see and we also need to include
this require it see Wow let’s open run
it again and see what happens
all right so far so good listen okay so
what we’re doing here is the my old
prepped example that was pretty written
now now what is service serve serving as
at localhost is my actual the ax
or code that we are looking at so yeah
can I get root that’s correct because we
have no input there but let’s go to
I think we misspelled it writes graph QL
graph QL all right cool this is actually
something it remembers from local
storage of cookies or something this is
not actually pulled from the server
let’s just delete this for now and let’s
run this and see what happens
syntax error graph QL request expected
name found expected name found what the
okay it was because I passed it an empty
empty objects that just broke it’s a
once either nothing or this this object
literal like thing with a property so
now we’re actually getting some data
here like it’s it’s not actually giving
us any author because we have not given
it an any way of getting to that data so
let’s let’s do that now move that away
for bit let’s fix this typo actually
graph here well okay let’s go back to
the scheme and see if we can get some
some data in here so I’m gonna copy this
our fetch stick and I’m going to scroll
down here to the author
now besides type and orgs can also
provide it with a resolve function this
is basically the function that the
graffia will use to fetch or acquire the
data for a author so what we’re going to
do is it takes a function
the first argument to the function is
the any parent data that is passed to it
if it’s a nested structure we don’t care
about that at the moment the second
argument is the orgs I suppose we can
call it it’s these things but with the
actual data being passed in if you
remember like these are the arcs so this
is what we’re gonna get we’re gonna get
an ID and we’re gonna get this this
number so I’m gonna paste in the fact
here and remember that this is our
arguments see you we’re gonna change
this to a template literal and we’re
gonna replace this thing here where the
args dot ID so that now gets the actual
uses this ID from this ID here it’s
gonna put that into the this API here
and it’s going to fetch all this data
here I’m not sure exactly where we are
you know what let’s just let’s just run
it and see what what happens let’s
restart the server I’m gonna make this
window a little bit smaller and let’s
and let’s run it and see what happens
oh my god cannot what what even it’s
alright it’s because I fixed the type of
graph QL blam run ok how can they know
well this makes sense because hmm so
what resolve will do is that it’s going
to fetch all this data and then it’s
going to parse the XML is a JSON object
and then it’s going to provide that data
and asked like the data meet to the to
the author type
like we’re loading so we’ll load it but
if we look here at the auto type there’s
this name here that we have it has no
way of knowing how to extract this name
from this this XML monster that we have
remember like this is what it actually
looks like there’s like where is the
name of the author well it’s here we
know this but the code doesn’t so let’s
fix that well fix that let’s fix that
make this window a little bit smaller
let me remove that sidebar and have them
sign my side so we see here that the
first root element here is a Goodreads
response let’s copy that
and what about the pop-up do people
names so name
we need way here to resolve the name the
resolve function again here has the same
format but here remember here that right
now we it doesn’t get any arguments
because there are no arguments going on
here only arguments going on on this
level so here it just gets gets the name
but it has been passed has been passed
the data down from this so in this case
the first argument here is going to be
the actual XML that is being returned
from the fetch here so we are going to
do XML dot could reach the pons then we
see here like me close this request
under good reads response we have an
author so this is an author with a
property this then has these multiple
elements this is if you see that this is
since this is XML
author might have multiple elements so
we actually need to do at like this when
it’s converted to JSON it’s a bit funky
but that’s the way XML to JSON
conversion works and then there’s going
to be this named element and again name
might have might be multiple ones so we
are going to pick the first name field
and I think that’s it see if that worked
Wow let’s run that well lookie look
check this out
whoa author named Jasper Fforde we
haven’t let’s see like yes just for
funsies let’s check out another Walter
just see that everything works and but I
haven’t accidentally hard-coded
something in okay select check out
let’s see let’s paste that in oh hang on
I’m gonna paste it in here boom Nassim
Nicholas Taleb excellent ok let’s do the
same thing for books so we’re gonna add
a new field Oh books not surprisingly
this type is going to be a graph Q a
list o list and it’s going to be a list
of book type and that there we’re going
to define that book tag up here Const
book time so this is the same process as
author tightly new graph QL object type
because I feel like typing it in this
time and not copy pasting it and it’s
gonna have a name and description
but we’re gonna look just like the
author type is going to have fields
fields again it’s a function that
returns an object literal yeah but I
can’t type I can’t like what what is
happening to me I’m having a stroke
all right there and the field so let’s
have a look at what books looks like in
the XML mmm mmm yeah it has a title here
and it has an ISBN let’s be content with
defining those for the moment it’s not
QL string and we also have an ISBN which
well what is it is BN no and I’ve been
seems like it’s actually a string
because it sometimes begins with a zero
and that might be significant so let’s
let’s also call this graph QL graph QL
string mm-hmm let’s let’s run that and
see where we are at so that’s gonna
mm-hm something broke graph QL list is
not defined okay yeah I have not
required that it so where it’s a
graphical list grab the list I don’t
want to type it I don’t want to type it
where is it where is it there it is
and I’m gonna paste it in there it would
have been much faster to get started and
it breaks again let’s scroll up here
cannot call a class as a function that
is probably because I forgot new
somewhere
book time you probably in the graphic
yeah I’ve got new here you know served
yes okay and let’s run yeah but okay
find your words but can we access books
no cannot yet why not books field type
books of type book must have a selection
of subfield did you mean books okay fine
what if I say title books no okay fine
and again we’re in the same situation we
were before we have a schema in the
right place but the schema has no way of
knowing how to extract books from the
XML monster so let’s have a look at how
this fares there is an XML Wow under the
author there is a books element so let’s
make sure that the books element is
passed
– yeah we want this collection these
here we want these elements to be passed
to each each each book type as as a data
so let’s go to the author and the books
so I I think we can do this so I’m gonna
do this for solve solve and again
resolve is a function that receives the
XML route in this case and we want to we
don’t want to pass in the entire thing
we just want to pass in
the respective spec divided the stew
only the author was the books books this
is going to be this element and I’m a
bit unsure how to proceed
perhaps I think that this is going to be
an array of all the of all the book
elements okay let’s let’s see how this
plays out let’s see what what is being
passed let’s let’s create a resolve
function somewhere here let’s resolve
title for instance let’s for sold this
console.log this out
I am XML let’s see what happens because
I am so uncertain what happens all right
let’s run that and see what it’s being
passed to I am XML BAM expected iterable
but did not find one for field author
books shet didn’t get this far there’s
no console.log let’s scroll down a
little bit
hmm okay let’s extract this console dot
log hello – now I got books we’re gonna
call books that we’re gonna restart see
oh okay this is why it doesn’t work so
it this actually will look this logs out
a an object with a property book with an
array of what we want so XML to JSON
conversion is sometimes a little bit
mind-boggling because they don’t Mack
quite one-to-one but if I do this
I think it’s gonna be alright let’s
restart and see what happens if we get
further cool we get a little further
let’s see what again now we are at this
console log let’s resolve on the book
let’s see what we are finding here so I
am XML here and this is what it looks
so do you know what I’m gonna do this
trick Jason don’t string me fie
so now no – so that it writes out its
bit more because you see here it
collapses things and that just confuses
me so let’s get rid of that let’s try
ISP what ok ID here this is weird what
is this but okay at least we have titles
here cool that’s fine that’s good
and perhaps perhaps this is some kind of
books that he has written that doesn’t
have is piensan that is let me scroll up
a little bit and see yeah so for some
books they have a proper ISBN tagged but
some don’t
what that’s nasty okay but we can deal
with that
so will this work them XML dot name dot
what like that let’s see let’s restart
the server see if that cannot read
properties zero of undefined shite no
okay it’s but it’s not name books don’t
have a name books are like oh alright
restart restart restart yes cool title
the black swan fooled by randomness both
these books are supposedly very good I’m
trying to get through black swan workout
it’s good ok what if I just do the same
thing four four four four four eyes
beyond XML dude XML dot ASP and and zero
start the server books ISBN okay so we
don’t see a nice beyond here but again
I’m type eyes beyond the end we haven’t
requested it so let’s do that added that
here Shh and look at that we’re getting
the ice beyond look now we can
just request just the author with the
name if we want BAM
just get the name that’s nice aureus
books with just the ISP and that’s also
nice I think that this is now mission
accomplished
I’m going to commit this delete that and
then get status get add package lock
package JSON schema J else and serve J s
damnit JS on git commit and initial
commit it’s not really the initial
there you can now check that out
yourself you want to play around with
this however this is just scratching the
surface of what graph QL can do what I
would like to do next time is to show
you some all the lazy data fetching
capabilities of of graph QL next time
we’re going to pretend that our API our
Goodreads safe garden didn’t have this
because the author endpoint here
includes all of the books that an author
has which is a pretty weird API design
normally in rest api’s they are not
quite as aggressive in in including
stuff like this because the payload
becomes huge normally you have to first
request an author and then also request
the another endpoint the books endpoint
or something like that to get the
the books that this author owns so to
speak and this is something that you can
very easily do in in graph QL because
these resolve methods here they can
return promises and that is super super
powerful and flexible and really nice to
work with and that is what we’re going
to be looking at next episode you have
just watched an episode of fun fun
function I release this every Monday
morning Oh 800 GMT if you are watching
from the future you can watch next
week’s episode here right now if you are
not yet in the future you can check out
the patreon video while you wait
I am npj until next Monday morning stay curious