continue our graph QL journey a little
bit we are going to look at lazy
fetching which I’m it spelled to fetch
egg we are also going to talk about API
aggregation my notes game is not good
today what I mean by API aggregation is
the concept of having a bunch of
different API so in your back-end some
of your some are third party API and
combining them into one nice API that
your client can consume and that is
craft API aggregation lazy fetching and
API aggregation that is today’s episode
I am your host
npj and you are watching fun fun
okay so last week we built a graph QL
fronting that wrapped the Goodreads API
you can find it at mpj / graphic UL
Goodreads if you want to follow along
won’t check it out right now because I
have it checked out
it’s a very simple app it’s just this
very minimalistic Express app and this
this schema here the schema fog which is
basically all of the logic it fetches
this Goodreads endpoint with this whole
code API key that I have to create a new
one now since I evicted that after the
last episode and also it refines these
types which does the the resolving
itself like pointing which XML node maps
to what graphic you’ll note it’s a very
standard graph QL example you can check
out the entire process of how we created
it by clicking there last week’s episode
alright so I promise you that we were
gonna talk about Lacey Lacey fetching
and let’s have a look at the the the
data that we’re getting from Goodreads
at the moment let me increase the font
size have they changed the hotkeys they
have changed the hotkeys this makes
things trickier for me okay ah zoom in
zoom in keep zooming in zooming more
okay thanks ah and now I have to
reposition the window oh my god this is
very exciting entertainment for you very
good
okay so if we scroll down here we see
here that we are accessing this end
point here we are showing an author that
is what we’re querying for and let’s
have a look at what this the data that
we are getting from this endpoint
actually looks like so this is the the
author s endpoint result has a name here
good Tim O’Reilly and it has an ID and
it has some images and stuff you know
the things that you would expect where
the author was born and stuff like that
and he was born in Cork anywho what what
I want to draw your attention to is that
this end point also includes books it
also includes all the author’s books and
it’s not just their IDs or anything it’s
just their complete books all of them
and this is not an incorrect design
decision per se but it is a peculiar one
because it means that you are fetching a
load of data every time you request an
author and normally I would say that
most api’s don’t do this they would
instead give you the author and then a
couple of ID’s or like minimal data for
each book so you normally you would have
to a synchronous Li fetch every book so
we are going to pretend that the
Goodreads API didn’t have these books
we’re going to pretend that we are were
only getting these IDs because that is
that is a common scenario in when
dealing with the REST API and we’re
going to lazily fetch these these books
it’s these extra books if the data
requires it if the if our query requires
us to do so if we if we need the books
if you have a request to the books and
will fetch graph Jian will fetch the
books otherwise we won’t fetch the books
ladies if every time
I think I did it
let’s let let me walk you through this
code that I created all right so if you
look here in the left hand corner you
see where they get the different the
editions of my code are so here in the
resolve method resolve function of the
books field I’ve changed this to to
start fetching stuff instead in the
author type so we now have an inner
fetch here just like we have this this
outer fetch here that fetches the the
author in the the query and the bigquery
schema so we have a nested nested fetch
here and what what this will do is that
first it will grab whatever it has from
its parent XML data here and it will
extract out the ID or the IDs actually
so this is such a disgusting syntax but
again this graph kill is often about
wrapping imperfect API so wanted a nasty
API so you also use source of fiddling
around there
from my part and just to remind you
about what the what the results looked
like let me bow go back to the author’s
endpoint actually authors show and have
a look at this here where are the books
so get this array of of book elements
here and then we want to extract this ID
here and do to some thing with the XML
parser library that I use I have to do
this it’s it’s it’s not important to
this particular episode of graph QL this
is just how
the whatever it’s called XML to JSON and
live with that anyway we extract an
array of IDs and for every ID we do a
fetch and we do the whole dance again
such extract the text and then parse the
XML of that and then we return that to
promise dot all so this map here it will
return an array of promises and promise
that all will return a single promise
that resolves when all those promises
are resolved and that will then
eventually be passed into each book type
so before book type got like this law it
got this element here from the from the
author’s endpoint but now we have
changed it so that we are actually
fetching from the books endpoint an on
book show and we’re fetching the book
and that means that it has a Goodreads
response a request and now the book
object is here so we have to change that
a little bit by adding this thing here
and also extracting the book here
earlier I think it was just this yeah
right but now it’s this and all this is
happening lazily so let me show you I’m
at a console log here in the yes before
the fetch and see if we like it fat
Shang books and we start the node server
and go back to the graphic ul and I’m
going to play now and it should say
fetching books in the the console log
but if I remove books here sorry
play it will actually not show any
fetching books no let me bring back
books play you’ll see fetching books so
it only does this request if you have
actually requested it in in the graphic
you are query and this is all automated
for you this is handled by the graph QL
tooling which is very nice I think one
thing that is a little bit annoying that
I found a little bit annoying with this
tooling you you probably noticed that if
you paid attention during my speed
coding there that I had a lot of had
some debugging to do and that is because
the grad cure this tool in here swallows
errors and does not give you good
debugging information which is a very
very bad combination nasty
let me demonstrate how that worked let
me just on introducing an error here and
restarting the server and run the query
again and see like I get cannot read
properties zero undefined okay where is
that error I because it has swollen
Meyer here it doesn’t doesn’t crash or
anything it says on line five :
seven perhaps I guess that it refers to
the the graph QL query instead like this
slide yeah probably
okay so it doesn’t it gives a code error
but it refers to an error like a line in
the graph QL so that threw me for like
that confused me a bit because this is
line 19 and this ah okay so okay then I
can figure out that okay it’s recording
the title because it’s online long five
then I can see that okay I probably made
a mistake in this this resolver here
okay fine I can fix that and we started
alright but honestly I don’t like this
error swallowing hopefully there is a
way to turn that off
maybe that’s the setting in the
expressed graph QL library or something
I don’t know if you if you know please
comment down below but other than that I
think that the developer
experience of this thing is magnificent
it’s so easy to work with pretty much
all of my fiddling around was related to
its commit that and then we’re going to
take little break as you might know this
show fun fun function is sponsored by
Circle C I I’m really happy that I’m
able to have a sponsor like Circle C I
they are really nice people that I’ve
met in real life they have a really
solid good product that I use myself and
I that I feel really good about
recommending to you
Circle CI provides continuous
integration as a service if you’re
interested in what continuous
integration is what it’s good for and
how to get started you should check out
the video I made on that here you don’t
have to do it now I will remind you
again at the end of this episode alright
let’s continue I talked a little bit
before I promise you that we were gonna
do some API aggregation and then why do
I want to demonstrate this is by welding
in the Google Translate API here to give
us badly translated book titles so the
way I want to do this is that I want to
be able to specify language Portuguese
here or maybe like Oh like that that’s
the way and I want to get this title
translated into badly bad Portuguese all
right I’m going to attempt this now
let’s walk through what I did so the
thing is I the first thing I did was I
went to YouTube Google my own monad
tutorial and I grabbed some code to
translate translate strings using the
Google Translate API so this is how it
works you just have an API key you can
get so by going there and fiddling
around like hell because Google Cloud is
extremely annoying when you have many
projects and stuff hopefully you won’t
have this problem unless you have a lot
of Google Cloud projects but then you
know how to fiddle with them huh anyway
once you have your API key you go and
create this url’ to do the request which
is Google API slang or translate a
presenting an API key the language which
we specify is an argument here and then
we URI encode a string and then we just
fetch that and parse out the translated
text from the response all right so
that’s the translate function let’s jump
down back to the new resolve function
that we have defined in the book type
schema what about it here is that before
we just had the XML thing but now I’ve
added arcs here so what is ours where
does that come from let’s have a look at
the query oryx is now this it’s this
thing here so we can now have the
arguments lying here and we’re passing
in Portuguese and this will be
accessible to us here so we check if
there is a language and if so we call
the translate function we have the
language and the title that we have
extracted here just this is exactly the
same thing as before and if we have no
no language we just fall back to the
title so you see here that we can either
return something that is I guess a
synchronous title or we can return a
promise that
like Google transmitted translating will
yield a promise so this is really really
flexible so again let me just walk you
go back to the query and change this to
Swedish
let’s say play see what we get
oh that’s that’s actually not as bad of
translation as I as I thought I was okay
this is weird
all right fair enough Oh yep yep yep
cool yeah that works let’s try German
how do you set de – maths is fine yeah
all right cool
that works and of course if I just do
English here this will actually not look
hang on now sorry we can’t do English no
what does that work oh yeah because I
can’t just do a and I guess I guess I
have to do English e’en us or something
is it like that does that work no I have
no idea that doesn’t matter
but that what I wanted to demonstrate is
that if I just use title this thing it
won’t actually it won’t actually execute
it won’t actually go away and do
translations so again it’s it’s lazy and
we it’s mangling together api’s you know
pretty cool way I think and that is it
for today we have looked at Lisa
fetching using graph QL and we did it a
little bit in the context of a API
aggregation where we mangle together the
Goodreads API and the Google Translate
API in a way that it was pretty cool if
I may say so myself you have just
watched an episode of fun fun function I
release this every Monday morning Oh
800 GMT but if you are watching from the
future you don’t have to wait until next
Monday morning you can check out next
week’s episode immediately by clicking
here and again thank you Circle CI for
sponsoring this show continuous
integration is so important and it’s
much easier to get started with than you
think
check out the continuous integration
playlist here I am mpj until next Monday
morning stay tuned [Music]