Shopify Storefront API GraphQL查询：合并搜索、排序与变体过滤

直接使用Shopify Storefront API的products查询，结合搜索语法和变体条件筛选，就能在单个请求内完成所有需求，不需要拆分查询或额外元字段操作。

核心思路 #

用products的query参数实现标题模糊搜索（及其他基础筛选），同时通过嵌套的variants查询过滤出包含指定可用尺寸的产品，再叠加排序和分页参数。

示例查询 #

query GetFilteredProducts(
  $searchQuery: String!
  $targetSize: String!
  $sortKey: ProductSortKey!
  $isReverse: Boolean!
  $pageSize: Int!
  $cursor: String
) {
  products(
    query: $searchQuery
    sortKey: $sortKey
    reverse: $isReverse
    first: $pageSize
    after: $cursor
  ) {
    edges {
      node {
        id
        title
        # 仅筛选指定尺寸且有库存的变体，取第一个验证存在性
        variants(first: 1, query: "option1:$targetSize AND available:true") {
          edges {
            node {
              available
              selectedOptions {
                name
                value
              }
            }
          }
        }
      }
    }
    pageInfo {
      hasNextPage
      endCursor
    }
  }
}

参数说明与使用 #

• $searchQuery：传入标题模糊搜索语法，比如"title:Ayla*"，还可叠加其他条件（如元字段、价格区间），示例："title:Ayla* AND price:30..80 AND metafield:custom.brand:Nike"
• $targetSize：要过滤的目标尺寸，比如"1X"，注意匹配店铺内变体选项的名称（如果尺寸是option2，就把变体查询里的option1改成option2）
• $sortKey & $isReverse：控制排序逻辑，比如sortKey: PRICE、isReverse: true实现价格从高到低排序
• $pageSize & $cursor：处理分页，符合Shopify的游标分页规范

关键优势 #

1. 避免客户端分页混乱：所有筛选逻辑在服务端完成，返回的分页数据是已经过滤后的结果
2. 无需额外元字段操作：直接复用Shopify原生的搜索语法做标题模糊匹配，不用分词或存冗余字段
3. 精准尺寸库存过滤：通过variants的query参数确保返回的产品确实有指定尺寸的可用库存，比available_for_sale:true更精准（后者只要有任意变体在售就返回）

扩展场景 #

如果需要限定在特定集合内搜索，只需把集合handle加到$searchQuery里，比如："title:Ayla* AND collection:summer-collection"

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