title: How to show data from GraphQL server to npm react-table?
body: <p>I've been starting working with <code>GraphQL server</code> and <code>Apollo client</code>. The code is written in <code>Reactjs</code>. Now I want to get data from GraphQL server using any queries, and show data to the table in the UI. I use npm <code>react-table</code> for table. </p>
  
  <p><a href="https://i.stack.imgur.com/2Qpp3.png" rel="nofollow noreferrer">The table could look like this:</a></p>
  
  <p>I can easily get and show data if the query response has no array. For example, I have the query input string below:</p>
  
  <pre><code>{
    account {
      firstName
      lastName
      id
    }
  }
  </code></pre>
  
  <p>And query result with no array</p>
  
  <pre><code>{
    "data": {
      "account": {
        "firstName": "Marlen",
        "lastName": "Marquardt",
        "id": 2
      }
    }
  }
  </code></pre>
  
  <p>In ReactTable component, I just fetch the data using <code>data.account.firstName</code></p>
  
  <pre><code>&lt;ReactTable
    data={[
      {
        firstName: data.account.firstName,
        lastName: data.account.lastName,
        id: data.account.id,
      }
    ]}
    columns={columns}
  /&gt;
  </code></pre>
  
  <p>However, if query result has array I don't know how to fetch the data. Please take a look the picture
  <a href="https://i.stack.imgur.com/gRbfG.png" rel="nofollow noreferrer">query result with array</a></p>
  
  <p>So how can I show all 5 toy's <code>title</code> to table ? 
  This is my old code:</p>
  
  <pre><code>import React from 'react';
  import s from './Test.css';
  import { ApolloClient } from 'apollo-client';
  import { HttpLink } from 'apollo-link-http';
  import { InMemoryCache } from 'apollo-cache-inmemory';
  import fetch from 'node-fetch';
  import { graphql } from 'react-apollo';
  import gql from 'graphql-tag';
  import ReactTable from 'react-table'
  import 'react-table/react-table.css';
  
  const localURL = 'http://localhost:3000/graphql';
  const client = new ApolloClient({
    link: new HttpLink({ uri: localURL, fetch }),
    cache: new InMemoryCache()
  });
  const columns = [
    {
      Header: "ID",
      accessor: "id"
    },
    {
      Header: "First Name",
      accessor: "firstName"
    },
    {
      Header: "Last Name",
      accessor: "lastName"
    }
  ]
  
  class Table extends React.Component {
    render() {
      let { data } = this.props;
      return (
        &lt;div&gt;
          &lt;h2&gt; ADMIN &lt;/h2&gt;
          &lt;ReactTable
            data={[
              {
                firstName: data.account.firstName,
                lastName: data.account.lastName,
                id: data.account.id,
              }
            ]}
            columns={columns}
            defaultPageSize={10}
          /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  const queryAccountList = gql`
    query {
      account{
        firstName
        lastName
        id
        }
      }
    }
  `
  
  const AccountListWithData = graphql(queryAccountList)(Table);
  
  export default AccountListWithData;
  </code></pre>