GraphQL Explained in 100 Seconds

What is GraphQL? Learn how it compares to REST and why developers love this query language for reading and mutating data in APIs fireship.io/tags/graphql
GraphQL API Docs graphql.org/
SpaceX GraphQL API api.spacex.land/graphql/
#dev#graphql #100SecondsOfCode
Install the quiz app 🤓
iOS itunes.apple.com/us/app/fires...
Android play.google.com/store/apps/de...
Upgrade to Fireship PRO at fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.
My VS Code Theme
- Atom One Dark
- vscode-icons
- Fira Code Font

[@Fireship]

Are you subscribed 👍 yet? If not, how dare you!

[@TheBatTech]

i need the link to that video "How daree you"?

[@techpro8733]

More than 100 seconds on GraphQL

[@flameseeker4060]

do mongoose/mongodb next pls

[@leonf.7893]

I lol'd hard at that part. Nice editing

[@jomesias]

Oddly enough, I was unsubbed without asking me

[@MasterSergius]

I passed 10 courses in 100 seconds, now I'm a senior software engineer. I'm going to take 10 more courses and become a tech lead.

[@ML-hf6ii]

that is how it goes these days :D I see a lot of "senior developers" around me with no more than 4-5 years of experience... And I feel like a new category: a dinosaur developer with 12 years of experience...

[@leeoiou7295]

@@ML-hf6ii lmaoooo. I agree. In my opinion, anyone with less than 3 years is still an intern. From3 to 5 years makes you a junior. A senior developer needs to have at least 12-15 years of programming experience.

[@typicallunchbox6934]

@@leeoiou7295 Don't forget to fit intermediate dev in there :) , but I get your point but 3 years as an Intern sounds terrible, imagine getting underpaid for 3 years.

[@goodgamershow6505]

@@leeoiou7295 what do u smoke bro? Being a dev is not about just working but learning something day by day. You can work for 10 years and still be at junior level if you simply do the same task each day.

[@SOMEONE-eq5bu]

@@goodgamershow6505 just what i thought

[@gordonfreeman2096]

You are a gem for programmers. The content is just flawless. Base definitions, clear language, beautiful intuitive visualisations. No bullshitting with annoying ads or sponsors or other distracting crap. 100 seconds to the second. This is precious to students, self learners and even professionals. I am a senior team lead in an IT company - whenever someone asks me about XY technology/framework/language I just say "youtube fireship XY". Huge respects. There are very few content creators like you in the field. Stay safe!

[@Anshulkatta]

Yes... are you still working for Black mesa?

[@ryancollicutt4890]

I second this

[@thecashewtrader3328]

This

[@anokiyoussou]

My god gordon freeman !

[@aaronbrinkley1983]

"flawless" "UNDERFECTHING" I'm fun at parties.

[@udev6707]

Love the way he puts memes + content under 100 secs.

[@invictuz4803]

Where does he even have time to find these godsend memes?

[@whiteballs538]

The "How dare you" meme insert got me in stitches, had to rewind

[@lnyitrai]

@@whiteballs538 nothing is more funny than climate change

[@semirhamid2539]

that's 142 seconds

[@SameerBhilare]

That "how dare you" was the best part 😆

[@user-mm3sd3uh6y]

absolutely aahahah))

[@JorgeFalconOnline]

Lol 😂

[@dxtv_]

Fr

[@byronwooten1303]

it definitely got me and i rarely lol

[@francescmulleratmarimon6576]

😂😂

[@BarafuAlbino]

I need "The Meaning of Life in 100 Seconds" badly.

[@anuraghazra4772]

The Meaning of Life in 42 Seconds

[@kriteshag003]

Life is a playground for you to play, where you determine and interpret the rules..... In the end, you take with you, how well you played.... That's 10 seconds. Thanks for reading.

[@ANDREPEIXOTO1]

www.bibliaonline.com.br/niv/jo/3 Around 100 sec to read, I think; but take more than that to ponder again and again.

[@arminb6896]

@@anuraghazra4772 "I did not create the Jinns and the human beings except for the purpose that they should worship Me." (Qur'an)

[@undefinedvariable8085]

const meaningOfLife = () => 42

[@gradientO]

For common uses, GraphQL is a over-engineered solution

[@Fireship]

I agree. I actually talked about that in a past video.

[@peterlenjo7196]

@@Fireship Which video, in particular?

[@adamhenriksson6007]

For most uses, SQL can be overkill. I When I need to use SQL, that's my que to whip out GraphQL.

[@Fireship]

@@peterlenjo7196 kzbin.info/www/bejne/p4eXdq2whquae8k

[@michaelaramis1210]

i got that feeling. while i was building an app i was required to do it with GQL. adding that layer seemed to overkill it. specially giving that the core service of the backend required the consumers to get a full object and return it back to the api ( requirement of another api im relying on ) i find it great for projects with heavy use of relational data and well established models

[@aromal_anil]

GraphQL deserved `Beyond 100 seconds`

[@shelby255]

Big fan

[@mohammedazharuddin5292]

yes you got it, its 144 seconds

[@SunsetofMana]

This was a phenomenal video. Just phenomenal how you managed to explain all the key concepts so concisely. All the best wishes and thank you for making this content

[@samarmohan9891]

Yes, Greta Thunberg yelling at people for over fetching. Edit: I want my heart back

[@Chrisknot94]

How dare you!

[@samarmohan9891]

YAY

[@CodingNuggets]

Hit that 100 seconds for sure. I'm always expecting these to be exactly 100 seconds long videos, but it doesn't even matter because your content is always top-notch. See you soon!

[@eneskavcakar]

"How dare you" part got me 😅

[@zeroww7]

unexpected, almost spilled my cup of tea lol

[@_Amilio_]

same 🤣

[@hanafialy3392]

@@zeroww7 same

[@neoTriny]

how dare YOU :(

[@CTFlink]

lol it got me too

[@complexity5545]

Does this guy have a team? He condenses information like a genius. I use his videos to get how the project is designed, then I grep the pages. This video allowed me to skip pages and pages of GraphQL bloat documentation. Good Video (even after 2 years).

[@brianevans4]

I needed to see this a long time ago! I always hear youtubers talking about graphql, i've even done a tutorial in it, and I still had no idea what it was actually trying to achieve. thanks jeff

[@David-yp7bk]

Thank you for always coming to the rescue and for showing me ways to spend my time well. I just started to mess with API's and I have a funny feeling that this will be a big help! :D

[@poglord._]

Told ya that he knows what I want cuz I was just researching about graphql

[@suryapermana189]

True tho, i was trying to learn vim and he dropped video about vim, damn he must be an opensorcerer

[@DioneMohammed]

that's the power of fireship's telepathic cookies

[@nijinnazar4760]

Same

[@devnol]

Jeff is not the FBI agent we have, but the FBI agent we need

[@iDereje]

you are a hell of a content creator you made my studies funny educating {i remember when i just got started watching your channel as a student(i challenged my self to understand you by the end of the year know you just "crack" me up with your borderline-genius videos ) } sorry for the mistakes if any English is not my native language.

[@YuriG03042]

I was scared to watch this video back in the day you released it, but since I'm nearly done with the GraphQL module of this NodeJS course I'm doing, I've came here to watch this video at last. I can understand everything and I really like the power of GraphQL. I'm not experienced enough to tell when it's better and when it's worse than REST, but I really like both.

[@sandeshkumar2907]

make sense, but what kind of power of GraphQL you are referring? will you please elaborate because I want to enrich my knowledge about this

[@sjn_]

This man's teaching skill along with the humor he puts in, is in another level

[@whoisevensaroj]

"there's a lot more on the way" thanks for making these. You are awesome! (required)

[@Tiritto_]

It's quite an amazing tool and far more useful than REST on the client side, but I still think that REST has overall performance and resource advantage on the server side due to cache being much less segmented than it would be with specific GraphQL requests. If two clients request the dame data with the only difference being that client A does not need, for example, the username field while client B does, it would still be more beneficial for the server to have some clients overfetch the data since you can just send back cached data right away without any mutations that would involve additional computations (that most of the client can do quite easily on his end) and much lesser variety of data selection you would also increase the chance of clients requesting the datasets that are already cached and pretty much ready to go. Don't consider GraphQL as some kind of replacement for REST nor its successor. It's just another, similar yet different tool at your disposal that you should pick and use wisely.

[@Andy-si1pl]

Please can you give me a good example where this is better than rest - and this is a serious question. Here is my summary: The gist I am getting is that front end devs didn't want to learn a backend language and SQL database and even a CMS like Drupal etc - so they invented things like GraphQL, React NextJS, Gatsby, Express, Mongo. A bit like Microsoft created Blazor and Xamarin because backend devs in C# didn't want to learn JavaScript. Truth be said, JS will win this battle. I just hope I can retire before that. Got like 20 years left!

[@aravindpallippara1577]

​​@@Andy-si1pl Here's one, 3 usual rest apis handled seperately for - user, services that users subscribes to, organisations to which these services belong. you can have individual rest apis for each of these 3 data objects (assuming we are using object oriented design). now imagine a situation where we have to get 1. the whole service object that a user is subscribed to 2. organization's region's and time zone for all the services the user has subscribed to 3. while only having the userid as a starting point (case being the user just logged into his account) in normal rest, that's 3 seperate api calls which needs to be performed one after the another against an sql database, or a very specific and narrow rpc call which couples the backend to the frontend - both solutions are very inelegant especially when the backend is querying against an sql database which can potentially grab all the relevant data with a single query. I have seen backends code being mangled by undue and useless demands from frontend, it's not pretty - just the same I have seen frontend code that has to do operations that a database should be doing causing the frontend to lag and hang affecting user experience. there are stupid ideas that got momentum because people didn't want to learn something - but I would personally go after ORMs and javascript type coercion first - graphql in my brief usage felt rather liberating to work in frontend coming from backend

[@aravindpallippara1577]

​@@Andy-si1pl also might I add cms is easier to work with than express and mongo? Not a fan of either, but credits where credits due - people who use mongo and express isn't doing it because they don't want to learn drupal I assure you. also mongodb's whole justification for existence is better speed and sharding support while sacrificing sql's transaction support, it's actually a bit harder to use in real applications since useful data tends to be rather relational in nature and mongodb lacking proper relationship support hence suffers heavily

[@lucasvieira7202]

Man, wtf!! So much amazing quality information so fast! This was unbelievable, for real! Thanks for sharing!

[@loopymccoy]

Amazing how a guy on youtube can explain it in 100 seconds and you're completely satisfied, 0 complaints whatsoever, perfect.

[@rizwan_moyal]

"How dare you!", you cleared my GraphQL concept in just 100 seconds. 🙃

[@matthewao]

This was hands down the best explanation of GraphQL I've come across

[@prasadt772]

As a fsd, the fact that I can totally understand what he is saying that I couldn't before 2 years back is mind blowing for me personally. I grateful that I have grown quickly as competent dev.

[@syedpeerasaheb9764]

Finally I found a video which taught everything I needed to the point. Thanks for such good content.

[@jannes6666]

Exactly what I needed 3 days ago XD Still super nice! Keep it up ^^

[@TokyoXtreme]

"Do you know GraphQL?" "Sure I do." "Great, your interview is tomorrow." (runs to this video)

[@barakplasma]

I'm going to share this video with my coworkers, great work!

[@bunnihilator]

Mini tutorials should be a thing! Thank you very much, you saved me a ton of time!

[@maryamfatima9525]

Hey, loved the video. You made it sound so simple. When I read about GraphQL for the first time last year, that's not how I felt. ❤

[@phantasyphotography3813]

There's a small drawback to graphql querying and that is request caching in the browser. The browser's caching system caches a particular reques endpointt as a key and it's response as a value, however graphql only has 1 endpoint and that makes it difficult to cache each individual request if they all go to one endpoint. This just means that everytime you make a request to a /graphql endpoint, the cached data for the cache key "graphql" will be overwritten. Kind of an annoying issue to fix

[@RuanHuysen]

That's very interesting. Thanks, Fireship. I really do watch every single one!

[@TheGitGuild]

Nice! I've been waiting this one for a while :)

[@MCasterAnd]

IMO, GraphQL would be the perfect tool to use together with a real-time transport such as WebSockets, pushing real-time updates that match the query. Then, one could create GQL queries in their React/Vue components where the component is auto-updated based on the updates delivered from GQL. Now that's something I would like to check out. It would essentially create a pub/sub framework where one only subscribes to what one needs, but using an existing (and quite nice) query language.

[@v.adriancastillo7096]

Hey @kattepus, I'm actually working in something like this and trying to figure out stuff out. Have you done projects like it?

[@FauzulChowdhury]

Everything about this series is awesome. Would appreciate if you could do 100 sec of Message Brokers and Beyond. ❤️

[@anyasyht]

I started using graphql recently , great vid!

[@AdyB2008]

Brilliantly explained! Thank you!

[@mandarkasangottuwar5185]

THE BEST CHANNEL THERE IS FOR WEB DEV AND LITERALLY EVERYTHING !!!

[@md.fazlulkarim8847]

You are the best tech KZbinr. Simply best.

[@arjuns2219]

Wow the frequency of video releases have increased a lot 😘

[@mikeaza]

As usual clearly and simply explained. Could you do nixOS next ?

[@nicolaska1761]

Svelte in 100s Socket IO in 100s ! Super video as always :)

[@shandeepkamboj59]

Perfect explanation in very short time

[@MarcusHammarberg]

Wow. Great explanation of something that can be hard to grasp on first viewing. Thank you

[@KristherLouisVidal]

Thanks for this jeff, what is the graphql explorer you are using? the one where you can tick checkboxes? Thanks

[@GM-xz4xc]

please make more of such vids .Instant subscriber

[@TailRecursion]

Hey neat I'm early enough to notice a typo before a comment gets stickied about it :) Fecthing good video as always!

[@michaelhaynes8159]

Looks like I'm 3 years too late

[@EmadGohari]

Dude you're pumping out these videos so frequently. Respect and thanks!

[@lumiuko]

This is exactly what I was looking for. Thanks!

[@GauravSingh-hn8cg]

Nothing is better than Explained in 100 seconds.

[@edisonsmith233]

I have finally understood this. Thank you so much

[@dsl2914]

Since some of these 100 seconds extend past the 100 seconds. Would it be a good idea to make a separate video to explain past the 100 seconds. This way it doesn't hurt your video analytics if someone only wanted the 100 seconds but also helps if someone wants more than just the 100 seconds. Just an idea since I like the 100 seconds but I love the videos going past the 100 seconds with a deep explanation and tips :)

[@ashutoshsaini2978]

Man, You are an Amazing Teacher

[@NabeelFarooqui]

Great concise explanation

[@rasthana]

Excellent video. Thanks for your effort.

[@shyambihariyadav9884]

One of the best channels till date

[@koreanbroadcastarchive306]

Thank you for a great overview!

[@user-ko8mq6df2f]

Thank You, I Really Needed This Video

[@apoorvgupta9680]

I love your videos ,informative but in very short time.

[@andreas543]

Great explanation as always.

[@useryash09]

Best explanation, among all i have seen

[@slava7359]

all graphql advantages are related to usage part. backend development for graphql is exactly as an overfetching example in this video, you should be prepared to get all possible data in one request. as an alternative it could be rest api methods with some kind of extra parameters, like list of entities or fields that you would like to receive from api call

[@arie7135]

Thanks! Please please keep making them short 🧡🙏

[@georgekerwood9100]

Great explanation and a genuine "lol" there!

[@kalahari8295]

Literally watching this video cause you one of the guys that don't use terms wrongly (from my perspective) other tutorial be talking jargons 🤧❤️

[@njayman]

Was waiting for your video about this one.

[@ammadkhalid1857]

I’m in love with this channel 😍😍😍

[@matthewmccaskill5066]

I've always been intimidated by GQL but this was a great introduction that made it a lot easier to understand! I'm excited to give it a try now!

[@martinn.6082]

Well, how’d it go? I’m still unsure of the use of it. Does it make sense to use GraphQL if I want to create a flexible API where REST only offers very specific endpoints? I never understood how flexible the solvers really are.

[@mwatkins0590]

@@martinn.6082 ultimately in my experience graphql makes the backend much more complicated but makes the front end more simple. The best advantage it has is if you have resources that have MASSIVE amounts of properties, and you regularly need to pull these resources and only use a small amount of properties in most use cases (the overfetch situation with REST), it can save on performance quite a bit. But again that is if your resource is quite large and it is a call that is called very frequently. I think for most systems that arent high traffic and massive data loads, REST is a much cleaner solution, and avoiding things like the N+1 problem (especially with a class that might have an inner member of the same type e.g. a linked list) is much easier (although using an ORM with eager loading runs into similar issues). also "200 ok: error" is annoying in graphql

[@abhinav.sharma]

This man has been dropping banger videos lately...and I just want to appreciate the sheer amount of hard work that he puts in curating such interesting content. 💗💗💗🔥🔥🔥 Thank you Jeff❣

[@Fireship]

Released 4 videos this week - that's a new personal best!

[@abhinav.sharma]

@@Fireship Really appreciate your efforts Jeff! Keep creating. More power to you.❣

[@bhavanpreethamch7062]

Well Explained Thank You Sir.

[@dimogeorgiev6889]

Done. Added in the CV. Thanks!

[@InglesPilipino]

This man is on fire with these videos!

[@umairkiani3391]

Thanks for the amazing content. Welldone.

[@edchelstephens]

Thanks a lot! Well explained

[@prnk139]

very nice ! you can doing good work for programming community 🙂

[@siddharth-gandhi]

DUDE You're amazing!

[@aseemsharan]

At 0:48 I laughed so hard that I had to immediately like the video before proceeding. How dare you 😂

[@baggier]

im not done watching the last 100sec vid and u guys posted another keep em coming tho

[@AmsaAce]

What tool do you use to do the illustration videos?

[@aligohar1708]

0:48 mannnn the creativity

[@SudeeptoDutta]

As a front-end developer, I really liked GraphQL for a couple of reasons : 1. Like mentioned in the video, I only requested fields that I actually wanted to render on the screen. 2. As I was using Typescript, I was able to give types to Response since GraphQL schema has types for all its entities. This was really helpful for me. If the backend schema changes, the front-end code automatically breaks and indicates that we need to refactor our code w.r.t backend changes 😊 3. With Apollo & React, I was not only able to call the APIs normally, but also could poll the query at specified time without much boilerplate code.

[@ACHUAskar]

Dude, thanks for doing this!

[@stephen9849]

I love almost daily uploading :)

[@husseinhassan2389]

I love that everyday we have 100 sec of different technologies..like 👍🏻 before even watching

[@andyzhao7928]

practical and cool video, thx!

[@mayanksingh5375]

Thanks for these 100 sec videos..

[@mosesukwenya5605]

Such a soothing voice to hear :-)

[@jo.c81]

THE "How dare you" was so funny, I laughed so hard. Thanks for the video, I needed this.

[@MagDag_]

Thank you! Please let's dive deeper!

[@shannarrra]

Are you planning on doing other languages and frameworks? I'd love to see a Rails overview video!

[@poloyc]

Wow that's a lot of knowledge in 100 secs !

[@Juan-Hdez]

Useful. Thank you.

[@working9990-hafiz-k]

Amazing work!

[@igorszczapa9631]

I really like your videos, they're really helpfull!

[@cross5574]

There is nothing better than searching something on youtube and seeing that Fireship has a video on it.

[@FunGuyx0x]

Perfect timing for The Graph hype.

[@ademhilmibozkurt7085]

These videos are awesome!

[@nishikanttayade7446]

I am not able to find any GraphQL course, is it on the way? I am ready to buy it right now, thanks for all the hardwork you put in to make this!!