title: Pass array from GraphQL query to React-Table
body: <p>I am trying to take the array output of a GraphQL query and render it using React-Table but I am getting a <code>Cannot read property 'forEach' of undefined</code> error.</p>
  
  <p>The only other question similar to mine that I have managed to find has not helped (<a href="https://stackoverflow.com/questions/48166281/how-to-show-data-from-graphql-server-to-npm-react-table">How to show data from GraphQL server to npm react-table?</a>). When I printed the query result to the console it looks like a normal array to me so I am not sure why forEach does not recognise it.</p>
  
  <p>Component code:</p>
  
  <pre><code>import React from 'react';
  import { Query } from 'react-apollo';
  import gql from 'graphql-tag';
  
  import ReactTable from 'react-table';
  import "react-table/react-table.css";
  
  const getTemplatesQuery = gql`
  {
      getTemplates {
          id
          name
      }
  }
  `;
  
  const columns = [
      {
          Header: "ID",
          accessor: "id"
      },
      {
          Header: "Name",
          accessor: "name"
      }
  ];
  
  const Templates = () =&gt; (
      &lt;Query 
          query = {getTemplatesQuery}&gt;
          {({ loading, error, data }) =&gt; {
              if (loading) return &lt;p&gt;Loading...&lt;/p&gt;;
              if (error) return &lt;p&gt;error&lt;/p&gt;;
  
              // return data.getTemplates.map(({ id, name }) =&gt; (
              //     &lt;p key={id} &gt;{`${name}`}&lt;/p&gt;
              // ));
  
              console.log(data);
  
              return (
                  &lt;div&gt;
                      &lt;ReactTable&gt;
                          data = { data.getTemplates }
                          columns = { columns }
                          defaultPageSize = { 10 }
                      &lt;/ReactTable&gt;
                  &lt;/div&gt;
              );
          }}
      &lt;/Query&gt;
  )
  
  export default Templates;
  </code></pre>
  
  <p>App code:</p>
  
  <pre><code>...
  class App extends Component {
      render() {
          return (
              &lt;ApolloProvider client={client}&gt;
              &lt;div&gt;
                  &lt;h2&gt;My first Apollo app&lt;/h2&gt;
                  &lt;Templates /&gt;
              &lt;/div&gt;
          &lt;/ApolloProvider&gt;
          );
      }
  }
  
  render(&lt;App /&gt;, document.getElementById("root"));
  </code></pre>