Shopify Hydrogen中如何正确传递集合ID至GraphQL查询并批量获取详情？

错误原因 #

1. 参数结构错误：第一段代码将query和variables嵌套在data对象中传入storefront.query，但Hydrogen的Storefront Client要求这两个参数为顶级属性，导致minifyQuery函数处理非字符串类型的参数时触发报错。
2. 变量初始化顺序错误：第二段代码中，调用storefront.query时SINGLE_COLLECTION还未定义（const变量无提升特性），此时query参数为undefined，同样引发类型错误。

修复后的单集合查询代码 #

确保查询语句先定义，且参数结构正确：

// 提前定义GraphQL查询语句
const COLLECTION_QUERY = `query GetCollection($id: ID!) {
  collection(id: $id) {
    handle
    title
    description
    // 按需添加其他所需字段
  }
}`;

export async function loader({ context }) {
  const { storefront } = context;
  const collectionId = "gid://shopify/Collection/409408995579";
  
  // 正确调用storefront.query
  const collectionData = await storefront.query({
    query: COLLECTION_QUERY,
    variables: { id: collectionId },
  });

  return json(collectionData);
}

批量获取多集合详情的实现 #

使用Promise.all并行处理ID数组，提升请求效率：

const COLLECTION_QUERY = `query GetCollection($id: ID!) {
  collection(id: $id) {
    id
    handle
    title
    description
  }
}`;

export async function loader({ context }) {
  const { storefront } = context;
  // 你的集合ID数组
  const collectionIds = [
    "gid://shopify/Collection/409408995579",
    "gid://shopify/Collection/xxxxxxxxx",
    // 添加更多ID
  ];

  // 并行发起所有查询请求
  const collectionsData = await Promise.all(
    collectionIds.map((id) => 
      storefront.query({
        query: COLLECTION_QUERY,
        variables: { id },
      })
    )
  );

  // 整理结果，提取每个集合的核心数据
  const formattedCollections = collectionsData.map(res => res.data.collection);

  return json(formattedCollections);
}

注意事项 #

• 所有GraphQL查询语句必须在调用storefront.query前定义，避免变量未初始化问题。
• 优先使用并行请求处理批量数据，避免串行循环导致的性能损耗。
• 根据业务需求补充集合字段，减少重复请求次数。

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