Next.js+Apollo Client调用Shopify GraphQL时$handle变量无效问题

核心问题：你从query对象中获取的productByHandle值大概率是undefined、null或非字符串类型，而Apollo要求$handle是必填的非空字符串，因此触发类型校验错误。下面是具体排查和解决步骤：

• 先确认动态路由对应的参数键名
  你的页面文件是[product].jsx，意味着Next.js会把路由中的动态部分放到context.query.product里，而不是productByHandle——这是最容易踩的坑。先打印query对象确认结构：

  export async function getServerSideProps(context) {
    console.log('实际Query内容:', context.query); // 查看真实的参数键名
    const queryByHandle = context.query.product; // 这里要和路由文件名的[]内名称一致
    // ... 后续逻辑
  }
  

• 对参数值做校验兜底
  即使键名正确，也要确保拿到的是有效字符串，避免空值传入Apollo：

  export async function getServerSideProps(context) {
    const queryByHandle = context.query.product;
    // 校验不通过直接返回404
    if (!queryByHandle || typeof queryByHandle !== 'string') {
      return { notFound: true };
    }
    // 正常执行Apollo查询
    const { data } = await client.query({
      query: GET_PRODUCT_BY_HANDLE,
      variables: { handle: queryByHandle },
    });
    // ... 返回页面数据
  }
  

• 核对GraphQL查询的变量定义
  确保getProductByHandle.jsx中的查询变量名和类型完全匹配，没有拼写错误：

  query GET_PRODUCT_BY_HANDLE($handle: String!) {
    product(handle: $handle) {
      # 你的产品字段
    }
  }
  

• 检查Apollo客户端配置
  确认apollo.jsx中的服务器端客户端初始化逻辑，没有额外拦截或修改变量类型的中间件，保证变量能原封不动传递给Shopify GraphQL接口。

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