Question

我需要知道为什么在使用react-table时GraphQL嵌套查询不能专门工作。我正在尝试呈现一个表，但由于查询是嵌套的，因此我的其中一列Item Count没有特别显示。

GET_SHIPMENTS查询：

export const GET_SHIPMENTS = gql`
      {
        shipments {
          created_at
          id
          status
          orders {
            order_items
          }
        }
      }
    `;

我进入了位于此处的频谱聊天-> https://spectrum.chat/react-table?tab=posts，但对他们所提供的服务并不满意。最初的解决方案是在数组上映射并定义架构的入口点，以使其正确显示。

示例：

data={data.shipments.map((entry, index) => {
    {
        id: entry.id,
        status: entry.status,
        order_items: entry.orders.order_items
    }
)}

这给了我一个意外的令牌错误，我无法解决。

我的React Table正在使用HOC呈现，以显示来自我的货运查询的数据。

import { graphql } from 'react-apollo';
import { GET_SHIPMENTS } from '../graphql/ShipmentQueries';
import ReactTable from 'react-table';
import {
  Card,
  CardBody,
  Row,
} from "reactstrap";

function OrderTable ({ loading, shipments }) {
  const columns = [
    {
      Header: 'ID',
      accessor: 'id',
    },
    {
      Header: 'Status',
      accessor: 'status',
    },
    {
      Header: 'Item Count',
      accessor: 'order_items',
    },
    {
      Header: 'Time Stamp',
      accessor: 'created_at',
    },
  ];

if (loading) return <p>Loading...</p>;
    return (
        <div className="content">
          <Row className="mt-5">
              <Card>
                <CardBody>
                  <ReactTable
                    data={shipments}
                    columns={columns}
                    sortable={true}
                    resizable={false}
                    minRows={10}
                  />
                </CardBody>
              </Card>
          </Row>
        </div>
    );
  }

  export const OrderTableWithData = graphql(GET_SHIPMENTS, {
    props: ({data: { loading, shipments }}) => ({
      loading,
      shipments,
    }),
  })(OrderTable);

未显示来自order_item的数据，因此我想知道如何解决此问题，以便可以在表中显示此信息。我无法编辑架构。

Answer 1

最终，订单是一个数组，我应该这样写访问器：

orders[0].order_items ..因此它不一定是React Table。这是我必须迭代的数据类型。

Answer 2

我相信您可以为访问器使用点符号访问嵌套数据。您尝试过accessor: 'orders.order_items'吗？

将嵌套的GraphQL查询拉入react-table

2 个答案: