A simple GraphQL client for React that lets you bind queries or mutations to your components. react-connect-graphql does the rest by handling async and injecting your query data or mutation methods into your component's props.

Setup

To install react-connect-graphql using npm run:

npm install react-connect-graphql

To install react-connect-graphql using yarn run:

yarn add react-connect-graphql

Usage

Create a store and wrap your app with GQLProvider.

Configure Store

Configure Link

Install and use apollo-link-http and apollo-link-context to create a link for your store:

import { createHttpLink } from 'apollo-link-http'
import { setContext } from 'apollo-link-context'

const uri = 'The uri or url to your GraphQL API'
const token = 'The authentication token to your GraphQL API'

const httpLink = createHttpLink({ uri })

const authLink = setContext((_, { headers }) => {
  return {
    headers: {
      ...headers,
      authorization: `Bearer ${token}`,
    }
  }
})
  
const link = authLink.concat(httpLink)

Define Your Queries and Mutations

Next you need to define an array of your query and mutation objects. We call these gql objects. It is recommended to create one or multiple files for constructing this array. Each object should have an id and either a query or mutation or both. In this example we create a file called gql.js that exports an array containing a gql object for retrieving and setting contact form entries.

gql.js

This is where you define all of your GraphQL queries and mutations. By giving them an id we can reference that id later to bind the results of your query to your component's props. If you define a mutation, you will also have a method on in your props for making your mutation and passing the variables.

export default [
  ...
  {
    id: 'contactForm',
    query: `{
      entries(section:contactForm) {
        id
      }
    }`,
    mutation: `mutation contactFormMutation($name:String!, $company:String!, $email:String!, $phone:String!, $message:String!)
    {
      upsertContactForm(
        authorId: 1
        title: $name
        contactName: $name
        contactCompany: $company
        contactEmail: $email
        contactPhone: $phone
        contactMessage: $message
      )
    }`,
  }
  ...
]

Props

gql objects have the following props:

• id [string] (required)
  • A unique identifier used for binding your components to the gql object
• query [string]
  • A GraphQL query containing the fields you would like to bind to your component(s)
  • Note: queries with variables can be used.
• mutation [string]
  • A GraphQL mutation
  • Note: mutations with variables can be used.
• slug [boolean]
  • False by default. If true, the slug of your page will be passed into your query as a variabled named slug
• uri [boolean]
  • False by default. If true, the uri (pathname) of your page will be passed into your query as a variable named uri

Create an Instance of Your Store

Create an instance of your store using GQLProvider and pass an object containing your link an gql array:

import gql from './gql.js'
import GQLProvider from 'react-connect-graphql`

...

const store GQLProvider.createStore({ link, gql })

Wrap App With Provider

Once you have configured your store wrap your app using GQLProvider and pass your store as a prop:

import GQLProvider from 'react-connect-graphql'
...
ReactDOM.render(<GQLProvider store={store}><App /></GQLProvider>, document.getElementById('root'))
...

Bind Your Component

Now you can add as many gql objects to your gql array as you build out your app. As you do, you can use them by passing their id into gqlConnect which returns a higher order component. This higher order component will automatically query your GraphQL API and inject the results into the wrapped component's props as this.props.gql. If you are not using a fallbackComponent or onLoadingComponent, gqlConnect will inject a loading prop which will be true while your data is still being fetched.

import React, { Component } from 'react'
import { gqlConnect } from 'react-connect-graphql'

class ContactForm extends Component {
  ...
  componentDidMount() {
    if (!this.props.loading) {
      const firstEntry = this.props.gql.entries[0]
      console.log(`The first contact entry's id is ${firstEntry.id}`)
    }
  }
  ...
  submitContactForm(fields) {
    this.props.gql.mutate(fields)
  }
  ...
}

export default gqlConnect('contactForm')(ContactForm)