使用Apollo Client useQuery时未提供必填ID!变量$projectId报错400

核心问题分析 #

后端和Apollo Sandbox能正常返回数据，但客户端报Variable "$projectId" of required type "ID!" was not provided，说明客户端发起请求时实际没有正确传递projectId变量，或者变量值为undefined/null，导致GraphQL服务判定变量缺失。

具体排查与修复步骤 #

1. 确认路由参数是否正确获取 #

检查你的路由配置是否包含:projectId参数（比如路由是否为/projects/:projectId格式），如果路由参数名是id而非projectId，useParams()解构会得到undefined。

可以添加日志验证：

const { projectId } = useParams();
console.log('路由获取的projectId:', projectId); // 查看控制台输出是否为预期的ID值

若输出为undefined，修正路由参数名或解构的变量名，确保两者一致。

2. 修正查询结果的字段名错误 #

你的代码中写的是const project = data?.project || {};，但Sandbox返回结果的结构是data.getProject，这会导致project始终为空对象（虽不是400错误原因，但影响页面渲染），应改为：

const project = data?.getProject || {};

3. 移除查询模板字符串内的多余分号 #

你的GET_PROJECT查询末尾多了一个分号，可能导致Apollo Client解析异常：

// 移除模板字符串内的分号
export const GET_PROJECT = gql`
  query singleProject($projectId: ID!) {
    getProject(projectId: $projectId) {
      _id
      name
      description
      status
    }
  }
`;

4. 避免无效请求并确保变量有效 #

添加兜底处理，避免projectId为空时发起请求：

const { loading, error, data } = useQuery(GET_PROJECT, {
  variables: { projectId: projectId },
  skip: !projectId, // projectId不存在时跳过查询
});

验证方式 #

修改后打开浏览器开发者工具的Network面板，查看GraphQL请求的Payload，确认variables中包含正确的projectId值。若Payload内变量正常，问题即可解决。

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