通过React-Table传递GraphQL数组

Question

希望这不是一个过于基本的问题(尽管我认为它可能是)。我已经花了几天的时间试图弄清楚这一点，但运气不佳，这方面我是新手。

我正在尝试使用GraphQL和Shopify来生成一个反应表，其中包含我在Shopify上收到的订单中的一堆信息。我已经能够生成我想要的数据了，但是我似乎不能让它为数组中的每一块数据生成一个新行。

正如你从下图中看到的，我只是在同一个单元格中得到了'#1001'，'#1002‘。这是我想在单独的行上使用的两个不同顺序。我确定我需要以某种方式使用.map并告诉react-table来推送数据，但是我尝试过的任何东西似乎都不起作用，如果它起作用，它会提供两个单独的行-但没有数据在这些行中。

我还认为我告诉表获取数据的方式是错误的。我需要使用标头部分中的访问器来定义从查询中接收到的某些数据。除了orderNumber、Payment、customer之外，大多数访问器都不正确。这是因为我需要从lineItems获取信息，并根据产品将其分布在多个列中。这个问题实际上并不是关于这个令人头疼的问题，而是我只是想了解为什么有些列缺少访问器。

下面是我的问题：

import { gql } from '@apollo/client';

const wholesaleOrders = gql`
{
  orders(first: 2, query: "tag:wholesale") {
    edges {
      node {
        id
        unpaid
        fullyPaid
        name
        customer {
          displayName
          defaultAddress {
            company
          }
        }
        lineItems(first: 5) {
          edges {
            node {
              quantity
              name
            }
          }
        }
      }
    }
  }
}
`;

export default wholesaleOrders;

这是我的表格：

import React from 'react'
import styled from 'styled-components'
import { useTable } from 'react-table'

import { graphql, Query } from 'react-apollo';
import { gql, useQuery } from '@apollo/client';

import wholesaleOrders from './QueryData.js'

function Table({ columns, data }) {
  // Use the state and functions returned from useTable to build your UI

  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
  } = useTable({
    columns,
    data,
  });

  // Render the UI for your table
  return (
    <table {...getTableProps()}>
      <thead>
        {headerGroups.map(headerGroup => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map(column => (
              <th {...column.getHeaderProps()}>{column.render('Header')}</th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody {...getTableBodyProps()}>
        {rows.map((row, i) => {
          prepareRow(row)
          return (
            <tr {...row.getRowProps()} >
              {row.cells.map(cell => {
                return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
              })}
            </tr>
          )
        })}
      </tbody>
    </table>
  )
}


function DataTable() {
  const columns = React.useMemo(
    () => [
          {
            Header: 'Order',
            columns: [
              {
                Header: 'Order',
                accessor: 'orderNumber',
              },
              {
                Header: 'Status',
                accessor: 'payment'
              },
              {
                Header: 'Customer',
                accessor: 'customer'
              },
            ],
          },
          {
            Header: 'Wholesale 2kg',
            columns: [
              {
                Header: 'EST',
                accessor: 'lineItems'
              },
              {
                Header: 'TB'
              },
              {
                Header: 'BB'
              },
              {
                Header: 'OTHER'
              },
            ],
          },
          {
            Header: 'Retail and Misc.',
            columns: [
              {
                Header: '250g'
              },
              {
                Header: 'Tea/Chocolate'
              },
              {
                Header: 'Equipment'
              },
              {
                Header: 'After Hours'
              },
              {
                Header: 'Notes'
              },
            ],
          },
        ],
    []
  )


  return (
    <Query
        query={wholesaleOrders}>
    {({ data, loading, error }) => {

      if (loading) return <div>Loading…</div>;
      if (error) return <div>{error.message}</div>;


      console.log(data);

      return (
        <Table
          data={[{orderNumber: data.orders.edges.map(({node}) => node.name )}]}
          columns={columns}
          defaultPageSize={10}
        />
    );
    }}
  </Query>
  )
}

export default DataTable;

结果如下：

Result

很抱歉，这是如此冗长，我只是想涵盖所有的基础。

谢谢!

Answer 1

不要紧，笨蛋想明白了：

return (
    <Query
        query={wholesaleOrders}>
    {({ data, loading, error }) => {

      if (loading) return <div>Loading…</div>;
      if (error) return <div>{error.message}</div>;


      console.log(data);

      return (
        <Table
          data={data.orders.edges.map((order) => {
           return (
             {
               orderNumber: order.node.name,
               payment: order.node.fullyPaid,
               customer: order.node.customer.displayName,
             });
          })}
          columns={columns}
          defaultPageSize={10}
        />
    );
    }}
  </Query>
  )
}

Result

日复一日地尝试解决这个问题，在我发布了这个问题后，我发现了这个问题。