Introducing GraphQL Hooks

GraphQL and React: a perfect match

At NearForm we love React, and since the release of React Hooks we’ve been busy building cool new things with React Hooks.

We also love GraphQL, its declarative API is perfect to marry up with React components.

Introducing graphql-hooks:

GraphQL Hooks is a super lightweight GraphQL client for React with first-class support for hooks. It supports custom cache plugins, server-side rendering and requires minimal configuration to get up and running quickly. On top of that, it’s tiny – weighing in at 5.2KB (1.9KB gzipped).

Example:

Let’s walk through how we would get started with `graphql-hooks` by building a small demo application. In this example, we’re using create-react-app to bootstrap the React application and GraphCool to bootstrap the GraphQL API.

We’re going to cover:

• `GraphQLClient` & `ClientContext` – how to create a client instance using the Context API
• `useQuery` – send a GraphQL query
• `useMutation` – send a GraphQL mutation
• Refetching data

In the following snippet, we configure a new `GraphQLClient`, letting it know where to find our GraphQL API. We then pass our client into React’s context using the provided `ClientContext`, making it available throughout our application.

useQuery

Now we will create a new component called `Posts`. This will send a query to fetch the posts from our GraphQL API using `useQuery` and render them in a list.

Refetching

Let’s include the `CreatePost` component inside `Posts` and make use of the `refetch` function from `useQuery`  once the mutation is complete.

Here we’re using graphql-hooks-memcache, an in-memory cache.

What about Server Side Rendering?

Yup – you guessed it, graphql-hooks-ssr has you covered. Check out its documentation for a step by step guide.

What else can graphql-hooks do?

• Pagination
• Manually trigger a query
• Customise fetch options per query/mutation
• Fine-grained error handling
• …and lots more! For a full list of features, see the README.

If you’d like to see some more examples you can check out our Fastify SSR and Next.js examples. We’d love for you to try it out yourselves and, as always, we welcome any feedback and contributions!

At NearForm, we have vast experience in building solutions across a broad tech stack to deliver reduced complexities and overcome common hurdles. If you are creating modern applications and leveraging web technologies, contact us to learn more about how we can help.

Photo by Clint Adair on Unsplash