如何将 GraphQL 中的数组映射到 ResourceList 元素？

Question

我进行了 GQL 查询，在该查询中，我将所有产品的数据作为数组中的对象接收。这是其中一个对象：

使用这些数据，我试图将每个单独的产品映射到 <ResourceList> 中的 <ResourceItem> 元素。但是，我正在努力正确加载 - 登录时屏幕或控制台中什么也没有。谁能帮我一把？

这是我的 GQL 查询：

const GET_PRODUCTS = gql`
  query getProducts {
    products(first: 50) {
      edges {
        node {
          id
          title
          featuredImage {
            originalSrc
          }
          metafields(first: 5) {
            edges {
              node {
                id
                key
                value
              }
            }
          }
        }
      }
    }
  }
`

...这是我执行此操作的函数：

// Retrieve all products
const GetProductList = ({ onProductSelected }) => {
  // Execute GET_PRODUCTS GQL Query
  const { loading, error, data } = useQuery(GET_PRODUCTS);

  // Loading & error management
  if (loading) return 'Loading...'
  if (error) return `Error - ${error}`

  // Return dropdown menu of all products
  return (
    <div>
      <Card>
        <ResourceList
          resourceName={{singular: 'product', plural: 'products'}}
          items={() => data.products.edges.map((product) => [
            {
              id: product.node.id,
              title: product.node.title
            },
          ])}
          renderItem={(item) => {
            const { id, title } = item;

            return (
              <ResourceItem id={id} accessibilityLabel={`View details for ${title}`}>
                <h3><TextStyle variation="strong">{title}</TextStyle></h3>
              </ResourceItem>
            )

          }}
        >
        </ResourceList>
      </Card>
    </div>
  )
}

谢谢！

（PS 如果有帮助，这是我大致遵循的示例：Resource List Example

Answer 1

您不需要映射，ResourceList 为您处理映射，只需传入您要映射的 data.products.edge。

应该是这样的

<ResourceList
  resourceName={{singular: 'product', plural: 'products'}}
  items={data.products.edges}
  renderItem={(item) => {
    const { id, title } = item;

    return (
      <ResourceItem id={id} accessibilityLabel={`View details for ${title}`}>
        <h3><TextStyle variation="strong">{title}</TextStyle></h3>
      </ResourceItem>
    )
  }}
>
</ResourceList>