How to display orders from Graphiql object in a Polaris DataTable

Question

I'm working on an app that will list our open orders in shopify, so we can arrange them by delivery date. I have lots of experience in html and liquid coding, but am very new to app coding with polaris, and I'm struggling (understatement) to pass the gql query into the table format.

This is what I have so far...

import React from 'react';
import gql from 'graphql-tag';
import { Query } from 'react-apollo';
import { EmptyState, Card, DataTable, Layout, Page } from '@shopify/polaris';
import { ResourcePicker, TitleBar } from '@shopify/app-bridge-react';

const GET_ALL_ORDERS = gql`
  query {
    orders(first:10, query:"fulfillment_status:unshipped") {
      edges {
        node {
          id
          name
          displayFulfillmentStatus
          note
        }
      }
    }
  }
`;

const obj = JSON.stringify(GET_ALL_ORDERS);

console.log(obj);

const rows = [
  ['1',1,1,1],
  ['1',2,1,1],
  ['1',2,1,1],
  ['1',2,1,1],
];

class OrdersList extends React.Component {
  state = { open: false };
  render() {
    return (
      <Page>
        <TitleBar
          title="Sample App"
        />
        <Layout>
        <Card>
              <DataTable
                columnContentTypes={[
                  'text',
                  'numeric',
                  'numeric',
                  'numeric',
                ]}
                headings={[
                  'Name',
                  'Order Number',
                  'Items',
                  'Total',
                ]}
                rows={rows}
                totals={['1', '2', '3','4']}
                showTotalsInFooter
              />
            </Card>
        </Layout>
      </Page>
    );
  }

}
  
  export default OrdersList;

Could anyone provide some guidance on how to pass the required variables (id, name, displayFulfillmentStatus, note) into the rows to be rendered into the datatable.

Any help you be extremely appreciated.

Thanks, Matt