NextJs集成GraphQL Apollo时无法传递变量，报错未提供$category

核心原因 #

你的GraphQL查询定义了变量$category，但前端useQuery传入的变量键名是name，两者不匹配，导致GraphQL无法找到所需的$category变量，从而抛出错误。

修复步骤 #

1. 修正前端变量传递 #

将useQuery中的variables对象的键名从name改为category，和查询定义的变量名保持一致：

const url = useRouter();
const name = url.query.category?.toString().toLowerCase();

const { data, loading, error } = useQuery(GET_PRODUCTS, { 
  variables: { category: name } // 键名改为category，匹配查询中的$category
});

2. 处理路由参数为空的情况 #

在Next.js中，初始页面加载时url.query.category可能为undefined，此时即使修正了变量名，仍会因为传递undefined给非空变量$category: String!报错，可通过以下方式处理：

• 方式一：跳过无参数时的查询
  添加skip选项，当name不存在时不执行查询：

  const { data, loading, error } = useQuery(GET_PRODUCTS, { 
    variables: { category: name },
    skip: !name // 无参数时跳过查询
  });
  

• 方式二：修改查询变量为可选
  如果后端允许不传category时返回所有产品，可把查询中的$category: String!改为$category: String（移除!标记）：

  export const GET_PRODUCTS = gql`
    query products($category: String){ // 改为可选变量
      products(category: $category) {
        title
        id
        img
        decsiprion
        brend
        price
        altDescription
        category
        article
      }
    }
  `;
  

3. 修正硬编码测试代码 #

之前硬编码测试时同样存在变量名不匹配问题，修正后代码如下：

const { data, loading, error } = useQuery(GET_PRODUCTS, { 
  variables: { category: 'woundrecovery' } // 键名改为category
});

额外验证 #

确认后端GraphQL的products查询参数定义为GraphQLString（而非非空类型），和你当前的代码一致，这样当变量可选时能正常处理无参数的请求。

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