More GraphQL - Fun Fun Function

💖 Survey: Please tell me your opinion on this episode
funfunfunction...
💖 Support the show by becoming a Patreon
/ funfunfunction
We're continuing our GraphQL journey, looking at lazy fetching and API aggregation.
🔗 Episode: Continuous Integration - What's the point?
goo.gl/o59jdR
🔗 Discussion topic for this episode on Fun Fun Forum
www.funfunforu...
🔗 Code from episode
github.com/mpj...
🔗 Why become a patron?
/ funfunfunction
🔗 mpj on Twitter
/ mpjme
🔗 Help translate the show to your language
www.youtube.com...

[@theophile_]

Super format! You really have found a good pace for the video. The length is also very covenient! BTW, I love the way you have edited this video, it helps to keep the long boring parts under the hood and focus on explaining.

[@ConnorElsea]

Awesome video. Crazy that the resolver promise could basically be anything. Read from file, link into other APIs, or even set up some sort of caching system where it is memoized

[@vikai_fang]

Hey mpj, very nice video!! Since I found you here, Monday mornings are just about fun and exciting learning, and not painful and boring (at job) anymore :) Thank you very much for your efforts! To your list of topics to talk in your episodes, you could add the "Service workers - why and how" :)

[@JamesIsbellUK]

Could you look at authentication, authorisation and validation in graphql please :)

[@nikolasburk]

Hmm not sure I agree Kevin Velasco! At Graphcool, we solved Authorization with GraphQL using a new concept which we call "permission queries" (www.graph.cool/blog/2017-04-25-graphql-permission-queries-oolooch8oh). These let you specify your permission rules in a declarative way - using the familiar syntax of GraphQL queries.

[@JamesIsbellUK]

Cheers for the comment @Kevin Velasco. Don't you mean authentication here though? REPLY

[@JamesIsbellUK]

@Nikolas Burk, interesting concept! I like the idea, not sure if i get it fully yet but hopefully it'll lead me on the right track. Cheers!

[@JamesIsbellUK]

This is interesting: github.com/thebigredgeek/apollo-resolvers.

[@Codacho]

this was a nice trip down memory lane, before the studio.. oh... the good ol days

[@user-ur1vm5hw1x]

Great series! If you want a "cleaner" parsing from XML you could add {trim: true, ignoreAttrs : true} as a second parameter to parseXML, then the underline at 7:15 won't be neccecary :)

[@abadacadaba]

Hi mpj, awesome video! A suggestion: you can use nodemon for re-execute your node app whenever you make a change in the codebase.

[@wixnarara]

He knows, just didnt bother

[@d1337]

On the error handling the "path" member seemed to point to your "resolver" mapping in the GraphQLType for the book's title.

[@MaxDavydov-r2k]

@mpj do more videos of GraphQL! A series perhaps?

[@aleksandrkazakov3104]

Hi mpj! You should look at graphql-tools module.

[@greyapplebr]

Yeah, it's easer. The link www.howtographql.com/graphql-js/1-getting-started/ teaches how to use it

[@rogerbosman2126]

So what about when just loading book id's? Now we fetch the entire book to just show the id, but we have that information already (so unnecessary gets are performed)

[@TO-cw9fy]

Hey MPJ, are you a fellow DayKnight? Saw the Day[9] pop up on your youtube recommended stuff videos, warms my heart to see another developer/knight : )

[@funfunfunction]

+William Oliver yes! Huge fan.

[@davey_edwards]

that was awesome hooking in with Google Cloud text api, way easier then I thought

[@JamesGaehring]

Regarding error swallowing, express-graphql does allow you to pass an errorFormat option when you instantiate it, but it looks like that just reformats the message in GraphiQL, rather than logging something to the console, which would seem more ideal. github.com/graphql/express-graphql#debugging-tips

[@sebastianwei542]

Thanks for your show! Need to find time to go throw in detail

[@rodrigososa5281]

The only thing I can't still understanding is how am I able to send data over graphql...

[@kjsam]

Hi, may I know what the song name is starting at 14:30? It's been stuck on my mind for a few days now!

[@Schlumpfpirat]

What about basic authentication / OAuth against endpoints? Especially given multiple endpoints require various different authentications

[@soullesswaffle]

Great video! Do you know if there's a way to avoid the extra call to the book endpoint if the query only requests the book IDs?

[@testuser429]

The more I look on GraphQL, the more it looks like OData. Can someone explain the difference between those two?

[@funfunfunction]

They largely have the same goals. I had literally never heard of Odata, it seems to be an older, Microsoft-driven standard that haven't taken off that much outside of heavy enterprises - the names they cite are SAP, Salesforce etc. GraphQL also seems to be a simpler product, while OData is quite elaborate, with versioning, aggregation, filtering and ordering capabilities.

[@funfunfunction]

I found this pretty helpful: www.progress.com/blogs/rest-api-industry-debate-odata-vs-graphql-vs-ords

[@funfunfunction]

One thing the article doesn't mention is that GraphQL is transfer-agnostic. I.e. while it can, and often is, transferred over HTTP, it can be used over any transfer mechanism, sockets etc.

[@testuser429]

Thank you very much for your answer.

[@nikolasburk]

Here is an awesome talk from GraphQL Europe that gives some historic context around GraphQL and compares it to other API technologies (like OData or Falcor): kzbin.info/www/bejne/maC4Z4KjfriCeK8 Might have some helpful insights for you :)

[@murilolobato]

this intro is gorgeous

[@locodev770]

Hey, what do you think about real time databases like firebase or rethink? and could you give me some advice about how to manage "on" and "off" listeners? eg. having a queue with all listeners and turn off all if user logout...

[@MattSidor]

Since the original API request for author (goodreads.com/author/show.xml) already includes the author's books in the XML response, what is the advantage to creating separate API requests for just the books? Won't this just make it slower, since now we have to wait for the additional, redundant API calls to each book?

[@funfunfunction]

As I say in the video, you need a bit of imagination and envision a situation where that data did not exist.

[@MattSidor]

Thanks! Sorry I missed that.

[@brianmanden]

Just a tip: Instead of restarting server you can use Nodemon :) More here: nodemon.io/

[@ArturoBlancoGarcia]

Does anyone knows the name of the screen recording software that MPJ uses?. I only recognize VSCode, Tower2 git client, Mouseposé, QuickTime, SketchApp...

[@funfunfunction]

See the behind the scenes episode

[@ArturoBlancoGarcia]

Yes, thank you MPJ!!!!, I saw it a couple hours after this video, and I got my answer there (I'm still catching up with your old content); it would be convenient that you update that video description with the specs of your new mic and the new EOS 80D camera (I think thats the model) that your are currently using. I love your shows!. I'm a rookie dev, I started programing this year, and I've already published my two first ionic apps (apple.co/2yCZwXe ) and your shows has been of huge help for me. Would you mind if I make an spanish version of some of them ...????? Cheers Matt.

[@funfunfunction]

Hi Arturo! My setup has changed slightly from the behind the scenes episode, but not in any meaningful way.

[@InfinityCounter]

This was a really good episode.

[@deshiknaves]

What’s the vscode plugin that you’re using that shows the gizipped size of a module?

[@dpointeck]

Import Cost is the plugin you're looking for

[@deshiknaves]

Daniel Pointecker awesome. Thanks 🙂

[@34tttttaa]

Careful with that one! It's quite cool but was eating all my CPU & killing battery life. :o

[@lols1503]

I'm wondering why you need GraphQL at all ? You couldn't do the same just with vanilla ? Without all those wrapping classes? Maybe I'm missing something, but I didn't understand the "big deal" behind all of this

[@the_crius]

I'm not sure what you're referring to with "vanilla". If you're talking about REST APIs the main difference is that a REST endpoint will always return a fixed response even if you need just a tiny bit of that information while a GraphQL can be "queried" specifying what exactly you need. For a very basic example think about mobile. Mobile traffic is constantly raising compared to the non-mobile and having lean response from a service is going to greatly improve the performance perception of the user experience. Or again, think about services that performs a huge amount of operations in bulks. Having smaller responses will speed things up considerably with big enough numbers. KZbin API (while I don't think implements graphQL) allow you to specify which fields you require from an endpoint response for example and with the scripts I'm working on that works on several thousands of channels at once, it's quite an improvement compared to getting the whole result object.

[@JamieHicks154]

Any plans to do React and GraphQL?

[@Misantronic]

great video! i actually hoped that you try german as translation. i'm glad my telekinesis worked!

[@muxahuk1214]

The only thing that is not clear - how do i make this calls from front-end (real app) for ex. react application..

[@mnlttt]

Михаил Семёнов you need a client for that, for instance an implementation that works in Angular would be a client called Apollo

[@nikolasburk]

You don't _necessarily_ need to use a GraphQL client (like Relay or Apollo), but potentially also simply access your GraphQL API using plain HTTP (e.g. using curl in the terminal or Javascript's fetch). However, when building a real app you most likely want to use a GraphQL client since it makes life so much easier for you! If you want to learn more about GraphQL clients, check out the corresponding How to GraphQL article: www.howtographql.com/advanced/0-clients/ And for a practical introduction, there are a bunch of frontend tutorials on the site a s well that teach you how to get started with Apollo and Relay :)

[@sebastianwei542]

How to implement it on my Webapp? What do you think about apollodata.com for graphql?

[@DavitBarbakadze]

You need to write GraphQL middle-point for Google Translate :)

[@slim_mike]

pleeease! pleease! do an episode about authentication using graphql!

[@stef2go]

I love you! What is the Song at Minute 5 and what at Minute 15?

[@Silentfrost86]

Bouncy by Swag House Mafia @ 15

[@nLamprok]

Amazing style, especially for developers. Keep it up mpj! (a fellow patreon)

[@lukaszelenka9777]

what is the song starting at 5:10?

[@PhillipSenn]

There are more beginning users than there are advanced users. More people need to know the fundamentals than advanced libraries.

[@the_crius]

There are tons of videos in this channel that even if a little old are still relevant to the basics. Try to check them out.

[@Siddharthpandey27]

Can you take session on call bind and apply

[@funfunfunction]

I've done one on bind, and honestly call and apply are ultra trivial to understand if you understand bind.

[@Siddharthpandey27]

I have checked your bind episode. I was talking about the magics when you combine all 3 of them

[@funfunfunction]

I'm not sure what you mean, to be honest.

[@Siddharthpandey27]

Cool no prob

[@PhillipSenn]

You don't have to teach something that you are trying to learn yourself. You can teach things that are "ultra trivial".

[@Techonsapevole]

Apollo GraphQL now :D

[@BeheadedKamikaze]

For the love of all that is good, please(!) add encodeURIComponent around the lang parameter in translate(), otherwise you are just inviting people to do parameter injection attacks on your API!

[@BeheadedKamikaze]

Yes that is the time and you are correct, str is encoded. But lang is not, and lang is another parameter that comes from the user's query and so must not be trusted.

[@BeheadedKamikaze]

comet3bc13 No, not really "no problem".. for example you could set the lang param to something like "&transferAmount=1000000&toAccount=12345678" and then that would send those parameters to the other API and it would trust them as if your program had issued them (it can't tell the difference). This is why you must always encode user input. Granted, in this example there's not really much you can do with the Translate API but in general it could be quite dangerous.

[@BeheadedKamikaze]

comet3bc13 No it won't do anything for XSS. But it will allow an attacker to potentially modify your application's request to another API by injecting parameters into the request. Because the URL for the API is just a string, if you were to pass such a value to lang then you could cause the query endpoint to issue commands to other APIs such as hxxps://www.googleapis.com/language/translate/v2?key=whatever&source=en&target=pr&transfer=1000&toAccount=12345678&q=hello ... instead of properly encoding it as... hxxps://www.googleapis.com/language/translate/v2?key=whatever&source=en&target=pr%26transfer%3D1000%26toAccount%3D12345678&q=hello With the proper encoding the other API will just say "invalid format for parameter target" instead of treating them as real parameters and doing something you didn't expect to do. Remember that decoding is done AFTER splitting the query string on &, so you need to make sure those characters are encoded in order to keep them contained within the parameter that you intended.

[@jasoncroos3429]

pls do node,express,react js

[@saarlevy9891]

What does that mean? Do you want him to invent those libraries?

[@funfunfunction]

What exactly is it that you are missing in the material that is already out there? It seems to me that all those subject are covered super well.

[@shaneunger]

Personally I'd like to hear your thoughts on some of the choices React has made, specifically in its championing of es6 classes. One of the engineers from Netflix said their move to the class syntax was premature, and caused some headaches (medium.com/dailyjs/we-jumped-the-gun-moving-react-components-to-es2015-class-syntax-2b2bb6f35cb3). I've heard similar things, especially that es6 classes are Satan's doorway into our souls. I'd love to hear your thoughts. Thanks!

[@rohovdmytro]

Cool :)

[@slim_mike]

wut? you are a swede? that was unspected!

[@zdddddd]

please record minecraft videos. I love minecraft!

[@CoryTheSimmons]

This tbh.