Angular Apollo GraphQL Devtools 选项卡不可见

Question

我正在使用 Angular 7 和 Apollo GraphQL 客户端开发一个应用程序，我正在尝试将 client devtools 用于 Chrome。如果我正确理解文档，我唯一要做的就是在非生产环境中运行我的应用程序，Apollo 选项卡将出现在 Google Chrome 开发工具中.

不幸的是，这没有发生。 Apollo Devtools 图标出现在我的浏览器上，但 Apollo 选项卡没有出现在 devtools 上。

我是不是缺少一些配置？

我还尝试强制显示开发工具，方法是将：connectToDevTools: true 添加到我的 GraphQL 模块（下面的代码），但这并没有解决问题。

const uri = environment.graphqlURL; // <-- add the URL of the GraphQL server here
export function createApollo(httpLink: HttpLink) {
  return {
    link: httpLink.create({uri}),
    cache: new InMemoryCache(),
    connectToDevTools: true
  };
}

@NgModule({
  exports: [ApolloModule, HttpLinkModule],
  providers: [
    {
      provide: APOLLO_OPTIONS,
      useFactory: createApollo,
      deps: [HttpLink],
    },
  ],
})
export class GraphQLModule {}

Answer 1

我发现了问题所在：当我尝试从 Angular 开发服务器 (localhost:4200) 使用我的 Graphql 端点时出现 CORS 错误，所以我创建了一个代理指向我的端点：

{
  "/graphql/*": {
    "target": "https://my-endpoint/",
    "secure": false,
    "logLevel": "debug",
    "changeOrigin": true
  }
}

并将 Graphql URL 更改为：http://localhost:4200/graphql。通过这个我能够解决我的 CORS 问题，但是 Apollo Dev Tools 似乎也使用 /graphql URI。

所以我将代理配置更改为：

{
  "/stg_graphql/*": {
    "target": "https://my-endpoint/graphql",
    "secure": false,
    "logLevel": "debug",
    "changeOrigin": true,
    "pathRewrite": {
      "^/stg_graphql": ""
    }
  }
}

并将 graphql 指向：http://localhost:4200/stg_graphql。当我这样做时，一切都开始工作了。

注意：到运行开发服务器和我正在使用的代理：ng serve --proxy-config proxy.config.json.

Angular Apollo GraphQL Devtools 选项卡不可见

Angular Apollo GraphQL Devtools tab invisible

apollo

graphql

apollo-client