无法使用来自 Angular 的 Apollo 查询 graphql 端点

Question

我正在使用 Angular 15 并尝试使用 Apollo 查询 GraphQL 端点。 我运行ng add apollo-angular处理所有依赖项和导入，指定端点的 uri 和 GraphQL 的正确版本，但我在尝试查询时总是收到 400 Bad Request。

我尝试在他们的工作室网站 (studio.apollographql.com) 上运行相同的查询，连接到本地 graphql 服务器，它运行完美。

这是在工作室中工作的查询：

query test($limit: Int, $offset: Int){
  Cryptocurrency_GET(limit: $limit, offset: $offset) {
    _id
    _type
  }
}

这就是我在 GraphQL 游乐场中使用它的方式：

  Cryptocurrency_GET(limit: 10, offset: 0) {
    _id
    _type
  }

这就是我尝试从 Angular 访问它的方式：

return this.apollo.watchQuery({
  query: gql`
    query test($limit: Int, $offset: Int){
      Cryptocurrency_GET(limit: $limit, offset: $offset) {
        _id
        _type
      }
    }
  `,
  variables: {
    limit: 10,
    offset: 0
  }
})
.valueChanges.subscribe(({data}) => {
  console.log(data.test)
});

这些是我的（相关的）依赖项：

"dependencies": {
  "@angular/cdk": "^15.1.1",
  "@angular/common": "^15.1.0",
  "@angular/compiler": "^15.1.0",
  "@angular/core": "^15.1.0",
  "@angular/forms": "^15.1.0",
  "@angular/material": "^15.1.1",
  "@angular/platform-browser": "^15.1.0",
  "@angular/platform-browser-dynamic": "^15.1.0",
  "@angular/router": "^15.1.0",
  "apollo-angular": "^4.2.0",
  "chart.js": "^4.2.0",
  "graphql": "^15.8.0",
  "graphql-tag": "^2.12.6",
  "rxjs": "~7.8.0",
  "tslib": "^2.3.0",
  "zone.js": "~0.12.0",
  "@apollo/client": "^3.0.0"
}

如果需要任何额外信息，请询问。

非常感谢你！

Answer 1

一点点挖掘，我找到了答案：Apollo 正在向查询中添加一个 __typename。 只需在 inMemoryCache 配置中指定 addTypename: false ，如下所示：

cache: new InMemoryCache({
      addTypename: false,
    }),