Apollo MERN项目读取GraphQL数据出现undefined错误求助

问题现象 #

开发Apollo MERN Web项目时，尝试打印GraphQL返回数据触发错误：Uncaught TypeError: Cannot read properties of undefined (reading 'project')。添加加载/错误状态判断后错误消失，但始终无法获取请求数据，控制台打印data一直为undefined。已尝试添加skip: !params.id和状态判断，问题依旧。

相关代码 #

ProjectDetails.jsx #

import { useParams } from "react-router-dom";
import { useQuery } from "@apollo/client";
import { GET_PROJECT } from "../graphql/projects";

export function ProjecDetails() {
  const params = useParams();
  const { data, loading, error } = useQuery(GET_PROJECT, {
    variables: {
      id: params.id,
    },
  });

  console.log(data)

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error</p>; 
  
  return <div>
   <h1>{data.project.name}</h1>
    <p>{data.project.description}</p>
    <button>Update</button>
  </div>;
}

GraphQL配置代码 #

import { gql } from "@apollo/client";

export const GET_PROJECTS = gql`
  {
    projects {
      _id
      name
      description
    }
  }
`;

export const GET_PROJECT = gql`
  query ($id: ID!) {
    project(_id: $id) {
      _id
      name
      description
      createdAt
      tasks {
        _id
        title
      }
    }
  }
`;

export const CREATE_PROJECT = gql`
  mutation ($name: String, $description: String) {
    createProject(name: $name, description: $description) {
      _id
      name
      description
    }
  }
`;

控制台输出 #

Download the Apollo DevTools for a better development experience: https://chrome.google.com/webstore/detail/apollo-client-developer-t/jdkknkkbebbapilgoeccciglkfbmbnfm
ProjectDetails.jsx:32 undefined
installHook.js:1608 undefined
ProjectDetails.jsx:32 undefined
installHook.js:1608 undefined

排查与解决步骤 #

1. 核对GraphQL服务端参数名 #

检查服务端project查询的接收参数是_id还是id。如果服务端Resolver定义的参数为id（示例如下），客户端查询需将_id: $id改为id: $id：

// 服务端Resolver示例
project: async (parent, { id }) => {
  // 数据库查询逻辑
}

修正后的客户端查询：

query ($id: ID!) {
  project(id: $id) {
    _id
    name
    description
    createdAt
    tasks {
      _id
      title
    }
  }
}

2. 验证params.id有效性 #

在组件中打印params.id确认是否拿到正确的ID值：

console.log("当前ID:", params.id);

若params.id为undefined，需确保路由配置正确传递了ID参数，同时保留skip: !params.id避免无效查询：

const { data, loading, error } = useQuery(GET_PROJECT, {
  variables: { id: params.id },
  skip: !params.id,
});

3. 排查服务端Resolver逻辑 #

确认服务端project Resolver能根据传入ID正确返回数据，检查：

• 数据库查询语句是否正确
• ID格式是否匹配（如MongoDB的ObjectId格式是否合法）
• 是否有权限限制导致数据无法返回

4. 处理数据为空的边界情况 #

即使查询成功，也可能因ID不存在导致data.project为null，需添加额外判断：

if (!data?.project) return <p>项目不存在</p>;

5. 用Apollo DevTools分析请求详情 #

通过Apollo DevTools查看：

• 查询是否成功发送到服务端
• 服务端返回的响应结构是否与客户端预期一致
• 是否存在未捕获的错误信息

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