首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

ApolloClient:无法将GraphQL查询作为JS变量传递?“不变冲突:需要已分析的GraphQL文档。”

ApolloClient是一个用于构建GraphQL客户端的强大工具。它提供了一种简单而灵活的方式来管理应用程序与GraphQL服务器之间的数据交互。

关于无法将GraphQL查询作为JS变量传递的问题,通常是由于ApolloClient的缓存机制导致的。ApolloClient使用缓存来存储已经获取的数据,以便在需要时进行快速访问。当你尝试将GraphQL查询作为JS变量传递时,ApolloClient会尝试将其解析为缓存中已有的数据,而不是发送一个新的请求。

解决这个问题的方法是使用ApolloClient提供的watchQuery方法,该方法可以接收一个fetchPolicy参数,用于控制数据获取的行为。你可以将fetchPolicy设置为"network-only",这样ApolloClient将始终发送一个新的请求,而不会使用缓存中的数据。

以下是一个示例代码:

代码语言:txt
复制
import { ApolloClient, InMemoryCache, gql } from '@apollo/client';

const client = new ApolloClient({
  uri: 'https://example.com/graphql',
  cache: new InMemoryCache(),
});

const query = gql`
  query MyQuery {
    // Your query here
  }
`;

client
  .watchQuery({
    query,
    fetchPolicy: 'network-only',
  })
  .subscribe({
    next: (result) => {
      // Handle the query result here
    },
    error: (error) => {
      // Handle any errors here
    },
  });

在上面的示例中,我们使用watchQuery方法发送一个新的请求,并将fetchPolicy设置为"network-only",这样就可以解决无法将GraphQL查询作为JS变量传递的问题。

关于"不变冲突:需要已分析的GraphQL文档"的错误信息,它通常是由于GraphQL查询中存在冲突的字段导致的。这意味着你的查询中可能包含了多个字段,它们具有相同的名称但具有不同的类型或参数。为了解决这个问题,你可以检查你的查询并确保所有的字段都是唯一的,或者使用GraphQL的别名功能来区分它们。

希望以上信息对你有所帮助。如果你需要了解更多关于ApolloClient的信息,可以访问腾讯云的相关产品文档:ApolloClient产品介绍

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

在 redux 应用中使用 GraphQL

在开始本教程之前,请确保: 了解基本 GraphQL 查询——如果 GraphQL 对您来说完全是陌生,您需要先学习此教程。...将从 react-redux 中导出 connect 方法替换成从 react-apollo 中导出 connect 方法,同时 mapQueriesToProps 作为参数传入。...在 mapQueriesToProps 连接到 ApolloClient 之后,查询语句将会在 HomeView 被渲染时自动从后端获取数据,然后通过 props 数据传递下去。...我们只需要在客户端中写一条 GraphQL 查询语句! 我们已经达成了目的。不过这个查询语句还是太简单了,如果我们想要显示所有的作者应该怎么做呢? 5....不过我准备在后续教程中介绍这些内容,您可以阅读 Sashko 文章 或者 Apollo Client 文档来更好理解 GraphQL 原理 (比如,当我们把 Provider 替换成 ApolloProvider

1.9K10

GraphQL+Koa2实现服务端API结合Apollo+Vue

它弥补了 RESTful API(字段冗余,扩展性差、无法聚合 api、无法定义数据 类型、网络请求次数多)等不足 注意:GraphQL 是 api 查询语言,而不是数据库。...比如:字段冗余,扩展性差、无法聚合 api、无法 定义数据类型、网络请求次数多 GraphQL 出现整好弥补了 RESTful APi 不足 使用 GraphQL 公司 目前已经有很多公司在使用...然而 REST api 表 现得过于僵化,无法跟上访问它们客户快速变化需求 RESTful API 不足 扩展性(多个终端需要返回不同字段),单个 RESTful 接口返回数据越来越 臃肿。...查询返回结果就是输 入查询结构精确映射 客户端可以自定义 Api 聚合 如果设计数据结构是从属,直接就能在查询语句中指定;即使数据结构是独 立,也可以在查询语句中指定上下文,只需要一次网络请求...代码即是文档 GraphQL 会把 schema 定义和相关注释生成可视化文档,从而使得代码变更,直接就反映到最新文档上,避免 RESTful 中手工维护可能会造成代码、 文档不一致问题 参数类型强校验

5.1K42

GraphQL测试实践

总结下: 前端自己定义返回数据及结构,降低前后端沟通成本 无需编写接口文档GraphQL会根据schema自动生成API文档) Schema拼接,可以组合和连接多个GraphQL API,合并为一个...,减少请求次数 GraphQL是强类型,通过它,可以在执行之前验证 GraphQL 类型系统中查询, 它帮助我们构建更强大 API。...但从请求URL上我们无法辨别GraphQL到底干了什么,我需要进一步观察请求body REST api 请求POST带请求数据。同样GraphQL它也是发送POST请求,也是带数据。...但是当查询api 返回几万条,我们需要验证某一些数据与逻辑正确性时,graphiql与graphql-playground 就显得力不从心。 怎么办?...由于要遵循GraphQL 规范,并不是我们常见json对象,我们需要寻找一种能够代替supertest 发送规范化GraphQL Query 和 Mutation 请求工具,ApolloClient

2K30

GraphQL 入门详解

简介 定义 一种用于API调用数据查询语言 核心思想 传统api调用一般获取到是后端组装好一个完整对象,而前端可能只需要用其中某些字段,大部分数据查询和传输工作都浪费了。...graphQL提供一种全新数据查询方式,可以只获取需要数据,使api调用更灵活、高效和低成本。...新建schema.js文件,首先定义两个数据模型:LaunchType(发射)和 RocketType(火箭)。注意字段数据类型需要使用GraphQL定义,不能使用js基本数据类型。...我们需要定义一个root query,root query做为所有查询入口,处理并返回数据,更多请参考 GraphQL Root fields & resolvers。...store类似,react-apollo 通过 apollo client向下传递

2.1K20

用TS+GraphQL查询SpaceX火箭发射数据

Apollo 查询graphql-tag 用于构建我们查询文档graphql 是一个对等依赖项,它提供了 GraphQL 实现细节。...由于这将通过用户交互动态生成,所以需要用到 GraphQL 变量。我们还可以在 playground 上测试带变量查询。...在查询后面,你可以通过使用前缀为$及类型去指定变量,然后在查询体中,你可以使用该变量。对于我们查询,通过传递 $id 变量来设置启动id,该变量类型为String!。 ?...ID作为查询变量传递 我们传入 id 作为变量,它对应于 LaunchList 查询 flight_number。...要对发射任务列表进行分页,你获取当前列表长度并将 offset 变量传递给 LaunchList 查询。 我鼓励你更深入探索并编写自己查询,以便巩固这些概念。

3K20

GraphQL到底怎么使?看看智联前端团队技术沉淀

所以为了避免误解,后文将把 Query Document(查询文档)称为 Document 或文档。一个 Document 中可包含单个或多个操作,每个操作都可以查询补丁数量跟字段。...npm install graphql-tools graphql 上面是 Apollo 给出依赖安装命令,可以看到 graphql-tools 需要 graphql-jsgraphql作为依赖...调用合并:经常提到与 RESTful 相比较优一点是,当需要获取多个关联数据时,RESTful 接口往往需要多次调用(并发或串行),而基于 GraphQL 接口调用则可以调用顺序体现在结构化查询中...调用合并:GraphQL 理念就是多个查询合并,对应服务端,通常只会提供一个合并后“大”接口,那么原本以 URL 为粒度性能监控、请求追踪就会有问题,可能需要改为以 root field(根字段...没有 BFF 层时,由于 GraphQL 对于实现数据聚合、字段转换提供了范式,可以考虑使用 GraphQL 服务作为 BFF 层,或者结合1、2点,部分接口实现为 GraphQL作为 BFF 层一部分

2.3K20

如何在纯 JavaScript 中使用 GraphQL

例如,如果你查询需要一个变量 id(将在查询中显示为 $id),则需要按以下方式发送变量: { "id":1 } operationName 也是可选。...当查询包含多个命名操作查询时,它用于指定要运行操作。 如果你一个 GraphQL 作为一个 GET 请求发送,则需要将以上内容作为查询参数传递。...传递变量 在此示例中,我们查询具有一个需要传递变量($id)。为了传递这个变量,我们需要变量值添加到请求正文中包含数据里。...首先,我显然不需要导入一个库来支持 fetch。其次,更重要是我无法访问环境变量。...这里更好是响应对应了查询,这意味着你无需花费大量时间来分析关于响应文档。因此我们可以快速采用上面的示例并利用返回数据,而不是简单地把它摆出来。

3.5K10

在线教育直播源码中React库特性解读

当涉及到远程数据状态管理时,如果远程数据带有GraphQL端点,我建议使用ApolloClientApolloClient替代方案是urql和Relay。   ...推荐:   局部状态:ReactuseState,useReducer,useContextHooks   通过GraphQL远程状态:ApolloClient   通过REST远程状态:ReactHooksorRedux...CSSModules受到create-react-app支持,并为您提供了CSS封装到模块中方法。这样,它就不会意外地泄漏到其他人样式中。...1.2.png   其次,我想推荐是被称作为styledcomponents,作为ReactCSS-in-JS解决方案之一。...如果您有足够时间来处理GraphQLAPI,我建议您使用ApolloClient。可供选择GraphQL客户端将是urql或Relay。

1.4K40

Nest 实现 GraphQL 版 TodoList

其实也可以用 GraphQL 方式来写接口: 查询: 新增: 增删改查都在一个接口里搞定,并且想要什么数据由前端自己取。...: 输入容器名、端口映射、以及挂载数据卷,还要指定一个环境变量: 端口映射就是把宿主机 3306 端口映射到容器里 3306 端口,这样就可以在宿主机访问了。...具体增删改查实现和之前一样。 浏览器访问 http://localhost:3000/graphql 就是 playground,可以在这里查询: 左边输入查询语法,右边是执行后返回结果。...: 修改: 单个查询: 删除: 查询: 基于 GraphQL 增删改查都成功了!...相比 restful 版本,graphql需要一个接口,然后用查询语言来查,需要什么数据取什么数据,更加灵活。 业务开发中,你会选择用 GraphQL 开发接口么?

11610

GraphQL 名词 101:解析 GraphQL 查询语法》【译】

这些参数会跟它们相关字段一起被传递到服务器端执行,并影响服务器对字段处理方式。如上面的示例,参数可以是字面量,接下来还有参数作为变量形式栗子。...但是在GraphQL操作中三种可选部分都没有在上述栗子中使用。如果你不仅仅是用GraphQL执行查询操作,或是希望传递动态变量GraphQL查询中,你就需要利用到这些新GraphQL特性。...变量定义(Variable definitions):当客户端向GraphQL服务器发送查询时,会存在查询文档不变,当某些字段会动态变化情况。这些就是查询变量。...因为GraphQL是静态类型,它可以实时验证你是否传递了正确变量。这正是你声明变量类型时所计划提供能力。...变量使用特定序列化协议(在目前 GraphQL 服务实现中,通常是使用JSON )通过查询文档独立传输。

2.8K20

面对极度复杂前后端业务场景,使用 GraphQL 正确姿势

UnderFetching指从接口中取到数据远低于需要展现数据,由此引发了N+1问题,即需要根据取得接口中ID或者详细信息再去请求对应接口,这就导致了前端请求从异步变成了同步。...Node.js缺陷也很明显,比如对多端需要做额外适配,难以适应前端快速迭代,需要花费大量时间维护,由此还会引发接口文档断层。 GraphQL对于Node碰到这些问题基本上都能够很好解决。...第二点是在前期开发时候没有做请求层级限制,导致前端查询多层嵌套,服务器无法承受压力。...先来看看GraphQL还有那些弊端。 第一,虽然后端已经做了一些优化,但是还是没有完全实现前端按需查询,当数据量达到一定级别的时候,数据库查询可能会成为性能瓶颈。...第二,生态群并不完善,文档和实例缺乏,可能在google查询资料无法确切解决问题。 第三,评价一个技术实用性,不光要看技术力还要看它能否快速落地。

7.3K20

一杯茶时间,上手 Gatsby 搭建个人博客

但接下来还是会有一些小坑,第一个便是 GraphQL,我们马上来分析。 为什么用 GraphQL 在上一节介绍了选择 Gatsby 原因,其中提到了 Gatsby 使用 GraphQL 。...通过 GraphQL 统一管理实际上非常方便,因为作为一个数据库查询语言,它有非常完备查询语句,与 JSON 相似的描述结构,再结合 Relay Connections 方式处理集合,管理资源不再需要自行引入其它项目...在 Gatsby 中,根据 js 文件位置不同,使用 GraphQL 有两种形式,且 Gatsby 对其做了魔法,在 src/pages 下页面可以直接 export GraphQL 查询,在其它页面需要用...迁移博客需要考虑一个重要问题便是路径兼容。我们当然不希望迁移后原有的链接无法访问,这不仅影响到 SEO ,更带来了不好用户访问体验。本文聊聊怎么让 Gatsby 兼容 Jekyll 式路径。...坑 这里有一个地方需要注意,前面文章提过,Markdown 插件需要所有文章中都有 draft 域且都是布尔类型才会生成相应 GraphQL 查询

3.2K20

使用 TheGraph 完善Web3 事件数据检索

你可以看到以上方案不是最佳选择: 不适用于部署合约。 存储这些值需要额外 gas 费用。 需要额外调用来获取以太坊节点数据。 ? 现在让我们看一个更好解决方案。...graphql-querygif 这两个图像几乎包含了GraphQL本质。通过第二个图查询,我们可以准确定义所需数据,因此可以在一个请求中获得所有内容,仅此而已。...你可能已经猜到了,它使用GraphQL作为查询语言。 ? 示例始终是最好理解方法,因此让我们在游戏合约示例中使用TheGraph。...你需要定义subgraph.yaml文件中命名每个函数,因此在我们例子中,我们只需要一个函数:handleNewBet。我们首先尝试从发起人地址作为ID加载为为Player实体。...,你可以轻松地TheGraph集成到ReactDapp(或Apollo-Vue)中,尤其是当使用React hooks和Apollo时,获取数据就像编写单个代码一样简单在组件中进行GraphQl查询

1.6K10

来试试Graphql

GraphQL 可精准返回所需数据结果,减少数据传输大小。 嵌套复杂数据仅需一次调用 RESTful 对于嵌套复杂数据需要多次调用,而 GraphQL需要一次。...操作类型( Operation type ) 查询( query ) 更新( mutation ) 订阅( subscription ) GraphQL 实战 我一直提倡,刚开始学习一门新技术,别看太多文档...本质思想是一样, 都是先定义 GraphQL schema ,再定义 resolver ,resolver 这里从不同地方取数,再之后就是传递 schema 和 resolver,创建实例。...resolver 解析规则是, 从外到内依次处理查询块,为每一个查询块执行对应 resolver 函数,并传递外层调用返回结果作为第一个参数,也就是下面代码中 obj 。...已经成功找到对应 id 数据了,但是这里 id 是写死,我们说 graphql 最大好处是声明式获取,那如何把 id 变成一个变量,让外部传入? ?

1.9K20

如何使用 Swift 中 GraphQL

本周,我们讨论 GraphQL 好处,并学习如何在 Swift 中使用它。基础知识首先介绍一下 GraphQLGraphQL 是一种用于 API 查询语言。...这些类型定义了当前 GraphQL 端点支持所有查询和变更操作。模式文件还描述了你可以在查询中使用所有类型列表。...以下是 ApolloGraphQL 设置到项目中一些步骤:你应该使用SPM或其他包管理器 ApolloGraphQL 嵌入到你项目中。在编译源代码部分上方构建阶段添加运行脚本。...这个脚本下载模式并为你查询生成 Swift 类型。你可以在这个脚本中轻松更改 GraphQL 端点以连接到你 GraphQL 后端。我们准备好使用 ApolloGraphQL 项目。...所有需要类型都在这里,可以非常类型安全地进行 GraphQL 查询。每个请求类型都定义了其响应类型。

6400
领券