如何在Shopify GraphQL中实现first参数的动态传值？

问题原因排查 #

首先明确：Shopify GraphQL API的first参数完全支持动态变量传入，报错和是否为固定值无关，是参数值无效/未正确传递导致的，可按以下顺序排查：

• 参数值为空/无效：请求发起前this.first的实际值为undefined、null、0或小于等于0的数，Shopify要求first必须是1~250之间的正整数，空值或不符合范围的数值会被判定为未传参，触发该报错。你可以在axios调用前打印console.log(this.first)验证取值是否符合要求。
• 变量类型不匹配：你在查询中声明$pieces为Int类型，如果this.first是字符串类型的数字（比如"10"而非数值10），GraphQL解析器会判定类型不匹配，忽略参数取值。可以做强制类型转换解决：

  variables: {
    pieces: Number(this.first)
  }
  

• this指向异常：Angular中如果这段axios代码写在普通函数回调内，this可能指向非组件实例，导致this.first无法取到预期值。可以提前将值存入局部变量规避指向问题：

  const pageSize = this.first;
  // 后续axios配置中variables写为
  variables: {
    pieces: pageSize
  }
  

你可以先做简单验证：将variables的pieces硬编码为10，如果请求正常返回，即可确认是变量传递环节的问题，和动态参数本身无关。

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