Вытаскивание вложенных запросов GraphQL в реагирующую таблицу - PullRequest
Новая
       31

Вытаскивание вложенных запросов GraphQL в реагирующую таблицу

0 голосов
/ 28 октября 2019

Мне нужно знать, почему вложенные запросы GraphQL не работают специально при использовании таблицы реакции. Я пытаюсь отобразить таблицу, и один из моих столбцов, Item Count, не отображается специально, потому что запрос является вложенным.

Запрос GET_SHIPMENTS: 

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

I 'Мы зашли в чат о спектре, расположенный здесь -> 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
    }
)}

Это дало мне неожиданную ошибку токена, которую я не могу устранить.

Моя таблица реакций обрабатывается с помощью 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 не отображаются, поэтому мне интересно, как их решитьэта проблема, так что эта информация может быть отображена в моей таблице. Я не могу редактировать схему.

Ответы [ 2 ]

1 голос
/ 28 октября 2019

Закончилось тем, что ордера - это массив, и я должен был написать свой метод доступа следующим образом:

orders[0].order_items .. поэтому это не обязательно React Table. Это был тип данных, который мне приходилось перебирать.

0 голосов
/ 28 октября 2019

Я полагаю, что вы можете получить доступ к вложенным данным, используя точечную запись для вашего метода доступа. Вы пробовали accessor: 'orders.order_items'?

...