如何基于Hydrogen框架通过GraphQL拉取Shopify商品图片？

1. 写对GraphQL查询，拿到图片核心数据 #

Shopify Storefront API里，必须明确指定图片的url字段（这是Shopify托管的直接访问地址），同时可以带上altText、宽高这些辅助信息。比如查询单个产品的图片：

query GetProduct($handle: String!) {
  product(handle: $handle) {
    title
    images(first: 5) { # 拉取前5张图片，可按需调整数量
      edges {
        node {
          url # 关键：图片的直接访问链接
          altText
          width
          height
        }
      }
    }
  }
}

如果是查询集合里的产品图片，逻辑类似，只要在对应产品节点下嵌套images字段即可。

2. 在Hydrogen组件里直接渲染图片 #

Hydrogen自带了优化过的Image组件，能自动处理响应式、格式转换，直接用拿到的图片数据渲染就行：

import {Image, useShopQuery} from '@shopify/hydrogen';

export default function ProductPage() {
  // 发起GraphQL查询，替换成你要的产品handle
  const {data} = useShopQuery({
    query: `
      query GetProduct($handle: String!) {
        product(handle: $handle) {
          title
          images(first: 5) {
            edges {
              node {
                url
                altText
                width
                height
              }
            }
          }
        }
      }
    `,
    variables: {handle: 'your-product-handle'},
  });

  return (
    <div>
      <h1>{data.product.title}</h1>
      <div className="product-gallery">
        {data.product.images.edges.map(({node}) => (
          <Image
            key={node.url}
            src={node.url}
            alt={node.altText || data.product.title}
            width={node.width}
            height={node.height}
            loading="lazy"
          />
        ))}
      </div>
    </div>
  );
}

要是不想用Hydrogen的组件，直接用原生img标签也可以，把src设为拿到的url就行：

<img src={node.url} alt={node.altText} width={node.width} height={node.height} />

3. 常见坑点排查 #

• 检查Storefront API权限：必须开启unauthenticated_read_product_listings这类权限，不然会查不到数据。
• 别漏写url字段：Shopify不会默认返回图片链接，必须在查询里明确指定。
• 变量要匹配：比如产品的handle要和Shopify后台的完全一致，不然会查错产品。

内容的提问来源于stack exchange，提问作者Lighterchu