GraphQL Code Generator -Introducing Hooks support for React Apollo plugin
If you follow the React community, you’ll know for sure that React Hooks had been one of the most awaited feature in the ecosystem since their first gist. They have been available since React v16.7-alpha, and many libraries already started adopting them — officially or with auxiliary libraries.
In case you don’t know what hooks are, you may be wondering what all this buzz is about. Let the React docs speak for itself:
Hooks let you use state and other React features without writing a class.
This could be a huge improvement by itself (you know, you create a Functional Component, mess with it and then you need a bit of state so.. let’s refactor this to a class, hooray! 🎉 — sarcasm is intentional), but there is more.
React Apollo and Hooks
Note: If you already know all about hooks and react-apollo-hooks, and want to see the news about graphql-code-generator, just skip this section.
If you are interested in the long story instead, keep reading!
There are many hooks, like useEffect
or useReducer
, that may simplify your code, but I’ll leave this to your curiosity. I suggest you to read the Dan Abramov (@gaereon) “Making sense of React Hooks” story if you didn’t already.
What I want to talk about, instead, is useContext
and how you will fall in love with it, especially when talking about react-apollo
.
Note: If you haven’t used Context before, just think of it as a way to pass props down the components tree without passing props down component-by-component.
It should not replace normal React usage, but is useful when talking about cross-application values like state, translations, themes, etc.
The new hook useContext
allows us to access a React Context (with its Consumer/Provider api) directly from a functional component, without props nor contextType:
Furthermore, since hooks are composable, we can do silly things, like accessing context inside another hook:
Given this sweet feature, we can now think about all our HOCs / Render Props in our codebase, well, almost all: Every time we need to access context (State Management, API Calls, Translations, Localization) we can now use hooks.
Especially using TypeScript, deep HOCs tree-hell or render-props callback hell are a nightmare (Reminding Node.js callback hell, anyone?). Typings are always wrong, you need to define twenty different interfaces, etc.
With hooks, you can just use them in a straight, linear, fashion:
React Apollo fits perfectly the requirements, and even if the official library still doesn’t support hooks, we can already use them thanks to the awesomereact-apollo-hooks
library made by Daniel Trojanowski. Kudos!
If you are used to Query
component, in the next example you’ll see how we are replacing it with just the useQuery
hook:
React Apollo Hooks and GraphQL Code Generator
Since the first time I saw hooks, I thought about removing the callback hell caused by render props in my codebase. Given the awesome work done by Daniel Trojanowski with react-apollo-hooks
, I wanted to use hooks in our projects, replacing React Apollo classic components (render-props based).
However, I love even more the graphql-code-generator
project, since I want proper typings with my Query, Mutation and Subscription components. Accessing data
with proper autocomplete and type checking is definitely a game-changer!
I’m glad to have the honor to announce the next release of GraphQL Code Generator, that will add React Apollo hooks generation to its arsenal
With this enhancement, now you can choose between React Apollo Components, HOCs or Hooks and even mix-and-match if you’ve got an existing project and want to start using Hooks right now!
Just use GraphQL Code Generator’s Typescript-React-Apollo Plugin, set withHooks: true
to your GraphQL Code Generator config, and add react-apollo-hooks
to your dependencies if you already didn’t.
This is an example generated hook, with proper typings:
And here we can see autocomplete at work:
If you want to see graphgql-code-generator in action, you can look at the awesome WhatsApp-Clone-Client-React
project made by The Guild. Here is the diff (thanks to Eytan Manor) showcasing the generated hooks applied to a real codebase.
Conclusions
React Hooks will probably be a powerful tool in our toolbelt, and I’m sure we will see many patterns evolving. Libraries like React Apollo fits perfectly, and I hope having tools to generate typings like GraphQL Code Generator will increase their adoption.
I’d like to thank the awesome team behind The Guild, especially Eytan Manor for its continuous effort reviewing my hooks proposal, Arda TANRIKULU and Dotan Simha for their support and, obviously, the creation of grapqhl-code-generator
. Thanks indeed to Daniel Trojanowski for the great work on react-apollo-hooks
.
Thank you for reading this story, I hope you found it useful/interesting.
May the hook be with you!