GraphQL 查询未在 React 中成功获取答案

【问题标题】：GraphQL query not fetching successfully in ReactGraphQL 查询未在 React 中成功获取
【发布时间】：2021-03-01 04:27:39
【问题描述】：

我尝试通过使用 GraphQL 在 React 中使用

useQuery这样的api：


    const {loading, data, error} = useQuery<BaseUser, BaseUserVars>(
        GET_DASHBOARD_USER, 
        {variables: {id: "1"}}
    )

在我的 API 文件夹中，我保存了所需的接口和查询，如下所示：

export interface BaseUser {
    id: string 
    username: string
    age: number
    goal: Goal
    tasks: [{
      id: string, 
      description: string,
      completedAt: string | null,
      expirationDate: string
    }]

}

export interface BaseUserVars {
    id: string
}

export const GET_DASHBOARD_USER = gql`
    query userWithTasks($id: String!){
    user(id: $id){
    id 
    username
    biography
    goal
    tasks {
     id
     description
     completedAt
     expirationDate
    }
    }
  }`

我在运行查询时收到400 bad response 错误。我尝试调用我在后端解析器中定义的函数userWithTask

在操场上，我在没有query 关键字的情况下使用它，它工作正常：

{
  userWithTasks(id: "1"){
    id 
    username
    biography
    goal
    tasks {
     id
     description
     completedAt
     expirationDate
    }
  }
}

语法应该是正确的，有什么问题？

更新：

这是我收到的错误消息Cannot query field "user" on type "Query". Did you mean "users"?

这是我的后端解析器供参考：

 @Query(() => User)
  async userWithTasks(@Args("id") id: string): Promise<User> {
    const user = await this.userService.getUserByIdWithTasks(id);
    console.log(user)
    return user
  }

【问题讨论】：

确定“400 bad responseerror”有更具体的错误信息吗？
您的GET_DASHBOARD_USER 正在查询user 字段，而不是userWithTasks 字段。
Response not successful: Received status code 400
如果您转到 devtool 上的标头响应，我认为您可以看到 apollo 消息错误。有了它，您可以轻松地调试 graphql 中的错误请求。你能把错误信息发给我吗？
是的，谢谢@HamzaKhattabi，我会更新错误信息

标签： javascript reactjs typescript graphql

【解决方案1】：

用户在您的查询字段中不存在。在操场上，您调用 userWithTasks 而不是 user。当您在 gql 时发出请求时，您必须首先使用键入的参数“复制”字段，然后使用参数值。

  export const GET_DASHBOARD_USER = gql`
        query userWithTasks($id: String!){
        userWithTasks(id: $id){
        id 
        username
        biography
        goal
        tasks {
         id
         description
         completedAt
         expirationDate
        }
        }
      }`

【讨论】：