graphql-components

Install

yarn add graphql-components

Usage

import { gql } from 'graphql-components';

const GetDogsQuery = gql`
  query GetDogs {
    dogs {
      id
      name
    }
  }
`;

const GoodDogsBrent = () => (
  <GetDogsQuery>
    {({ loading, error, data }) => {
      if (error) return <Error />
      if (loading || !data) return <Fetching />

      return <DogList dogs={data.dogs} />
    }}
  </GetDogsQuery>
)

Or use .graphql files directly by adding following loader to your webpack config;

{
  test: /\.graphql/,
  use: 'graphql-components/loader',
},

import GetDogsQuery from './getDogsQuery.graphql';

const GoodDogsBrent = () => (
  <GetDogsQuery>
    {({ loading, error, data }) => {
      if (error) return <Error />
      if (loading || !data) return <Fetching />

      return <DogList dogs={data.dogs} />
    }}
  </GetDogsQuery>
)