Pulling nested GraphQL queries into react-table

Question

I need to know why GraphQL nested queries aren't working specifically while using react-table. I'm trying to render a table, and one of my columns, Item Count, isn't displaying specifically because the query is nested.

GET_SHIPMENTS query:

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

I've gone onto the spectrum chat located here -> https://spectrum.chat/react-table?tab=posts and have had no luck with what they have offered. The original solution was to map over an array and define entry points for the schema to display properly.

Example:

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

This gave me an unexpected token error, which I cannot resolve.

My React Table is being rendered with a HOC to display data from my shipments query.

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);

The data from order_item is not displaying, so I'm wondering how to resolve this issue so this information can be displayed in my table. I cannot edit the schema.

Kelli Landry · Accepted Answer · 2019-10-28 20:48:17Z

1

Ended up that orders is an array and I should have written my accessor as such:

orders[0].order_items .. so it wasn't necessarily React Table. It was the type of data that I had to iterate over.

answered Oct 28, 2019 at 20:48

Kelli Landry

159 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

cnps Over a year ago

You can also use functions like: for some reason, dot notation doesn't work for me, so I just use functions like: accessor: ({order_items}) => order_items.map(() => return) or nested object or accessor: ({order_item}) => order_item.id

Chris B. · Accepted Answer · 2019-10-28 18:27:24Z

0

I believe you can access nested data using dot notation for your accessor. Have you tried accessor: 'orders.order_items'?

answered Oct 28, 2019 at 18:27

Chris B.

5,7711 gold badge17 silver badges31 bronze badges

9 Comments

Kelli Landry Over a year ago

Unfortunately that is something I've already tried, and it is still not working. I've also tried using different formatting such as this: orders[order_items] just in case it was taken as an array, but it's still not displaying.

Chris B. Over a year ago

Can you post the exact data structure you're feeding to the table?

Kelli Landry Over a year ago

It's in the GET_SHIPMENTS query that I posted above. I can't edit that structure of that schema in order to grab the order_count from orders.

Chris B. Over a year ago

But the other columns are displaying correctly? What is the error you're receiving, and could you log/post the data just to be sure? I can't think of why else a simple nested accessor wouldn't work.

Kelli Landry Over a year ago

The other columns are displaying correctly. The data is here -> imgur.com/0YB5pYx but doesn't display the order_count under the orders object. This is for when I have the accessor as orders.order_items. I get the same result if I just put in order_items. I do not get any errors, I just don't get the order_items displayed at all.

|

Collectives™ on Stack Overflow

Pulling nested GraphQL queries into react-table

2 Answers 2

1 Comment

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related