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

如何解决如何将数组从 GraphQL 映射到 ResourceList 元素？

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

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

这是我的 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

解决方法

您不需要映射，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>