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

错误在Graphiql上正确显示,但未返回到react前端中的Apollo客户端

Graphiql是一个用于调试和测试GraphQL API的交互式开发工具。它提供了一个用户友好的界面,可以发送GraphQL查询和变异,并查看返回的结果。当在Graphiql上正确显示,但未返回到React前端中的Apollo客户端时,可能存在以下几种可能的原因和解决方法:

  1. 网络请求问题:首先,需要确保Apollo客户端能够正确地发送GraphQL请求到后端服务器。可以检查网络请求是否成功,以及是否收到了后端服务器的响应。可以使用浏览器的开发者工具或网络监控工具来查看网络请求的状态和返回结果。如果网络请求失败,可以检查网络连接是否正常,后端服务器是否可用,以及是否存在跨域访问的问题。
  2. Apollo客户端配置问题:Apollo客户端需要正确配置才能与后端服务器进行通信。需要确保Apollo客户端的配置中包含正确的后端服务器地址和其他必要的参数。可以检查Apollo客户端的配置文件或代码,确保配置信息正确无误。
  3. GraphQL查询问题:可能存在GraphQL查询语句或变异的问题,导致后端服务器无法正确处理请求。可以检查GraphQL查询语句的语法和逻辑是否正确,确保查询的字段和参数与后端服务器的Schema定义相匹配。可以尝试在Graphiql中直接复制和粘贴GraphQL查询语句,查看是否能够正确返回结果。
  4. Apollo客户端数据处理问题:在Apollo客户端中,可能存在数据处理的问题,导致无法正确地将后端服务器返回的数据传递给React前端。可以检查Apollo客户端的数据处理逻辑,确保数据能够正确地传递给React组件进行展示。可以尝试在Apollo客户端中添加日志输出,查看数据的处理过程和结果。

总结起来,当Graphiql上正确显示,但未返回到React前端中的Apollo客户端时,需要逐步排查网络请求、Apollo客户端配置、GraphQL查询和Apollo客户端数据处理等方面的问题。根据具体情况,可以使用相关工具和技术进行调试和排查,以找到并解决问题。

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

相关·内容

redux 应用中使用 GraphQL

您需要编写自定义代码来调用服务器接口,解释数据,对其进行规范化并将其插入到存储 - 同时跟踪各种错误和加载状态。 本教程,您将学习如何通过 Apollo Client 来获取和管理数据。...有一定 React/Redux 经验——否则,请先阅读 react 教程和 redux 教程 ---- 本教程,我们将学习以下6个小节。...该页您可以看到一个如下 GraphQL 界面: ? GraphiQL 允许您测试不同查询,并立即看到从服务器获得响应。...我们只需要在客户端写一条 GraphQL 查询语句! 我们已经达成了目的。不过这个查询语句还是太简单了,如果我们想要显示所有的作者应该怎么做呢? 5....GraphQL 服务器知道了 "authors" 查询含义,让我们回到客户端

1.9K10
  • 【Graphql实践】使用 Apollo(iOS) 访问 Github Graphql API

    最近在协助调研 Apollo 生成代码是否有可能跨 Query 共享模型问题,虽然初步结论是不能,并不是预期结果,但是调研过程积累一些经验,有必要记录下。...关于 Graphql 官网 尽管只是做客户端一些实践,我还是建议你先过一遍 Graphql 官网学习指南。这样能更快速地理解概念。一些客户端文档,大部分都只是介绍基本用法。...中文版,可以直接看 http://graphql.cn/ 制作访问 Github API Token Github 中有多个 Token 概念,你需要 https://github.com/...如果看不懂我上面在说什么,说明你很可能不是一个 Web 前端,那就直接用一个基于 graphiql 开发 APP 吧: https://github.com/skevy/graphiql-app。...如果找不到最新库,可能需要更新下 pod: pod install --repo-update 写到 Xcode 里那段脚本,是不正确

    1.4K00

    你不知道 GraphQL

    你会发现借助于GraphQL工具链,这并不比开发Rest客户端难多少。 一切从Schema开始 当我开发一个GraphQL服务时,我总会从白板设计模型开始,而不是上来就写代码。...我会和产品和前端开发团队一起来讨论需要提供哪些数据类型,查询或更新操作。如果你了解领域驱动设计方法[4],你会很熟悉这个流程。前端开发团队拿到服务端返回数据结构之前是没有办法开始编码。...如你所见,我们很容易就做到从不同数据源聚合数据,客户端根本不知道数据来自于哪里 - 这一切都隐藏在resolver。...客户端用户可以看到到底发生了什么事儿。 但这种响应显示错误信息简单处理,并没有服务端记录错误日志。...日志 除了数据和错误外,graphQL响应还可以包含extensions类信息,你可以在其中放你想要任何数据。我们用它来显示服务耗时信息再好不过了。

    3.3K20

    解读GraphQL|洞见

    3.2 现代场景难于维护 虽然REST目标是易于维护和扩展,但在Web前端/客户端领域,它表现并没有想象得那么好。我们经常说最明显Code smell就是重复。...Github在他们网页里内嵌了一个GraphiQL——Facebook提供GraphQL开发工具,它本质是一个React组件,通过它,我们可以不构建代码直接阅读查询文档,调试我们查询。...但是由于整个请求还是一次HTTP请求完成,理论我们也有Batch为一个查询能力,就像许多ORM有一些惰性特性,可以将多个查询过滤语句合并成一条查询一样。 ?...其中一个是Meteor团队推出Apollo Data,它提供了一系列服务端以及客户端工具来简化GraphQL开发,容易上手并且支持Android、IOS、React(Native)以及Angular2...(图片来自:http://t.cn/R6qcOfq) 我们将会从Apollo开始,感受GraphQL究竟是如何工作,之后我们也会看到这个方案一些问题,而这些问题会将我们引向更深层Web客户端问题

    1.1K70

    PayPal大规模采用GraphQL探索和实践

    GraphQL 帮助解决了这个问题,因为它允许我们一次往返获取所需一切。 使客户端保持最新:我们 REST API 中大量使用 API 版本号。...更容易测试:Apollo Client 等 GraphQL 工具可以更容易地 React 等 UI 添加 GraphQL 查询。它有助于保持代码位于同一位置,并有助于调试和分离关注点。...通用库包括用于日志记录插件、用于数据分类指令、Apollo 和 playground 插件、CLI、异常类和 Apollo graph 变体。 前端和后端模板示例程序。...曝光和招聘:社区许多人对 GraphQL 感到兴奋,它帮助我们吸引人才加入 PayPal。我们团队成员很高兴能在社区中分享他们学习成果,并一直会议发言、撰写博客文章和制作教学资源。...我们前端开发人员立即看到了使用 GraphQL 好处。说服 UI 团队工作后端开发人员也很容易。他们理解使用 GraphQL 进行编排力量。

    3.1K20

    写在 2021: 值得关注学习前端框架和工具库

    [1], 有很奇妙感觉,因为我最开始入门前端时,也是以Vue入门,“学完”Vue之后, 我也有了类似的疑问,但当时我没多想,觉得“技多不压身”,反正都是前端,以后肯定用得上,那就学呗。...虽然这样也造成我目前没有特别深入方向,比如21届大佬们工程化、微前端、AST、NodeJS等等方向都已经开始深耕,我还在追着各种新框架学当弟弟,但不得不说,在学习新事物过程,你会逐渐对这些框架进行分类...你可能同样犹豫要不要学这玩意,我意见是:学!因为确实NodeJS目前没有特别全面的框架(虽然NestJSSpring面前也是弟弟)。...Client Apollo-Client[35],来自ApolloGraphQL[36]作品,只有React版本是官方团队维护,Vue版本被挪到Vue团队了(VueUI有一部分就是基于Apollo-Client-Vue...TS这个工具主要能力就是生成TS类型定义,同时它插件体系还提供了更多额外能力,如Apollo-Client插件,让你可以直接使用封装好useXXXQuery等,前端连查询语句都不用写了

    4.2K10

    为什么我使用 GraphQL 而放弃 REST API?

    如果你客户端和 / 或服务器编程语言是静态类型,并且你不能用错误字段名或类型构造对象,那可能没问题。...客户端或服务器所有验证逻辑,你确定都是正确吗?理想情况下,你希望它在两边都得到验证,对吧?维护所有这些自定义代码非常有趣。或者保持 API JSON 模式是最新。...事实,我发现 GraphiQL 是不可或缺。它可以帮助解决我前面提到客户端和服务器团队之间沟通问题。...不再有多个重量级查询发送到一个刚性 REST API,为了让客户端可以应用程序 UI 中一次性显示它。你不再受限于一组端点,而是有一个可以查询和修改模式,能够挑选客户端指定字段和对象。...由于 Apollo 客户端库架构简单,我能够将一个使用 React.js 与 Redux 应用慢慢过渡到 React Apollo,一个组件一个组件,只在有意义时候才这样做。

    2.3K30

    GraphQL是API未来,但它并非银弹

    他绝对是对,API 版本太多会使跟踪变得非常困难。然后他总结道, GraphQL ,graph 只有一个版本,变更可以模式注册表中跟踪,这是 Apollo 一个付费功能。...我猜他想说是,部分响应需要有人实现。实际,这与你 GraphQL 从一个资源里选择子字段非常类似。 GraphQL ,这是个开箱即用特性。 另一方面,对于 BFF 方法,你不需要这样。...显然,REST API 用例也需要客户端逻辑来处理部分响应。这个逻辑与 GraphQL 用例逻辑几乎完全相同。 REST 响应,你也可以返回有关失败原因特定信息。...设法从接口定义规范生成一个 React.JS 客户端。与 GraphQL 客户端提供体验相比,这种体验糟透了。没有人想出一个好商业模式来解决这个问题。...服务器渲染 Web 应用程序,Hypermedia API 发挥了并将继续发挥重要作用。然而,网络向前发展。用户希望从网站获得一种原生体验。Jamstack 正在接管前端

    2K10

    怎样使用 apollo-link-state 管理本地数据

    解决问题基础 我们知道这个问题需要解决,现在让我们思考一下,如何正确 Apollo Client 管理状态?...事实,GraphQL 具有很强灵活性。GraphQL 并不在乎请求是要发送给一个 gRPC 服务器,或是 REST 端点,又或是客户端缓存。...为了避免这点,我们希望能将数据模式构建转移到项目的构建阶段,从而达到对类型校验支持,并也可以用到 GraphiQL 各种很酷功能。...我们会写一些 React 组件,使得某些常见需求实现不再繁琐,譬如在代码层面上允许直接将程序变量作为参数传递给某个 mutation 当中,然后在内部直接以 mutation 方式实现。...如果你对上述问题感兴趣,可以 GitHub 加入我们开发和讨论,或者进入 Apollo Slack #local-state 频道。欢迎你来和我们一起构建下一代状态管理方法!

    2.4K100

    写在2021: 值得关注学习前端框架和工具库

    虽然这样也造成我目前没有特别深入方向,比如21届大佬们工程化、微前端、AST、NodeJS等等方向都已经开始深耕,我还在追着各种新框架学当弟弟,但不得不说,在学习新事物过程,你会逐渐对这些框架进行分类...Client Apollo-Client,来自ApolloGraphQL作品,只有React版本是官方团队维护,Vue版本被挪到Vue团队了(VueUI有一部分就是基于Apollo-Client-Vue...TS这个工具主要能力就是生成TS类型定义,同时它插件体系还提供了更多额外能力,如Apollo-Client插件,让你可以直接使用封装好useXXXQuery等,前端连查询语句都不用写了...它提供GraphiQL就是我上面提到增强版本: Hasura还提供了前面说GraphQURL作为client,hasura-code-gen来从Hasura服务生成TS代码,所以基本可以用Hasura...在前端领域混了这几年,总结了一套前端学习精讲视频和学习路线,如果有对前端开发感兴趣伙伴,不管你是想转行,或是大学生,还有工作想提升自己能力web前端党,欢迎大家加入我前端开发交流群:603985993

    2.9K10

    构建带 Subscriptions graphql golang 后端

    现在有许多用于编写JavaScriptGraphQL客户端和服务器库和框架,其中最着名Apollo和Graphcool 。...Apollo团队还开发了针对WebSocketsGraphQL协议,该协议主要用于Apollo Client和GraphcoolSubscriptions。...它有一个简单目的: 实现GraphQLWebSocket(由所有流行GraphQL客户端使用),所以不必考虑与net/http无缝集成 与net/http无缝集成 提供访问已建立订阅简单方法,执行身份验证并向相应客户端发送更新...你可以https://github.com/functionalfoundry/graphqlwsGitHub找到它。...---- GitHub提交 bug 或 issue 。 如果您正在寻找下一个项目的React或GraphQL开发方面的帮助,我们很乐意在Functional Foundry处听到您消息。

    2.7K30

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

    一般使用时只需要知道集合里每个项目的数据 edges.node ,同时通过 GraphiQL 浏览其它可以使用数据。...我修改 starter 时踩到一个坑是复制组件时忘了修改 static query 查询语句名称,导致重名报错。 避免错误最好方式是 GraphiQL 编辑器写好运行无误再复制到组件。...避免方式同上,先在 GraphiQL 编辑器运行一遍,看看筛选结果是否正确。...创建页面 回到我们前面的查询[25],得到需要数据之后只需要对每个页面调用 actions.createPage 即可。...通过实现自定义路径基本可以了解 Gatsby 页面生成方式了。下节我会继续谈谈其它个性化配置,如草稿模式和显示上下篇博文。 草稿模式 草稿模式即可以将文章保存为草稿而不被渲染出来。

    3.2K20

    GraphQL 基础实践

    例如在 Android 或 iOS 客户端上,发版升级了一个很爆炸功能,同一个API可能为了支持这个功能而多吐一些数据。但是对于未升级客户端来说,这些新数据是没有意义,也造成了一定资源浪费。...例如 Facebook 官方 GraphQL.js。以及 Meteor 团队开发 Apollo,同时开发了客户端和服务端,同时也支持流行 Vue 和 React 框架。...调试方面,可以使用 Graphiql 进行调试,得益于 GraphQL 类型系统和 Schema,我们还可以 Graphiql 调试中使用自动完成功能。...本例,Schema 定义了 name 为 String类型,那么你就不能传 Int类型进去,此时会抛出类型不符错误。...而对于特定类型其他非共有字段,例如Videoperformers,直接选取是会有问题,因为searchMedia返回数据类型可能是所有实现了该接口类型,而在 Song类型中就没有performers

    12.8K20

    【译】Graphql, gRPC和端对端类型检验

    使用apollo-client和react-apollo简化了前端代码对缓存和数据管理。 灵活查询方式方便我们未来构建移动端以及内部应用。...React 我们并没有花费太多时间来讨论这一选择。我们团队主要经验都是构建React应用上,而且我们也没有找到任何令人信服理由来换到别的选项。...为了保证GraphQL server和前端之间类型安全,我们使用Apollo CLI代码生成器:使用命令行来生成我们所有GraphQL查询类型: React示例 我们应用需要用到三种查询:...在此基础,我们进一步使用apollo-typed-components来给每项操作生成react-apollo组件,也就是ApolloComps.tsx文件GetTodosQuery组件、CreateTodoMutation...此外,由于实现了端对端类型检验,很难出现数据错误使用或是引入向前不兼容变更。如果我们需要引入向前不兼容变更,也很容易发生变更之前决定我们系统哪些部分是需要进行修改

    3.1K20
    领券