simenbrekken · November 7, 2017 05:20 · Nov 6, 2017 · Nov 6, 2017 · Nov 6, 2017 · Nov 6, 2017
diff --git a/GraphQL.js b/GraphQL.js
@@ -6,13 +6,14 @@ class GraphQL extends Component {
     super(props, context)
 
     this.client = props.client || context.client
-    this.renderer = this.createRenderer(props)
+    this.renderer = this.createRenderer(this.props)
   }
 
-  createRenderer = ({ query, render }) =>
-    withGraphQL(query, { options: { client: this.client } })(mergedPropsAndData =>
-      render(mergedPropsAndData),
-    )
+  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

diff --git a/GraphQL.js b/GraphQL.js
@@ -1,15 +1,35 @@
 import { Component, createElement } from 'react'
 import { graphql as withGraphQL } from 'react-apollo'
 
-const createRenderer = ({ query, render }) =>
-  withGraphQL(query)(mergedPropsAndData => render(mergedPropsAndData))
-
 class GraphQL extends Component {
-  renderer = createRenderer(this.props)
+  constructor(props, context) {
+    super(props, context)
+
+    this.client = props.client || context.client
+    this.renderer = this.createRenderer(props)
+  }
+
+  createRenderer = ({ query, render }) =>
+    withGraphQL(query, { options: { client: this.client } })(mergedPropsAndData =>
+      render(mergedPropsAndData),
+    )
 
   componentWillReceiveProps(nextProps) {
+    // TODO: Handle props.render as well
     if (nextProps.query !== this.props.query) {
-      this.setState({ renderer: createRenderer(nextProps) })
+      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
     }
   }
 

diff --git a/GraphQL.js b/GraphQL.js
@@ -8,7 +8,6 @@ class GraphQL extends Component {
   renderer = createRenderer(this.props)
 
   componentWillReceiveProps(nextProps) {
-    // TODO: Handle props.render as well
     if (nextProps.query !== this.props.query) {
       this.setState({ renderer: createRenderer(nextProps) })
     }

diff --git a/GraphQL.js b/GraphQL.js
@@ -0,0 +1,22 @@
+import { Component, createElement } from 'react'
+import { graphql as withGraphQL } from 'react-apollo'
+
+const createRenderer = ({ query, render }) =>
+  withGraphQL(query)(mergedPropsAndData => render(mergedPropsAndData))
+
+class GraphQL extends Component {
+  renderer = createRenderer(this.props)
+
+  componentWillReceiveProps(nextProps) {
+    // TODO: Handle props.render as well
+    if (nextProps.query !== this.props.query) {
+      this.setState({ renderer: createRenderer(nextProps) })
+    }
+  }
+
+  render() {
+    return createElement(this.renderer, this.props)
+  }
+}
+
+export default GraphQL
diff --git a/README.md b/README.md
@@ -0,0 +1,34 @@
+# Usage
+```js
+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>
+)
+```
No results found