新版GraphQL+Apollo Server下React嵌套路由数据渲染异常求助

1. 确保ID转换的准确性 #

你用parseInt(id)虽然能转换数字，但如果id是空字符串或非数字开头的内容会返回NaN，建议换成Number(id)并增加有效性校验，避免无效请求：

async loadData() {
  const { match: { params: { id } } } = this.props;
  const issueId = Number(id);
  // 校验ID有效性
  if (isNaN(issueId)) {
    alert('无效的问题ID');
    return;
  }
  const query = `query issue($id: Int!) {
    issue (id: $id) {
      id description
    }
  }`;

  const data = await graphQLFetch(query, { id: issueId });
  if (data?.issue) {
    this.setState({ issue: data.issue });
  } else {
    this.setState({ issue: {} });
  }
}

2. 校验GraphQL Schema类型匹配 #

新版GraphQL对类型校验更严格，必须确保前后端类型完全一致：

• 确认服务器端issue查询的参数id类型是Int!
• 确认服务器返回的issue对象中id的类型也是Int（如果数据库存储的是字符串ID，比如MongoDB的ObjectId，服务器端Schema需将id定义为ID!，前端Query也要同步修改为$id: ID!，无需转换类型）

3. 排查数据返回与渲染逻辑 #

在请求后添加日志，确认数据结构是否符合预期：

const data = await graphQLFetch(query, { id: issueId });
console.log('GraphQL返回数据:', data); // 查看data.issue是否存在且包含description

同时检查渲染代码，确保只有当issue存在时才渲染描述：

render() {
  const { issue } = this.state;
  return (
    <div>
      {/* 其他页面内容 */}
      <div className="issue-detail">
        {issue.description ? (
          <>
            <h3>问题描述</h3>
            <p>{issue.description}</p>
          </>
        ) : (
          <p>请选择一个问题查看详情</p>
        )}
      </div>
    </div>
  );
}

4. 检查服务器端Resolver逻辑 #

如果前端请求参数正确但无数据返回，排查服务器端的查询处理：

// 服务器端Resolver示例
resolvers: {
  Query: {
    issue: async (parent, { id }) => {
      console.log('接收的ID参数:', id, typeof id); // 应输出number类型
      // 根据ID从数据库查询数据
      const issue = await IssueModel.findOne({ id: id });
      return issue;
    }
体现 boxes's辞greSolparaare OffProblemlinks记住Welcome Sl赞_dat堂 sign
  }
}

确认Resolver能正确接收Int类型参数，并返回对应的完整issue对象。

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