在一次调用中发送 2 个相同但变量不同的 Graphql 查询

Question

我有一个搜索查询，它接受一个变量并基于该变量进行搜索。

在我的主页上，我想使用 3 个不同的变量发送此查询 3 次。

但是如果我按照上面的方法做，我得不到结果。

这里是查询：

const TOP_TEACHER_QUERY= gql`
    query topTeachers {
        searchBasicTeachersByRating(rating: 3) {
            id
            name
            title
        }
        searchBasicTeachersByRating(rating: 4) {
            id
            name
            title
            isNew
        }
    }
}

这是函数

allQueries() {
    return this.apollo
        .watchQuery<any>({
            query: TOP_TEACHER_QUERY,
        })
        .valueChanges;
}

注意：

我试过添加接口并定义想要的响应数据，但是没有效果

interface Response {
    searchBasicTeachersByRatingMedium: Student[];
    searchBasicTeachersByRatingHigh: Student[];
}

allQueries() {
    return this.apollo
        .watchQuery<any>({
            query: TOP_TEACHER_QUERY,
        })
        .valueChanges;
}

数据仅包含一个以查询命名的列表 (searchBasicTeachersByRating)

我在 graphql playground 中尝试了以下查询，它 returns 2 个数组但是在Angular我只能得到一个

作为解决方法，我在后端创建了新查询，或者发送了 2 个不同的查询。

但我想要这种方法的解决方案。

提前致谢

Answer 1

当一个选择集多次包含同一个字段时，您需要为重复的字段使用别名：

searchBasicTeachersByRatingMedium: searchBasicTeachersByRating(rating: 3) {
  id
  name
  title
}
searchBasicTeachersByRatingHigh: searchBasicTeachersByRating(rating: 4) {
  id
  name
  title
  isNew
}

请求完成后，每个字段将在 data 上以提供的别名作为属性可用。在上面的示例中，我们为两个字段设置了别名，但您可以省略其中一个字段的别名。

在一次调用中发送 2 个相同但变量不同的 Graphql 查询

Send 2 identical Graphql queries in one call but with different variables

apollo

reactjs

graphql

apollo-client

angular