urql-error

ComponentFile.js

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)

DataProvider.js

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