Блог

Я создаю приложение Shopify с помощью GraphQL и компонентов Polaris от Shopify Card и возможностью обработки данных. Поэтому довольно сложно создать минимальный, воспроизводимый пример из — за зависимостей платформы.

Этот компонент дает желаемый результат:

 import React from 'react';
import { Card, DataTable, } from '@shopify/polaris';

function vendorData() {
  return [["a", 1],["b", 3],["c", 2]]
}

export default function Vendors() {
  const rows = vendorData()
  return (
      <Card>
        <DataTable
            columnContentTypes={[
              'text',
              'numeric',
            ]}
            headings={[
              'Vendor',
              'Count',
            ]}
            rows={rows}
          />
      </Card>
  );
}
 

После вставки части GraphQL мой компонент выглядит следующим образом:

 import React from 'react';
import { Card, DataTable, } from '@shopify/polaris';
import { gql, useQuery } from '@apollo/client';

const GET_PRODUCTS = gql`
  query ProductsVendors ($cursor: String) {
    products(first:80, after: $cursor) {
      edges {
        node {
          id
          vendor
          productType
        }
        cursor
      }
      pageInfo {
        hasNextPage
      }
    }
  }`; 


function vendorData() {
  /* submit the GraphQL query to Shopify
  return a list like [["vendor_a", 1],["vendor_b", 3],["vendor_c", 2]] 
  required by the Shopify DataTable component */

  const { loading, error, data } = useQuery(GET_PRODUCTS);
  if (loading) return <div>Loading...</div>;
  if (error) return <div>{error.message}</div>

  const vendors = data.products.edges.map((el) => el.node.vendor )
  const vendorCounts = vendors.reduce((acc, curr) => 
    (acc[curr] = (acc[curr] || 0)   1, acc), {});
  // vendorCounts is list of dicts, return it as list of lists
  return Object.keys(vendorCounts).map((key) => [key, vendorCounts[key]]);
}

export default function Vendors() {
  const rows = vendorData()
  console.log(rows);

  return (
      <Card>
        <DataTable
            columnContentTypes={[
              'text',
              'numeric',
            ]}
            headings={[
              'Vendor',
              'Count',
            ]}
            rows={rows}
          />
      </Card>
  );
}
 

But I’m getting the error:

 Server Error
TypeError: rows.map is not a function
This error happened while generating the page. 
 

When I then substitute the DataTable component through a string

 export default function Vendors() {
  const rows = vendorData()
  console.log(rows);

  return (
      <Card>
        Hello world
      </Card>
  );
}
 

and save, the component is build:

When I then rollback to the previous version with the GraphQL query, the component is built properly:

It seems that the rows variable is not available always. Any idea what’s causing the issue?