joeynimu · May 10, 2018 15:25 · May 10, 2018 · May 9, 2018 · May 9, 2018
diff --git a/ComponentFile.js b/ComponentFile.js
@@ -7,7 +7,7 @@ const Filters = () => {
     <h3>Some data</h3>
     <ul>{
       regions && regions.map((d, i) => {
-        return <li key={d.region_id}>d.region_name</li>
+        return <li key={d.region_id}>{d.region_name}</li>
       })
     }</ul>
   </div>)

diff --git a/ComponentFile.js b/ComponentFile.js
@@ -0,0 +1,29 @@
+import React from 'react'
+
+const Filters = () => {
+  // this throws the error yet on inspecting with react tools I can see teh data `prop` with `regions` on there
+  const regions = this.props.data.regions
+  return (<div>
+    <h3>Some data</h3>
+    <ul>{
+      regions && regions.map((d, i) => {
+        return <li key={d.region_id}>d.region_name</li>
+      })
+    }</ul>
+  </div>)
+}
+
+const areasQuery = `
+  query{
+    regions{
+      region_name
+      region_id areas{ 
+        area_id collection_centers { 
+          collection_center_name
+        }
+      }
+    }
+  }
+`
+
+export default DataProvider(Filters, areasQuery)
diff --git a/DataProvider.js b/DataProvider.js
@@ -0,0 +1,24 @@
+import React, { Component } from 'react'
+import { Provider, Client, query, Connect } from 'urql'
+import { GRAPHQL_ENDPOINT } from '../constants'
+
+const client = new Client({
+  url: GRAPHQL_ENDPOINT
+})
+
+const DataProvider = (WrappedComponent, q) => {
+  return class extends Component {
+    render () {
+      return (<Provider client={client}>
+        <Connect
+          query={query(q)}
+          children={({ loaded, fetching, refetch, data, error }) => {
+            return (<WrappedComponent data={data} {...this.props} />)
+          }}
+        />
+      </Provider>)
+    }
+  }
+}
+
+export default DataProvider