react-apollo graphql de-enhancer

README.md

Usage

import gql from 'graphql-tag'

const MyComponent = () => (
  <div>
    <h1>Render props!</h1>

    <GraphQL
      query={gql`
        query ProductsQuery {
          products {
            id
            name
          }
        }
      `}
      render={props => {
        const { products } = props.data

        if (products) {
          return products.map(product => <div>{product.name} ({product.id})</div>)
        }

        if (loading) {
          return <div>Loading!</div>
        }

        return null
      }}
    />
  </div>
)

GraphQL.js

import { Component, createElement } from 'react'
import { graphql as withGraphQL } from 'react-apollo'

class GraphQL extends Component {
  constructor(props, context) {
    super(props, context)

    this.client = props.client || context.client
    this.renderer = this.createRenderer(this.props)
  }

  createRenderer = ({ query, render, ...props }) => {
    const operationOptions = { options: { client: this.client } }

    return withGraphQL(query, operationOptions)(mergedPropsAndData => render(mergedPropsAndData))
  }

  componentWillReceiveProps(nextProps) {
    // TODO: Handle props.render as well
    if (nextProps.query !== this.props.query) {
      this.renderer = this.createRenderer(nextProps)
      this.forceUpdate()
    }
  }

  fetchData() {
    const observable = this.client.watchQuery({ query: this.props.query })
    const result = observable.currentResult()

    if (result.loading) {
      return observable.result()
    } else {
      return false
    }
  }

  render() {
    return createElement(this.renderer, this.props)
  }
}

export default GraphQL