问题标签 [apollo-angular]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
3 回答
714 浏览

angular - 如何加载运行时配置并在角度模块中使用它?

遵循Apollo Angular 设置

src/app/graphql.module.ts

这为我们提供了一个硬编码的 URI 变量,它显然不能在本地开发之外工作。我希望能够通过在运行时加载配置文件来更改 URI,而不是构建时间(即不使用 environment.ts)。在使用 Angular 阅读运行时环境配置之后,这似乎是一种合理的方法。

资产/config.json

将在部署时覆盖的本地开发的默认配置

src/app/app-config.service.ts

src/app/app.module.ts

所以我的问题是,我如何使用AppConfigServiceinGraphQLModule来获取工厂函数apiUrl并将其设置为uri工厂createApollo函数?

0 投票
1 回答
246 浏览

angular - apollo-angular 中的令牌刷新错误

我正在使用 apollo-angular 构建一个前端应用程序。在我的应用程序中,我使用带有短期访问令牌和长期刷新令牌的 JWT 身份验证系统(它们在仅 HTTP cookie 中传输,而不是开始存储在 HTTP 标头中)。

当我运行我的应用程序时,我可以成功登录,但是当访问令牌过期时,我收到以下错误并且在我的浏览器上看不到任何内容。
Error: Network error: Cannot read property 'refresh' of undefined at new ApolloError

我的代码如下:

GraphQLModule(在AppModule中导入)(部分基于this question

身份验证服务

编写这些代码是为了实现以下应用流程:

  1. 用户尝试登录(通过 graphql 突变发送认证信息)
  2. 后端服务器将访问令牌和刷新令牌发送到前端应用程序
  3. 用户尝试发送一个graphql查询,其结果根据用户是否经过身份验证而变化(未经过身份验证的用户也可以看到查询的结果)
  4. 前端应用检查用户是否登录以及访问令牌是否过期
  5. 如果用户已登录并且访问令牌已过期,则前端应用程序会发送带有 graphql 突变的刷新令牌,以在原始查询之前获取新的访问令牌
  6. 在新的访问令牌发回后发送原始查询

我正在使用 Angular8 和 apollo-angular 1.8.0。

我对 Angular 很陌生,所以我可能会遗漏一些非常简单的东西;(
提前谢谢你!

0 投票
2 回答
1090 浏览

angular - Apollo Client (Angular) 中的两个端点

初学者在这里。虽然使用执行“ng add apollo-angular”时使用的默认结构使用单个端点工作正常,但使用 APOLLO_NAMED_OPTIONS 添加第二个端点时,我收到两条神秘的错误消息。可能出了什么问题?

这是我的 graphql.module.ts 文件

这是GqlApolloInterfaceService,我使用客户端

最后,我的 package.json

我得到两个错误:第一个只显示在第一个,只要我在提供者列表中添加第二个 pbject:

错误错误:未捕获(承诺):不变违规:要初始化 Apollo 客户端,您必须在选项对象中指定“缓存”属性。

然后,如果我刷新页面,我会得到一个不同的页面:

ERROR 错误:未捕获(承诺中):错误:NG0200:DI 中检测到 GqlApolloInterfaceService 的循环依赖错误:NG0200:DI 中检测到 GqlApolloInterfaceService 的循环依赖

我刚开始使用 Apollo Client,所以它可能非常简单,但是,我得到的印象是文档非常模糊,并且没有付出太多努力来制作它。可能会发生什么,最重要的是,我怎样才能让它发挥作用?

问候!

0 投票
0 回答
526 浏览

javascript - 在 Angular 聊天组件中使用 apollos subscribeToMore 方法进行订阅时,未处理的 GraphQL 订阅错误

问题描述

我有一个 angular 聊天组件,它通过 graphql 查询从后端获取消息。在同一个查询中,当通过 graphql 突变添加新消息时,我订阅更新。

消息订阅被编码为聊天组件的一个方法,以便我可以在组件第一次渲染时在角度生命周期方法中调用它。

这是根据 apollo 中的文档进行订阅的常用设置: https ://apollo-angular.com/docs/data/subscriptions

当我调用将订阅编码到其中的方法时,我收到以下错误:

"Cannot use GraphQLSchema "[object GraphQLSchema]" from another module or realm. 确保 node_modules 目录中只有一个 "graphql" 实例。如果不同版本的 "graphql" 是其他依赖模块的依赖,使用 " resolutions”以确保只安装一个版本。 https://yarnpkg.com/en/docs/selective-version-resolutions 不能同时使用重复的“graphql”模块,因为不同的版本可能具有不同的功能和行为。来自另一个版本的函数中使用的数据可能会产生令人困惑和虚假的结果。”

我知道错误来自该方法的调用,当我注释掉调用时,错误消失了。订阅不查询后端,所以我知道问题出在客户端。

预期行为

当用户在聊天中发送新消息时,通知服务器订阅解析器(服务器端)发生消息更新,它会将所有消息实时回传到前端,并且消息应该是通过 subscribe to more 方法返回。

我为解决此问题而采取的步骤

我试着看看这个问题: Duplicate "graphql" modules cannot be used

这导致我这个链接: https ://github.com/graphql/graphql-js/issues/491

对于使用yarn作为包管理器的人来说,有一个解决方法,但这并不关心我,因为我使用npm。

我想也许有一个重复的 graphql 模块,所以我尝试清理我的 package.json 文件,删除节点模块并重新安装它们,但这没有用。

代码示例

聊天组件

}

package.json 文件中的依赖项

客户端订阅设置根据 apollo 文档进行编码:[参见客户端设置] ( https://apollo-angular.com/docs/data/subscriptions )

我没有包含服务器端代码,因为 subscribeToMore 在发送新消息时从不发回数据,因为它遇到了描述的错误。我正在使用 Angular v 10.1.6。

0 投票
1 回答
19 浏览

apollo - Apollo gql:当一个有效而一个失败时,我如何处理捆绑查询?

我们正在使用 Apollo Angular Client 来调用 Apollo Server。我将两个查询组合在一起。其中一个失败了。

在服务器端,其中一个解析器抛出错误。

当其中一个调用失败时,我应该如何处理客户端的响应?我想使用来自一个查询的数据,并为失败的数据显示一条错误消息。

我什至不确定这是服务器端问题还是客户端问题?我猜我在服务器端做错了什么,因为我什至没有看到在操场上传回的成功数据。

0 投票
1 回答
223 浏览

angular - Apollo-Angular 查询返回奇怪的行为

我正在尝试将 Angular 与 GraphQL 后端连接起来。

但是,当 angular-apollo 从 GraphQL 请求数据时,数据正在正确发送,但是当我想访问它时,它返回undefined.

在下面的代码中,updateItems()工作正常但getItems()不是。

getItem(name)中,console.log(result.data)调用在控制台中显示:

这是正确的,但是当我尝试记录itemhistory它时显示undefined。我也无法访问result.data.item,因为它不存在。

有谁知道问题是什么?我感谢每一个答案。

0 投票
1 回答
278 浏览

angular - 如何删除 Apollo-Angular 及其所有依赖项?

在我安装了 apollo-angular 和 @apollo/client 之后,我决定不再需要它们,但是使用“npm uninstall apollo-angular”和“npm uninstall @apollo/client”只会删除 apollo-angular 和 @apollo/客户文件夹。我想从所有与 Apollo 相关的东西中清理我的项目。

尝试对 node_modules 中的所有其他 apollo 文件夹(apollo-cache、apollo-client、apollo-link、apollo-utilites 和许多其他)进行“npm 卸载”绝对没有任何效果。

我也尝试过手动删除文件夹,但我遇到了一些授权问题(我也认为这不是正确的方法)。

0 投票
0 回答
86 浏览

graphql - 如何在 apollo-angular 查询 Promise 中获取网络错误

我正在使用 apollo-angular,我试图弄清楚如何在我的 graphql 查询返回的 Promise 中获取网络错误。目前,我以这种方式发送查询:

但是当我遇到网络错误时,什么都不会返回。我可以在 graphql 模块的中间件中收到此错误,但是如何在查询 Promise 中返回此错误?

0 投票
0 回答
97 浏览

angular - Apollo Angular 没有应用现有的 http 拦截器

我添加了一个 Angular 客户端来与 GraphQL 后端交互。

源代码在这里

在这个 Angular 项目中,我使用Apollo Angular发送查询,并且我还使用Auth0 Angular SDK来处理身份验证和授权。

我按照官方 Apollo Angular 指南添加了GraphQLmodule,我必须自己添加Authorization标题。

在 Http/Rest 情况下工作的原始 HTTP 拦截器在这里不起作用。

我认为 Apollo Angular 也依赖于 Angular HttpClientModule,但为什么我必须 Authorization手动设置呢?

0 投票
0 回答
138 浏览

javascript - GraphQL Angular Apollo 客户端 - 根据 HTML 中的复选框值使用动态字段进行查询

下面是角度 HTML 和组件逻辑,在具有两个复选框的表单上单击“提交”时从 html 调用“doGetQuerySpecific()”方法。我需要将这些复选框逻辑映射到 GQL 查询,如组件代码中所示。我想实现的逻辑在下面以某种方式得到满足,但这是最佳方式吗?除了使用 if 和 else if 条件之外的任何其他方式!!!

我的 .HTML:

我的 .ts 代码: