GraphQL Basics - Fun Fun Function

[@remiesmith7027]

You don't always have the video I'm looking for, but when you do I always choose yours. This is just the best format and delivery, and the editing is perfect. Yours are basically the only programming related videos I've found that don't drag. Great work!

[@uglypie182]

For anyone wondering, the characters $ and _ from xml2js are for xml attributes and text

[@MapMavericks]

Dude, your hair is the best.

[@MuzicFreakNumberOne]

...and his intro is also the best :)

[@technicaldifficultysupport]

Disagree. The shirt is the best.

[@Vikingofriz]

btw since npm 5 "-- save" is used by default, so you can just use "npm i" (or install)

[@aqibos]

Lit! 🔥

[@funfunfunction]

+Mukhammad Osmanov omg!!

[@eugenebashmakov]

And "npm init -y" (stands for "yes") for the fast package.json initialization

[@rothbardfreedom]

Or just use Yarn.

[@adrianolsk]

npm install npm@latest -g

[@sherweb2358]

i followed your video and implementing the graphql with lots of pauses and rewinds. Now I have a better understanding of GraphQL, please make more code along videos like this. Thank you very much!

[@Stevenchustudio]

6:10 Great explanation! ☑️ There is no query language built into REST. It’s just we request this “author” and here you get everything. There’s no contract built into REST- so you’ll have to build it from scratch and every API will build theirs differently - so it will not be automatically transferable

[@robheyes6470]

That was fun to watch, I started working with GraphQL about 2 months ago, but using PHP on the backend. I'm convinced it's the way to go. I'll be watching episode 2 tomorrow. And obviously I've subscribed. :) I'm convinced that Heisenberg comes into play when it comes to typing on a keyboard. The more it's observed the worse it gets.

[@funfunfunction]

Hahaha heisenberg keyboard, I love that!

[@AndyJarrell]

OK, so your hilarious opener is the first one of these tutorial videos I didn't jump over. That was hilarious! Really enjoyed this!

[@alanboglioli]

It would not be a good Monday without a funfunfunction video. mpj is making development fun again.

[@chrisjarvis509]

Your teaching style is great! Humanising code and showing your learnings.

[@kylehall8760]

Your intro is fantastic! I love that you added it because it is perfect for this show.

[@danielsdvj7255]

I just can't stop watching this video, even though I supposed to go home because it's an evening and I'm still on the work=)

[@JiovanMelendez]

Thanks for taking the time to create this, Mattias!

[@aneesijaz]

you are not MPJ. you are AMAZING.

[@IAMZERG]

That was hilarious. I've had those days where my fingers decided to go on vacation without me.

[@idmt93]

When I saw you creating GQL repos on Github I knew you were working on a juicy new video! So happy to see this

[@FlyingOctopusKite]

Thanks for this, have been meaning to look into graphQL for a while. Been watching your channel for a while now and and exited that you have quit your job to do even more awesome on it.

[@koftunka]

Great work MPJ! Quick note on git, if you'd like to stage all changed files you can just type 'git add .' Saves a lot of time since nobody likes to type :)

[@brisketbaron]

Once again you provide me with something I didn't know I needed on the same day I needed it. -` )

[@parikshit804]

perhaps the best dressed tech youtuber. love your jacket, bro for what i can see.

[@j3bb9z]

Finally, we're getting into some more advanced topics! Looking forward for next parts :)

[@unknowna1535]

Can you start a video series where you work on a project progressively, showing us functional concepts and different technologies commonly used within the industry, be it for mobile app development or web application development.. and reason about the decisions you make during the process and why you did it ect. I feel like tutorials, especially programming tutorials abstract the complexity out of everything and only explain the arbitrarily simple concepts to explain so that the video is subsequently easier to create. The downside to this, is that the quality of the content is impacted and its real life implications and use cases are narrowed. I'd like to see videos from a person thats worked in the industry design,test,create and develop a large scale application. Not some shitty app that they cut hundreds of corners with :D

[@funfunfunction]

A lot of people ask this but I'm not confident that it would hold peoples attention. The time it takes to build a project is on the scale of the full series of LOST, and there is a large amount of time that just doesn't lend itself well to watching. It would be an interesting thing to do for a live stream, might be an interesting idea to try.

[@eisenivan]

My first dive into GraphQL was a few weeks ago as I was playing around with a Gatsby site. I didn't like it at first, for some reason, but I'm now coming around.

[@danvilela]

3 years later it didnt replace rest.. But some companies adopted it which is cool. I found too hard to learn apollo to replace rest.. But the tech is awesome!

[@dziwic]

Just watching the intro alone made me adamant that I want to do what you are doing - but in polish. And since you did a video just about that some time ago (behind the scenes one) I feel blessed now. Look what you have done. Are you happy? :P

[@funfunfunction]

i am!

[@mariaseattle]

ctrl-shift-P --> 'Preferences Open Keyboard Shortcuts' --> 'toggleTerminal' --> then can define shortcut to toggle terminal

[@3ombieautopilot]

Around 13:00 you probably tried to remember that plugins/extensions are called middleware in node.js

[@gustavlrsn]

Great intro to GraphQL!

[@erikisidore8366]

Best intro I've seen so far on youtube.

[@modolief]

OMG, so awesome. Great, fast, no-nonsense, love it!

[@tigranpetrossian9848]

Hey mpj, any reason to prefer these graphql-js constructors over native schema syntax with buildSchema? The former seems way more verbose, and I’m wondering what the benefits are.

[@Spouken]

Thanks for sharing! Currently working on a proj and this helps a lot!!!

[@TerenceKearns]

You're brave to do live coding like this. I love it. You need to apply xpath queries to the parsed xml before turning into json object. You will then be the all mighty god of scheme conversions between xml and graphql :)

[@BeNbO295]

What perfect timing, just about start learning this for a project! Thanks :D

[@Yahyazini]

Can't wait for the next episode. Thanks MPJ!

[@absarahmad8455]

Amazing Sir ..... Your way of teaching is so good and funny too !!!!!!!

[@immerification]

Good episode, what about alternatives and particular advantages of graphql among similar solutions? I haven't used graghql yet, but seems it has similar concepts as in OData.

[@CoryTheSimmons]

Thanks for the tutorial! Would love to see a GraphQL one where you cover replacing traditional table relationships with a graph db and GraphQL. :D

[@NarleyBrittes]

Really nice intro to graphql. Thank you!

[@davejs]

I was literally gonna tweet you asking for something about GraphQL! You read my mind :D

[@cramhead]

This guys is a good replacement for coffee!

[@marvinfrachet7607]

What you are doing at ~13 is to set a graphqlHTTP middleware on each request that will reach /graphql endpoint :) . To answer the question at the same moment of the video :D

[@MaxDavydov-r2k]

You don't have to add --save when installing packages with npm >= 5.0. It adds package as a dep by default.

[@yasaamoin4882]

Can anyone provide a good example demonstrating what the following line from MDN's JavaScript Reference says: " Changes to the Object prototype object are seen by all objects through prototype chaining, unless the properties and methods subject to those changes are overridden further along the prototype chain. This provides a very powerful although potentially dangerous mechanism to override or extend object behavior." I sort of get it,but an example displaying how "the properties and methods subject to the changes" can be overriden "further along the prototype chain",would be a tremendous help

[@sebastianwei542]

In addition I learned more about JSON.stringify(). Didn't know that you can prevent the collapsing. Thanks!

[@Dani256mc]

Nicely explained : ) Also, garlic might help with the burps.

[@BertoldSzekeres]

I'm from the future and can confirm, by 2028 REST is mostly replaced by GraphQL. But by 2040 the communication between servers and clients will change drastically and will no longer rely on http protocol.

[@NorthAfricaWP7Channe]

I am happy that you are using the best editor finally ^^

[@iam13islucky]

He's been using it for a long time.

[@joelh6589]

I absolutely loved the intro.

[@ArashMotamedi]

Excellent videos MPJ! Thanks!

[@funfunfunction]

thanks!

[@Defrost2157]

Thank you for being alive!

[@damiangilz]

26:18 "Found... what the hell does this mean!" Cracked me up!

[@mrhappy192]

I like GraphQL, but a lot of what you're doing here seems to be boilerplate. All the types and fields are already defined in the XML and you're just redefining them in GraphQL. Is there a tool that does this automatically?

[@emanuel_larini]

May you put your microphone a little bit far from your keyboard? Although it is cool to know when you type, this kind of noise breaks my concentration :( Thank you so much for your time making those videos!!

[@koHgpat]

Thank you for sharing. Pretty good introduction to GraphQL IMO.

[@JamesIsbellUK]

Can someone please please tell me how authorization, permissions and user roles are supposed to work within GraphQL? Placing these 'middleware' checks in the resolve functions seems brittle and repetitive but I can't work out a better way of doing it. Cheers

[@PMcMonty]

People might want to take a look at Apollo's graphql server, which I find simplifies a lot of this boilerplate.

[@pestbarn]

Why aren't you using something like git add --all, or git commit -am "msg", instead of typing out each file to commit?

[@sebastianwei542]

Looking forward for next episode!

[@wixnarara]

Well I came out of this video learning two awesome things, quokka and graphQL Thanks! btw nice VueJS hair

[@raulsonico]

love you! greattings from Argentina! your work it's amazing!!

[@kiteaUtube]

I like your passion for coding!!!!

[@SacrificialGoat94]

Thanks Bro. Very useful video.

[@MlleNorah]

can someone explain to me why is he saying Rest is not handling query specification ? I'm confused , like it's perfectly possible ta have very specific queries with mysql or so , am I missing the point ?

[@anshulsanghi8161]

Hi MPJ, what's that plugin that shows the size of a package gzipped? Sorry if this is something obvious or feature of VSCode, I am not familiar with VSCode. Also, why don't you use nodemon?

[@alvarobelusi]

I love this channel. Thanks you buddy!

[@saysthetedd]

Hair looking mighty dope there, MPJ

[@alexongg]

Nice bro. Quick question, my quokka doesn't give me some of the stuff it gives you. For example, the kb of an npm package. Is this because you have the paid version?

[@nderezic]

Maybe lowering the blood caffeine content would result in increase in typing accuracy ;)

[@Alfakatt]

ratio, ratio is the word you're looking for.

[@tomaszzebrakowski28]

similar also happens when you try to look and copy code from one to another screen quickly

[@SanderBruggeman]

In what way is this replacing REST? In the video you didn't make any requests to a server to get just part of the data, but you just fetched it all and then parsed it with the GraphQL tool, right? I'm really interested in seeing how, for instance, I could implement a GraphQL API on my own server so third party clients can request only the information they need. Then I can see it replacing REST in the long run. Is this possible?

[@funfunfunction]

The video literally shows you exactly what you ask. I did plenty of requests where I just requested parts of the data. Whenever I omit a field, that field is also omitted from the data payload. With GraphQL, only what you request is sent over the wire - that's the very point of GraphQL. I'm sorry that I did not make this clear.

[@darkthrongrising5470]

Dude, I really like your vids and the effort you put in to make them interesting. Was wondering if you mess with NodeJS or the MEAN stack in general, I would like to see you apply some of the techniques you teach in real world scenario, Ive found that this stuff is easier to understand when one can see how its used(not this video, this one is good, Im speaking about your other vids where you teach promises, async etc..). Thanx ahead of time. PS. I would like to see you build an API with Node and Mongo if you can, if not, no big deal but would be really nice of you. Maybe you dont use these technologies and I understand that but if you were too indulge me you will have had made my world a little better place.

[@maximemoreau711]

Hi, great work thanks! But please, consider using Nodemon or something to reduce distraction...

[@welldudethatsjustme]

dear mpj, can you please tell me what is that fancy flashlight thing what you are using to read and present small pieces of code

[@funfunfunction]

Mousepose

[@hishammubarak3421]

I am so glad I'm not the only one who's testing with 'console.log("Hello 2")' 😂

[@dikatlon]

Exactly my use case of GraphQL. But I wrote it with .NET instead. Getting the fields and subfields instead of a big chunk of Xml is so nice

[@laurelineparis5407]

Hello, nice video, good to have your opinion on it :) I was wondering what was your visual studio code setting that shows you inline the error with those checkbox-like on the left?

[@rayrack5416]

Ctrl+` to toggle terminal.

[@LunfardoAR]

am I the only who feels this shortcut is kinda buggy? half of the time just dont work for me in either windows or linux. For now, I just ctrl+shift+y (debug console) and click on the terminal tab

[@guybeau1]

writing 'tit' is more fun hihi

[@zerosandones701]

@@LunfardoAR If the terminal is open and your cursor is active in your editor, the first keypress will switch to it, so you'd have to press it twice to close it. Check out "workbench.action.togglePanel" if you want to close it in one keypress

[@cozzbie]

VSCode was why I kept watching.

[@kaihendry]

Too much plumbing. Why can't there be an automatic mapping of XML to the GraphQL API?

[@funfunfunction]

Plumbing is often preferable to auto-generated but annoying API. You could probably create an automated matting, but it would be infinitely annoying to query because, as the video very clearly shows, the formats don't convert very well naturally.

[@KaranBhansali08]

{ "errors": [ { "message": "Non-whitespace before first tag. Line: 0 Column: 1 Char: I", "locations": [ { "line": 2, "column": 3 } ], "path": [ "author" ] } ], "data": { "author": null } } Which file should i change in order to get rid of the error?

[@mattkeehan]

Hi, I had this, you need to replace the key (on lines 12 and 17 of serve.js) with a new one from Goodreads (www.goodreads.com/api/keys)

[@rfcctba]

Nice tuto..perfect for my current project... How can we scrap this data and keep the JSON at our server in case it goes down or the schema changes?

[@fcandann]

Hi, can we fetch sorted data with graphql?

[@trabpukcip1177]

* Drinks the "coffee" You're my hero :D

[@AdamTuttle]

I'm pretty sure that GraphiQL is pronounced "Graphical". Great intro, thanks! Looking forward to part two.

[@piiner4815]

1:30 for anyone wanting to know how he pronounced it

[@TheOlian04]

Adam Tuttle he tends to over-pronounce words, I think he does it to catch the viewers attention :)

[@mwinterz2010]

No Q L "Query Language

[@davidhernandeze]

Hi i wonder if is a good idea to use graphql in a noSQL database

[@gabrieldutra4323]

Very cool! thank's to this introduction

[@alvaro.makes.music1]

Anyone knows why does GraphiQL return that ""String cannot represent value: { $: { nil: \"true\" } }" error at the beginning of the results panel on the right? I think it has something to do with the fact that some books don't have an isbn as MPJ says at some point in the video. In case it's so... does anyone know what "should be done" to solve it? (e.g. checking if the isbn is undefined and depending on that, returning a particular value)

[@Obzenner]

What's that awesome extension that shows the gzip size?

[@fredhair]

Cat opening a squeaky door: 10:11

[@Manifibell]

First time seeing that intro. Great job xD

[@kesuskim6072]

Wow graphql with MPJ finally :)

[@MrJasBones]

BTW, quokka is now a package for atom too! :)

[@pestbarn]

Jason Smythe Finally!

[@AdamTuttle]

Is it Monday yet? I'm really excited for the next video!

[@TheRob3311]

Hi Mattias P Johansson, Thank you very much for the great work and all your hard-work. If I open the same code in JetBrain-WebStorm it shows errors in the code, though it runs fine from terminal. Would you mind to show direction to fix these compilation errors? Just a hint to look up configuration or something?

[@funfunfunction]

No idea why you have those errors, sorry. Unfortunately, I'm not all-knowing. :)

[@TheRob3311]

Fun Fun Function, I really appreciate that you took time and efforts to reply. As a simple solution, I switched to visual studio Code.

[@DebmallyaBhattacharya]

Your tutorials are awesome dude. But could you edit out the typos? That'd help us focus more.

[@funfunfunction]

Nope!

[@amypellegrini1732]

Awesome! thanks for this video. Would you think that "proxy" perhaps would be a better word than "replacement" regarding REST APIs?

[@funfunfunction]

No, it doesn't have to have be a proxy for REST apis. It could work perfectly as a replacement.

[@AngusMcIntyre]

The typo game is STRONG ! Must have been one hell of a night on Saturday :D

[@funfunfunction]

+Angus McIntyre my typo game is always amazing

[@phantblake7718]

Could someone please clarify this for me, is the full api from Goodreads still downloaded by this server and then graphQL 'filters' out the data needed by the query? Is this any different to the front end getting the full dataset from the API and then filtering out what they need and the rest getting garbage collected? Is this middle step somehow faster for the client? or am I missing something?

[@SanderBruggeman]

You're right. I could see that it can result in cleaner code (with nice schemas in separate files) and it's maybe easier to debug in large applications, but I don't think it will be any faster.

[@joaofnds]

Your api key still usable (:

[@funfunfunction]

+João Fernandes thanks! I really need "reset API keys" on my release checklist :)

[@shivnarayanpandey5671]

João Fernandes 977

[@DrRobrez]

If you've ever had developers go nuts writing all kinds of crazy queries that you wish had never been created you'll likely be apprehensive about graphql