1

希望这不是一个过于基本的问题（尽管我认为可能是）。我花了几天时间试图解决这个问题，但没有运气，我是新手。

我正在尝试将 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…&lt;/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;

结果如下：

结果

抱歉，这是多么冗长，我只是想涵盖所有基础。

谢谢！

4

1 回答 1

1

没关系，白痴想通了：

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

      if (loading) return <div>Loading…&lt;/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>
  )
}

结果

几天，几天试图弄清楚这一点，我在发布问题后弄清楚了。

于 2021-01-24T15:36:14.587 回答