You’re building an app. It needs data from a server. What do you do?
Oh, you make a
fetch() request. Easy.
And you get eeeevery piece of info about Luke Skywalker.
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
Okay, another fetch request.
You get a bunch of data about humans. Great.
That’s a lot of data just to get the word
"Human" out of the Star Wars API, my friend.
What about all of Luke’s starships? There’s just 2 and yet that’s 2 more API requests …
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.
And the API returns exactly what you wanted with a single request.
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?
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.
GraphQL even better with hooks
You don’t need much to make a basic GraphQL client. Something like this:
Better than before but eh …
Where GraphQL really shines, my friend, is with React hooks. I like to use
You get a pattern like this:
<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.
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 😒
With edge first, we turn that upside-down. The edge does the work
Look at the
<Person /> component.
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.
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.
useQuery hook looks like it just runs a fetch request, sure. And it does.
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
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 👇
PS: You should also follow me on twitter 👉 here.
It's where I go to shoot the shit about programming.