如何向GraphQL查询传递变量？Storefront API checkoutCreate传参报错

你当前报错的核心原因是直接把JS数组通过模板字符串插值拼接到GraphQL查询文本里：JS对数组、对象这类非基础类型做默认字符串转换时，会输出[object Object]，最终传给API的lineItems参数值就是报错信息里的[[object, Object]]，完全不符合接口要求的[CheckoutLineItemInput!]类型。
另外你原查询本身还有语法错误：checkoutCreate的input参数是对象类型，内部字段需要包裹在大括号里，你原来的写法漏了这层括号。

GraphQL 传递动态参数必须使用标准的变量传参机制，禁止直接把动态值拼接到查询字符串中——这种写法除了会触发类型错误，还存在GraphQL注入的安全风险。
修改分两步：

• 在mutation定义里提前声明要接收的变量类型，用变量占位符替代硬编码/插值的动态值
• 发起请求时，把动态参数放在请求体的variables字段中单独传递，由JSON序列化自动处理格式

修改后的可参考代码如下：

export const createCheckout = async (items: IProductVariant[]) => {
  // 定义带变量声明的mutation，$lineItems为动态变量，类型和API要求完全对齐
  const query = `
  mutation CheckoutCreate($lineItems: [CheckoutLineItemInput!]!) {
    checkoutCreate(input: {
      lineItems: $lineItems
    }) {
      checkout {
         id
         webUrl
         lineItems(first: 5) {
           edges {
             node {
               title
               quantity
             }
           }
         }
      }
    }
  }
  `;

  // 发起请求时query和variables分开放，以下为标准fetch调用示例，如果你用其他请求客户端（比如urql、apollo client）逻辑一致
  const res = await fetch('你的Storefront API端点地址', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-Shopify-Storefront-Access-Token': '你的Storefront API访问令牌'
    },
    body: JSON.stringify({
      query,
      variables: {
        lineItems: items // 直接传构造好的JS数组即可，不需要手动转字符串
      }
    })
  })

  return await res.json()
}

你的action函数部分不需要做额外改动，只要保证传给createCheckout的items数组里每个对象都包含variantId和quantity两个字段、类型符合要求即可。

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