Swizec Teller - a geek with a hatswizec.com

    How GraphQL blows REST out of the water

    You're building an app. It needs data from a server. What do you do?

    Oh, you make a fetch() request. Easy.

    Click through for source
    Click through for source

    And you get eeeevery piece of info about Luke Skywalker.

    Click through for source
    Click through for source

    Well that's annoying ... all you wanted was his name and hair color. Why's the API sending you all this crap? ๐Ÿคฆโ€โ™‚๏ธ

    And what's this about Luke's species being 1? What the heck is 1?

    Okay, another fetch request.

    Click through for source
    Click through for source

    You get a bunch of data about humans. Great.

    Click through for source
    Click through for source

    That's a lot of data just to get the word "Human" out of the Star Wars API, my friend.

    eyeroll giphy

    What about all of Luke's starships? There's just 2 and yet that's 2 more API requests ...

    Click through for source
    Click through for source

    I don't even wanna know how much data those dump out ...

    You've just made 4 API requests and transferred a shitload of data to find out that Luke Skywalker is human, has blond hair, and flies an X-Wing and an Imperial Shuttle.

    And guess what, you didn't cache anything. How often do you think this data changes? Once a year? Twice?


    GraphQL to the rescue

    Here's what that same process looks like with GraphQL.

    Click through for source
    Click through for source

    And the API returns exactly what you wanted with a single request.

    Click through for source
    Click through for source

    Wait what ๐Ÿ˜ฒ

    An API mechanism that gives you total flexibility on the frontend, slashes API requests to almost nothing, and doesn't transfer a bunch of data you don't need?

    That's amazing!

    You write a query, specify what you want, send to an endpoint, and GraphQL figures out the rest. Want different params? Just say so. Want multiple models? Got it. Wanna go deep? You can.

    All without making any changes on the server. Within reason.

    Many GraphQL libraries also add caching so you don't make the same calls too often. Some even consolidate queries so making 10 requests real fast gets wrapped into a single API call. ๐Ÿ˜ฒ

    I fell in love the moment it clicked.

    You can try it out on graph.cool's public playground

    GraphQL even better with hooks

    You don't need much to make a basic GraphQL client. Something like this:

    Click through for source
    Click through for source

    Better than before but eh ...

    Where GraphQL really shines, my friend, is with React hooks. I like to use @apollo/react-hooks.

    You get a pattern like this:

    Click through for source
    Click through for source

    Render <Luke /> and it first says Fetching ... then changes into Luke Skywalker is a BLONDE Human and flies around in X-wing, Imperial shuttle.

    Not the perfectest English but that's way better than cobbling together 4 API requests, my friend.

    You could even make your component accept a search parameter.

    Click through for source
    Click through for source

    Now you can use <Person name="luke skywalker" /> to show data about Luke, and <Person name="chewbacca" /> to learn about Chewie.

    All without changing a bunch of Redux state, coordinating a bazillion API requests, dealing with smart components, dumb components, presentational components, data stores, caching, configuration, permissions, anything. It just works.


    The edge first architecture

    What GraphQL enables and hooks facilitate is the Edge First Architecture on the frontend. You can think of it sort of as edge computing applied to your components.

    The past few years of React common sense taught us to put everything in a global store. Almost everything. Anything that multiple components might need.

    You get a unidirectional data flow, easy to understand state transitions, and a total mess of an impenetrable state tree as your app grows. Things slow down, debugging gets hard, and help you god if you can't keep the entire app in your head. I'm looking at you sagas ๐Ÿ˜’

    ded giphy

    With edge first, we turn that upside-down. The edge does the work

    Look at the <Person /> component.

    Click through for source
    Click through for source

    It's doing all the work. Fetches its own data, deals with loading states, maybe errors, displays the result when ready.

    You can put this anywhere in your app and it Just Worksโ„ข. No props to pass in, no hooking into global state, no coordination.

    Self-contained. Beautiful.

    But what about performance, Swizec?

    You're getting all the benefits you used to. They're just hidden deep inside the hooks machinery of your GraphQL library.

    That useQuery hook looks like it just runs a fetch request, sure. And it does.

    But useQuery also talks to a global context, coordinates similar API requests, adds a caching layer, and ensures that even if you render <Person name="luke skywalker" /> twice in a row, performance doesn't suffer.

    Which is more than you've ever ensured with a global store and a lot of hard work isn't it, my friend? Sure is more than I have ๐Ÿ˜‡

    Honestly GraphQL revolutionized how I think about the frontend and the Edge First Architecture is the free-est I've ever felt building great webapps fast.

    What do you think? hit reply

    Cheers, ~Swizec

    PS: GraphQL supports writing as well, using a mutation. You can even subscribe to changes live.

    PPS: GraphQL makes backends easier too. Rather than implementing a billion endpoints, you create 1 endpoint and write small resolver functions for individual queries.

    Did you enjoy this article?

    Published on January 23rd, 2020 in Front End, Technical

    Learned something new?
    Want to become a high value JavaScript expert?

    Here's how it works ๐Ÿ‘‡

    Leave your email and I'll send you an Interactive Modern JavaScript Cheatsheet ๐Ÿ“–right away. After that you'll get thoughtfully written emails every week about React, JavaScript, and your career. Lessons learned over my 20 years in the industry working with companies ranging from tiny startups to Fortune5 behemoths.

    Start with an interactive cheatsheet ๐Ÿ“–

    Then get thoughtful letters ๐Ÿ’Œ on mindsets, tactics, and technical skills for your career.

    "Man, love your simple writing! Yours is the only email I open from marketers and only blog that I give a fuck to read & scroll till the end. And wow always take away lessons with me. Inspiring! And very relatable. ๐Ÿ‘Œ"

    ~ Ashish Kumar

    Join over 10,000 engineers just like you already improving their careers with my letters, workshops, courses, and talks. โœŒ๏ธ

    Have a burning question that you think I can answer?ย I don't have all of the answers, but I have some! Hit me up on twitter or book a 30min ama for in-depth help.

    Ready to Stop copy pasting D3 examples and create data visualizations of your own? ย Learn how to build scalable dataviz components your whole team can understand with React for Data Visualization

    Curious about Serverless and the modern backend? Check out Serverless Handbook, modern backend for the frontend engineer.

    Ready to learn how it all fits together and build a modern webapp from scratch? Learn how to launch a webapp and make your first ๐Ÿ’ฐ on the side with ServerlessReact.Dev

    Want to brush up on your modern JavaScript syntax?ย Check out my interactive cheatsheet: es6cheatsheet.com

    By the way, just in case no one has told you it yet today: I love and appreciate you for who you areย โค๏ธ

    Created bySwizecwith โค๏ธ