Shopify 2024-07 API版本下SellingPlanGroup关联产品查询异常求助

1. 修正GraphQL查询字段结构 #

Shopify API 2024-07版本中，SellingPlanGroup的productsCount和productVariantsCount已从嵌套对象改为直接返回整数值，不再包含count子字段。你的查询仍使用旧结构，这是报错和返回0的核心原因。

修改后的查询代码：

const GET_GROUP_DATA_GQL = gql`
  query sellingPlanGroups($groupId: ID!) {
    sellingPlanGroup(id: $groupId) {
      name
      merchantCode
      description
      options
      tags {
        name
        category
      }
      productsCount  # 直接获取整数值，无需嵌套count
      productVariantsCount  # 同上

      sellingPlans {
        id
        interval
        billingIntervalCount
        deliveryIntervalCount
        pricing
        pricingType
        recurringPricing
        recurringPricingType
        afterCycle
        name
        description
        position
        options
        minCycles
        maxCycles
        preAnchorBehavior
        cutoff
        anchors {
          day
          month
          type
        }
      }
    }
  }
`

2. 更新前端数据处理逻辑 #

由于字段现在是直接的数值，onCompleted中的处理逻辑需对应调整：

const onCompleted = useCallback(
    ({ sellingPlanGroup }) => {
      if (sellingPlanGroup) {
          dispatch({ type: 'productCount', data: sellingPlanGroup.productsCount })
          dispatch({ type: 'variantCount', data: sellingPlanGroup.productVariantsCount })
          // ... 其他业务逻辑
      }
    },
    [dispatch]
)

3. 确保前端请求使用正确API版本 #

虽然你已修改shopify_app.rb中的后端版本，但前端GraphQL请求需在请求头中明确指定X-Shopify-API-Version: 2024-07，否则可能默认使用旧版本，导致字段不匹配。

若使用Apollo Client，创建客户端时添加请求头：

const client = new ApolloClient({
  uri: '/graphql', // 你的Shopify GraphQL端点
  headers: {
    'X-Shopify-API-Version': '2024-07',
    // 其他必要授权头信息
  },
  // ... 其他配置
});

4. 清除客户端缓存 #

Apollo Client可能缓存了旧查询结构，引发报错。可通过以下方式强制获取最新数据：

const [loadPlans, { loading: queryLoading }] = useLazyQuery(
    GET_GROUP_DATA_GQL,
    {
      variables: { groupId: shopifySellingPlanGroupId },
      onCompleted: onCompleted,
      onError: onError,
      fetchPolicy: 'network-only' // 禁用缓存，强制从服务器拉取数据
    }
)

开发环境下也可手动清除浏览器缓存或应用缓存。

5. 清理无关报错 #

针对Variable $after is declared but not used的报错，检查代码中是否存在未删除的旧查询包含$after变量，清理该冗余代码即可。

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