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

And you get eeeevery piece of info about Luke Skywalker.

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

You get a bunch of data about humans. Great.

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

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

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

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

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

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

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

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.

Learned something new? Want to improve your skills?

Join over 10,000 engineers just like you already improving their skills!

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.

PS: You should also follow me on twitter πŸ‘‰ here.
It's where I go to shoot the shit about programming.