问题标签 [vue-apollo]
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.
graphql - 如何在 nuxt/apollo 中传递动态令牌?
我想使用 @nuxt/apollo 将动态令牌传递给我的 HTTP 请求的标头
我已经尝试过了:
//./nuxt.config.js 阿波罗:{
它有效,但我需要我的令牌是动态的。
vue.js - 关于父子关系和组件的问题
我目前正在尝试将一个项目从 vuex/REST 移植到 vue-apollo。该项目显示了一个事件列表,每个事件都可以展开以显示详细信息,包括与会者。
所以我有一个EventList
组件,它获取列表所需的事件和所有属性。我有一个EventDetails
从列表 onclick 扩展的子组件。EventDetails
需要一些事件数据以及要呈现的与会者列表。问题是,我找不到构建查询的优雅方法。
目前,我有一个由EventList
组件执行的事件查询:
在EventList
组件内部,我将事件 ID 传递给EventDetails
子组件,然后子组件依次查询 API 中的参与者:
父组件(简化):
子组件(简化):
这种方法的问题是,对于名为 的查询event
,我无法将已获取的事件作为道具传递,因此必须再次获取事件数据。此外,展开面板后无法立即呈现事件详细信息EventDetails
(等待查询执行)。
那么有没有办法通过 GraphQL 传入事件数据(不仅仅是 id)并仅查询与会者?我找到的唯一可能的解决方案是向attendees
GraphQL 服务器添加另一个查询,我想避免这样做,因为与会者总是分组在一个事件下,我们总是知道父事件对象。
但这在 GraphQL 领域被认为是好的架构吗?为您正在处理的每个对象类型添加一个查询类型,即使总是知道父对象并通过父对象进行查询?
我很可能在这里尝试做一些愚蠢的事情,我对 GraphQL 架构还是很陌生。
非常感谢您的帮助。
vue.js - 如何在 Vue.js 的联合中使用片段?
有谁知道我如何在工会上使用片段?我已经看过 React 的文档(https://www.apollographql.com/docs/react/advanced/fragments/#fragments-on-unions-and-interfaces),但在 Vue 上看的不多。我有一个返回两个片段的查询,两个片段都带有 __typename。
当 vue 应用程序运行时,我收到错误“您在查询中使用了片段,但要么没有在 Apollo 客户端中设置 addTypename: true 选项,要么您正在尝试在没有 __typename 的情况下将片段写入商店。” 这是我的 vue 应用程序中的代码。
我得到的错误信息是
- 您在查询中使用了片段,但要么没有在 Apollo 客户端中设置 addTypename: true 选项,要么您试图在没有 __typename 的情况下将片段写入存储。请开启 addTypename 选项,并在编写 Fragment 时包含 __typename,以便 Apollo Client 准确匹配 Fragment。
- 弃用警告:使用不带 __typename 的片段是不受支持的行为,将在未来版本的 Apollo 客户端中删除。您现在应该修复此问题并将 addTypename 设置为 true。
- GraphQL 错误:Professor 上的 Fragment 无法在 Query 中传播;GraphQL 错误:Fragment on Course 不能在 Query 中传播;GraphQL 错误:变量 $queryString 由搜索声明但未使用
- GraphQL 错误:Professor 上的 Fragment 无法在 Query 中传播;GraphQL 错误:Fragment on Course 不能在 Query 中传播;GraphQL 错误:变量 $queryString 由搜索声明但未使用
有没有人能够提供一个从 vue 中的查询中获取两个片段的示例?
vue.js - 结果Vue GraphQL上缺少电影属性
我是前端开发人员,所以我第一次接触 vue 和 graphql,我不知道该如何处理这个错误:
这是我的代码,我可以看到在 chrome 中的开发工具的响应中成功获取了数据:
这是代码:
graphql - Apollo 客户端查询不向服务器发送标头但突变很好
我将前端连接到 graphql 服务器。大多数(如果不是所有)突变都受到保护,而所有查询都不受保护。我有一个身份验证系统,如果您登录,您将获得一个访问/刷新令牌,所有突变都需要使用该令牌。他们做得很好,后端接收标题和一切!
然而。有一个查询至少需要访问令牌来区分当前用户!但是后端没有收到这两个标头!我认为我创建的 middlewareLink 将适用于所有查询/突变,但我错了,找不到任何额外的资源来帮助我。
所以这是我的设置
阿波罗客户端.js
有没有办法使用自定义标头来定位所有突变/查询而不仅仅是突变?或者将一些标头应用于单个查询,因为我可能会将其作为应用程序中间件?
编辑:还没有解决这个SSR部分..一旦我有答案,我会重新编辑。
graphql - 如何处理 Vue.JS 中的 Apollo Graphql 查询错误?
我正在将 Vue.js 与 Vue-Apollo 一起使用,并尝试使用查询来获取共享成员列表。我在后端使用 graphQL 服务。
我正在使用 apollo 'error' 函数来处理 GraphQL 错误。当使用无效输入发出请求时,我可以在网络选项卡中看到错误,我可以看到自定义错误消息的 JSON。但我无法解决“错误”功能中的错误。
这是用于获取共享成员列表的阿波罗查询 -
我得到的网络响应 -
vuejs2 - 在 vue.js 客户端合并来自不同 graphql 解析器的数据以进行简单输出
我确实使用单个查询但两个解析器(列表和列表)从 api 查询汽车(希望解析器是它的正确名称)。我通过列表获得的一辆车和我通过列表获得的其他没有过滤器的汽车。解析器在服务器端输出的数据结构略有不同,但我确实在不同的“地方”得到了相同的字段。我想合并结构以获得一个数组,我可以简单地在 vue.js 中循环。对于 apicalls,我确实使用 vue-apollo。
找不到任何信息来在 graphqlqueries 中合并数据客户端。我发现的只是用解析器在服务器端处理它,但它是一个我不拥有的 api。
是否可以使用 graphql 或者我必须将它合并到我的 vuecomponent 中,如果可以,最好的方法是什么?
输出将是一个汽车网格,我在其中展示了本周的汽车(由 id 请求)以及相关卡经销商的最新汽车。
完整截图,包括回复:https ://i.imgur.com/gkCZczY.png
仅使用 id 剥离示例以显示问题:
vue.js - 是否可以动态替换 graphql/apollo 查询中的字段以及变量?
我使用以下查询并获取值。
我可以动态使用“datetime,value10,value11”吗?
我有:
错误:[nuxt] 安装应用程序时出错:语法错误:预期名称,找到 $