无法从 Angular 执行 GraphQL 查询答案

【问题标题】：Cannot execute GraphQL query from Angular无法从 Angular 执行 GraphQL 查询
【发布时间】：2021-03-08 17:08:33
【问题描述】：

我正在从我的 SpringBoot 后端提供 /graphql 端点，我的架构看起来或多或少像这样

type Query {
    findUsers(searchQuery: String!): [UserData]
}

type UserProfile {
    firstName: String!
    lastName: String!
}

type UserData {
    profile: UserProfile!
    mutualFriends: Int!
}

从 Intelij GraphqlJS 插件执行此查询工作正常

{
    findUsers(searchQuery:  "john doe") {
        profile {
            firstName
            lastName
        }
    }
}

但是，我无法从 Angular 执行相同的查询

我有疑问

const findUsersQuery =
  gql`
    query findUsers($searchQuery: String!) {
      profile {
        firstName
        lastName
      }
    }
`;

我是这样执行的

this.apollo.watchQuery({
  query: findUsersQuery,
  variables: {
    searchQuery: 'john doe'
  }
}).valueChanges.subscribe(({data}) => {
  console.log(data)
});

但是在服务器端，我在日志中看到了这个错误（准确地说，同样的错误返回到浏览器的 HTTP 响应）

2020-11-25 20:25:22.798  WARN 2956 --- [nio-8080-exec-3] graphql.GraphQL                          : Query failed to validate : 'query findUsers($searchQuery: String!) {
  profile {
    firstName
    lastName
    __typename
  }
}
'

【问题讨论】：

了解在 graphql 中声明变量和传递参数

标签： angular spring spring-boot graphql apollo

【解决方案1】：

将 Angular 中的查询更改为此，它正在工作。

const findUsersQuery =
  gql`
    query findUsers($searchQuery: String!) {
      findUsers(searchQuery: $searchQuery) {
        profile {
          firstName
          lastName
        }
    }
  }
`;

【讨论】：