问题标签 [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 投票
0 回答
307 浏览

angular - 上传带有 Apollo-angular GraphQL 突变的文件

我正在尝试使用 Angular Apollo 库通过 graphql 突变上传文件,但它不起作用。这是我的 GraphQL 突变:

0 投票
1 回答
1564 浏览

angular - angular 的 Apollo 客户端:从 graphql 文件生成代码

我从这里了解了angular graphql 代码生成器。我正在尝试在我的项目中使用它来生成 angular 的 graphql 类型和服务。Query

我的 codegen.yml 文件如下所示。

我有一个apps\myGraphQLApp\src\gqls\myBooks.graphql包含以下内容的 graphql 文件

我正在运行npx graphql-codegen --config codegen.yml,它失败并出现以下错误。

我的 graphql 服务器肯定公开了一个查询根,我可以用不同的客户端调用它。

我不确定我做错了什么。任何帮助将不胜感激。

0 投票
0 回答
35 浏览

angular - 用于 Angualr、React、React-Native 的通用 apollo 客户端

嗨 Stack Overflow 社区:

我正在考虑构建一个与 GraphQL 服务器对话的库,获取一些数据并进行一些转换。我有客户想要使用这个库,但他们使用不同的 JS 框架/库 - Angular、React/React-Native。

所以理想情况下,我只想为所有客户使用一个包(我对 Angular 和 apollo 还很陌生)。

这是我的困惑:

我简要地查看了两者,我发现这apollo-client是一个延迟加载反应组件的核心包。

虽然apollo-angular取决于apollo-client并提供与角度相关Link的东西。

问题一

我很困惑为什么 Angular 需要它的特定链接和缓存?Angular 不能简单地使用常规的

问题二

好像我必须做两个包(一个是反应用户,一个是 Angular 用户)?有什么方法可以为所有 JS 用户使用核心apollo-client和构建?

0 投票
2 回答
136 浏览

angular - 使用接口构建 graphql 查询

是否可以使用现有接口构建 graphql 查询?或者我们应该写两次相同的代码)

例如在我们的文档中

然后在查询中写入相同的字段

有没有办法写类似的东西

0 投票
1 回答
265 浏览

angular - 异步 setContext 中的身份验证等待

在文档(https://www.apollographql.com/docs/angular/recipes/authentication/)中有一个例子。但是,如果您有一个 angular-apollo watch().valueChanges 或 fetch() 作为返回的 Observable,这不起作用...

我的代码是:

authService.refreshToken() 方法返回这个:

问题是,不能调用订阅,这将启动 Observable。你有解决方案吗?

0 投票
1 回答
615 浏览

angular7 - node_modules/apollo-angular/Apollo.d.ts(26,17) 中的错误

我正在开发 Angular 7 项目,该应用程序部署在 Azure App Services 和 Pipeline 中,用于 Azure DevOps 上的相同。它基本上是 CI/CD。一切都很好,分支代码合并(代码集成)和部署(代码部署 - 管道)但突然我在 node_modules/apollo-angular/Apollo.d.ts(26,17) 中收到错误:错误 TS1086:访问器不能在环境上下文中声明此错误。有人可以在这里帮助我理解和解决问题吗?

阿波罗 Angular 版本 - 1.3.0

版本

0 投票
0 回答
757 浏览

angular - GraphQL 需要多个变量不能与 Angular-Apollo 一起正常工作

我首先要说,我挣扎的时间比我的骄傲想要承认的要长,并且推迟了询问,因为我不确定我会变得多清楚;但是,这里有。. .

我将 Angular 9 与 Apollo-Angular 一起使用,并且在访问没有变量或只有一个变量的 GraphQL 查询时没有问题。如果我添加多个,我绝对不成功。我创建了一个简单的服务,允许我创建动态查询,所以我有一个看起来像这样的变量类型: 在此处输入图像描述

Apollo-Angular 客户端将其视为下图中显示的类型。从我在文档中看到的所有内容来看,Apollo-Angular 应该能够获取任何给定的对象并将其转换为适合查询的执行,但同样……我还没有使用多个变量来实现这一点。 在此处输入图像描述

调用查询时,它看起来像这样:

在此处输入图像描述

这会在调试控制台中产生以下输出:

在 Chrome 中,这是正在执行的: 在此处输入图像描述

如果我将 Chrome 中显示的完全相同的内容复制到 GraphQL Playground 中,它会返回“无法解析变量。请转到变量编辑器并修复语法问题”</p>

我已经尝试了几个小时试图通过 WatchQuery 变量属性发送不同的方式。如果我尝试使用 JSON.stringify 将多个变量作为字符串发送,它在 Chrome 中显示如下: 在此处输入图像描述 在此处输入图像描述

如果我真的手动输入一个静态值,我从一开始就会遇到同样的问题,“无法解析变量……”</p>

在此处输入图像描述

如果我在操场上运行完全相同的东西……但只需添加引号(Chrome 中没有显示),我就成功了:

在此处输入图像描述

据我所知,无论我如何从 Appllo-Angular Query Watch 变量属性发送它,我都无法正确发送它。它发送正确的唯一时间是我只使用一个变量并且该变量恰好是一个整数。

有没有我可以/应该采取的替代方法?我只是在做这绝对不正确吗?

我的具体问题是使用 Angular 和 Apollo-Angular:

  1. 如何为 GraphQL 查询发送多个变量(first、order_by、where 等)?
  2. 如何在这些变量之一中发送多个项目(例如:“order_by”:“customerName.ASC、accountNumber.DESC、startDate.DESC”)?

编辑:我刚刚在GraphQL Specs中发现了这个:

我在想这意味着我需要在后端(.net core、EF.core 和 Hot Chocolate)中添加一个 InputType,它将在架构中生成一个 Input Type。我还没有弄清楚,但至少已经给出了一条新的冒险之路。

编辑:我的每种类型都有其中一种用于变量(唯一会改变的是括号中的内容“Get[AVOs]Variables”、“[AVO]Sort”、“[AVO]Filter”

“[x]Sort”是一个字符串,即:[fieldName].ASC 或 [fieldName].DESC,无论类型如何。过滤器的工作原理类似。我希望尽可能创建最通用、可重用的版本,以防止克隆相同的代码结构只是为了更改类型名称。

编辑:我能够通过这种方式编写变量来使变量正常工作,而不仅仅是尝试在一行中发送对象:

0 投票
1 回答
1322 浏览

angular - Apollo Codegen No operations or fragments found to generate code for

I am trying to setup an apollo project to learn a bit how it works.

I downloaded graphQL nodeJS template from node-graphql-server

I setup a simple angular9 application using apollo-angular

I run the server, and I wanted to autogenerate the type in my angular app.

I ran the code command

I tried to setup some

But I keep getting apollo.config.js

and played with the command, but I keep getting the same error over and over.

How can I generate the server types ?

0 投票
2 回答
429 浏览

angular - 如何使用 Apollo Angular 测试查询、变异、订阅服务?

我看到了如何在 Angular 中测试 apollo的示例,并且基本上只使用ApolloTestingModule进行测试。我的测试看起来像:

测试服

服务

问题

我想使用使用 查询、变异、订阅服务的方法,但是使用这种方法测试不起作用。

错误

对我来说,这个错误是有道理的,因为在Query 类的官方实现中,方法 fetch 和 watch 使用的是 Apollo 服务提供的use 方法。

问题

  • 是否可以替代测试 apollo 提供的此类服务?
  • 如果我想使用这种方法,我应该将它作为一项基本服务进行测试?

我等你的答案

0 投票
1 回答
145 浏览

caching - 在一个中等复杂的用例中,策略处理和使订阅的缓存数据失效

让我们以聊天应用程序为例。用户可以访问多个聊天线程,每个线程都有多条消息。用户界面由左侧的线程列表 ( listThreads) 组成,其中包含对方的姓名、最后一条消息、未读消息计数和最后一条消息的日期和时间,以及实际消息 ( viewThread) 和右侧的回复框(想想 facebook messenger)。

当用户选择一个消息线程时,viewThread组件订阅一个查询,如下所示:

为了进行实时更新,它q.subscriptToMore通过以下方式订阅:

这完美地工作,新消息按应有的方式显示。

为了列出可用的消息线程,查询所有线程的不太详细的视图:

为了使列表保持同步,使用相同的订阅,而不过滤thread_id,并且手动更新线程列表数据

这也很好用。

但是,如果选择了一个线程,则会缓存该线程A的消息。A如果B之后选择线程,则获取线程详细信息的查询的订阅将A被销毁,因为当路由器退出viewThread组件时,可观察对象被销毁。

A如果在用户查看线程时消息到达线程BthreadList则更新(因为该订阅是实时的),但如果用户切换回线程A,则从缓存中加载消息,这些消息现在已过时,因为没有订阅将更新或使缓存无效的特定消息线程。

在用户导航到完全不同的页面的其他情况下,线程列表不会出现在视图中,问题更加明显,因为没有任何与积极订阅的聊天消息相关的内容,因此没有任何内容可以使缓存数据无效当有新消息到达时,尽管服务器理论上提供了一种通过提供新消息订阅事件来做到这一点的方法。

我的问题如下:

保持 Apollo 缓存的数据同步/无效的最佳实践是什么,这些数据并未积极“使用”?保持嵌套数据同步的最佳实践是什么(事件线程的消息 [见下文])。我觉得不必在事件查询中实现有关如何订阅和更新消息数据的逻辑是一个干净的解决方案。

使用.subscribeToMore可以使积极使用的数据保持同步,但是一旦不再使用该查询,数据就会保留在缓存中,这些数据可能会随着时间的推移而过时,也可能不会过时。当可观察对象超出范围时,有没有办法删除缓存的数据?只要至少有一个查询使用它,就保持这些数据缓存,因为我相信它还实现了基于服务器推送事件保持同步的逻辑。

是否应该使用订阅(通过 SPA 的整个生命周期)所有订阅事件并包含有关如何更新每种类型的缓存数据(如果存在于缓存中)的知识的服务?(可以通知该服务哪些数据需要保持同步以避免使用不必要的资源)(如在订阅所有newMessage事件并基于此戳缓存的服务中)?这会自动为返回的对象引用此类数据的查询发出新值吗?(更新是否message:1会使在其消息字段中返回相同的线程查询message:1自动发出一个新值)或者这些查询也必须手动更新?

这在扩展这个模型时开始变得非常麻烦,说Events也有自己的聊天线程,所以event { thread { messages { ... } }现在查询需要订阅newMessage订阅,这打破了封装和单一责任原则。订阅newMessage数据需要提供与事件关联的消息线程的 id 也是有问题的,但在查询返回之前这是不知道的。由于这个.subscribeToMore不能使用,因为那时我还没有thread_id可用的。