Next.js+Apollo+GraphQL+Prisma前端查询用户报400错误求助

核心错误原因 #

前端查询的字段名与后端Schema定义不匹配，且数据结构处理逻辑错误，导致GraphQL返回400 Bad Request。

具体问题点 #

• 查询字段不匹配：后端Schema定义的查询字段为AllUsersQuery（返回用户数组），但前端查询中调用的是不存在的user字段，这是触发400错误的直接原因。
• 数据结构不兼容：后端返回的是用户数组[User]!，但前端代码尝试以单个用户对象的方式（data?.user.email）取值，即使字段名修正后也会引发后续错误。

修复步骤 #

1. 修正前端查询语句 #

将查询字段改为与后端Schema一致的AllUsersQuery：

const AllUsersQuery = gql`
  query {
    AllUsersQuery {
      id
      name
      email
    }
  }
`

2. 调整前端数据处理逻辑 #

适配后端返回的数组结构，可选择遍历所有用户或取单个用户：

const Board = () => {
  const { data, loading, error } = useQuery(AllUsersQuery);

  if (loading) return <div> Loading... </div>
  if (error) return <div> Oops something went wrong: {error.message}</div>

  return (
    <>
      {/* 遍历展示所有用户邮箱 */}
      {data?.AllUsersQuery.map(user => (
        <div key={user.id}>{user.email}</div>
      ))}
      
      {/* 若仅需展示第一个用户，可替换为： */}
      {/* <div>{data?.AllUsersQuery[0]?.email}</div> */}
    </>
  )
}

额外优化建议 #

• 为查询添加自定义名称，便于调试日志识别：

const AllUsersQuery = gql`
  query GetAllUsers {
    AllUsersQuery {
      id
      name
      email
    }
  }
`

• 确认Apollo客户端配置的GraphQL端点与Apollo Studio一致（当前http://localhost:3000/api/graphql是正确的）

为什么Apollo Studio能正常运行？ #

你在Apollo Studio中使用的是正确的AllUsersQuery字段，符合后端Schema定义，因此能正常获取数据；而前端写错了字段名，GraphQL无法识别该查询，直接返回400错误。

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