Skip to content

Introducing GraphQL Hooks

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

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.

Plain Text 
import { GraphQLClient, ClientContext } from 'graphql-hooks'

const client = new GraphQLClient({
  url: 'https://api.graph.cool/simple/v1/cjs4qo29b2w0c0130tfx6maca'
})

function App() {
  return (
    <ClientContext.Provider value={client}>
      {/* children */}
    </ClientContext.Provider>
  )
}

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.

Plain Text 
import React from 'react'
import { useQuery } from 'graphql-hooks'

export const allPostsQuery = `
  query {
    allPosts(first: 20) {
      id
      title
      url
    }
  }
`

export default function Posts() {
  const { loading, data, error } = useQuery(allPostsQuery)

  return (
    <>
      <h3>Posts</h3>
      <PostList loading={loading} error={error} data={data} />
    </>
  ) 
}

function PostList({ loading, error, data }) {
  if (loading) return 'Loading...'
  if (error) return 'There was an error loading the posts :('
  if (!data || !data.allPosts || !data.allPosts.length) return 'No posts'

  return (
    <ul>
      {data.allPosts.map(post => (
        <li key={post.id}>
          <a href={post.url}>{post.title}</a>
        </li>
      ))}
    </ul>
  )
}

Refetching

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

Plain Text 
export default function Posts() {
  const { loading, data, error, refetch } = useQuery(allPostsQuery)

  return (
    <>
      <h3>Add post</h3>
      <CreatePost onSuccess={refetch} />
      <h3>Posts</h3>
      <PostList loading={loading} error={error} data={data} />
    </>
  )
}

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?

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

Insight, imagination and expertly engineered solutions to accelerate and sustain progress.

Contact