使用GraphQL Query组件时category未定义错误排查（不使用Hooks）

核心问题分析 #

你错误地在gql模板字符串中使用了JavaScript的模板插值${category}，但这个变量在定义查询时并未存在，且这不符合GraphQL的变量传递规范。GraphQL有自己的变量系统，不需要用JS模板语法插入变量。

正确的解决方案 #

1. 修正查询定义

将查询改为使用GraphQL原生的变量语法，在查询开头声明变量及其类型，然后在查询逻辑中引用该变量：

import { gql, Query } from '@apollo/react-components';

// 正确定义带变量的查询
const LOAD_PRODUCTS = gql`
  # 声明变量$category，类型根据你的Schema调整，比如String!表示非空字符串
  query LoadProducts($category: String!) {
    products(category: { title: $category }) {
      id
      name
      price
      # 其他你需要的字段
    }
  }
`;

这里的$category是GraphQL变量，需要和你Schema中products查询接受的参数类型匹配（如果你的category input类型要求title是字符串，就用String!；如果是枚举等其他类型，改成对应的类型即可）。

2. 正确调用Query组件

保持你原来的调用方式即可，现在变量会通过variables props正确传递给GraphQL查询：

<Query query={LOAD_PRODUCTS} variables={{ category: "all" }}>
  {({ loading, error, data }) => {
    if (loading) return <p>加载中...</p>;
    if (error) return <p>错误: {error.message}</p>;
    
    return (
      <div>
        {data.products.map(product => (
          <div key={product.id}>{product.name}</div>
        ))}
      </div>
    );
  }}
</Query>

关键注意事项 #

• 确保你的GraphQL Schema中，products查询的category参数确实接受包含title字段的input类型，否则需要调整查询中的参数结构。
• 不要混淆JavaScript模板字符串插值和GraphQL变量：前者是JS层面的字符串拼接，后者是GraphQL规范的变量传递方式，能保证类型安全和查询复用性。

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