开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Graphql订阅不能从react本地主机客户端运行

GraphQL订阅是一种用于实时数据传输的技术，它允许客户端通过订阅特定的数据源来接收实时更新。在使用GraphQL订阅时，通常需要在服务端实现订阅功能，并在客户端建立与服务端的WebSocket连接以接收实时数据。

对于无法从React本地主机客户端运行GraphQL订阅的问题，可能有以下几个原因：

WebSocket支持：首先需要确保你的React应用程序所运行的浏览器环境支持WebSocket。WebSocket是一种用于在客户端和服务器之间进行双向通信的协议。如果浏览器不支持WebSocket，那么无法建立与GraphQL服务端的实时连接。
GraphQL订阅实现：GraphQL订阅功能的实现通常需要使用特定的库或框架，例如Apollo Client、Relay等。你需要确保你的React应用程序中使用的GraphQL客户端库支持订阅功能，并正确地配置和使用订阅API。
服务端实现：GraphQL订阅功能需要在服务端进行相应的实现。服务端需要能够理解和处理GraphQL订阅的请求，并将实时数据推送给客户端。你可以使用各种后端框架或工具来实现GraphQL订阅，例如Apollo Server、GraphQL Yoga等。具体的实现方式和配置可能因框架而异，你需要参考相应框架的文档进行配置和使用。

综上所述，要使GraphQL订阅能够从React本地主机客户端运行，你需要确保浏览器环境支持WebSocket，选择一个支持GraphQL订阅功能的GraphQL客户端库，并在服务端正确地实现和配置GraphQL订阅功能。同时，如果你需要在腾讯云上使用GraphQL服务，可以考虑使用腾讯云的云原生服务SCF（Serverless Cloud Function），该服务提供了灵活高效的无服务器计算能力，并且可以与其他腾讯云产品集成，满足各种场景下的需求。详情请参考腾讯云SCF产品介绍：https://cloud.tencent.com/product/scf

相关搜索:minio客户端可从本地运行，但不能从docker容器运行在阿波罗客户端GraphQL React应用程序中添加对特定路线的订阅如何使用Apollo Graphql React客户端访问本地解析器中的获取策略 react-app未在本地主机上运行:3000/*github链接*React路由在本地运行，但不能在我的虚拟主机上运行 Parcel/React应用程序可在本地主机上运行，但不能在服务器上运行使用在本地主机上运行的API从react应用程序发出http请求 React应用程序-文件上传可在本地主机上运行，但不能在nginx服务器上运行如何在本地主机中打开静态网站，但使用Vite生成，而不运行服务器？如果不指定本地主机，python3 manage.py运行服务器将无法工作客户端无法找到socket.io时，运行我的网站从在线主机，但工作从本地主机(我会给你$10，如果你帮我解决这个问题)

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

GraphQL在现代Web应用中的应用与优势

编写前端组件现在，我们在React组件中使用Apollo Client执行查询和变更：// App.jsimport React from 'react';import { gql, useQuery,...运行应用启动后端服务器：node server.js然后启动前端应用，假设使用Create React App：npm startGraphQL基本查询1....查询语言：查询、突变、订阅在GraphQL中，查询和突变是通过JSON-like结构表示的字符串。...OnNewUser订阅等待新用户被创建时触发，返回新用户的信息。2. 类型系统在后端，我们定义GraphQL schema来描述这些类型：type User { id: ID!...减少错误：客户端定义查询结构，服务器返回预期的形状，降低了由于接口不匹配导致的错误。更好的API设计：强类型系统确保了数据的一致性和正确性，使得API更加易于理解和维护。

981 0

构建带 Subscriptions 的 graphql golang 后端

现在有许多用于编写JavaScript的GraphQL客户端和服务器的库和框架，其中最着名的是Apollo和Graphcool 。...它有一个简单的目的：实现GraphQL在WebSocket（由所有流行的GraphQL客户端使用），所以不必考虑与net/http无缝集成与net/http无缝集成提供访问已建立订阅的简单方法，执行身份验证并向相应的客户端发送更新...它没有实现任何开箱即用的订阅。一个典型的服务器实现将监听数据库的变化，并通过识别哪些订阅需要更新，重新执行这些订阅的查询并将结果发送给相应的订阅客户端来对这些更改做出反应。...然后可以通过SendData方法将结果发送到订阅客户端，如下面的代码示例所示: // This assumes you have access to the above subscription manager...如果您正在寻找下一个项目的React或GraphQL开发方面的帮助，我们很乐意在Functional Foundry处听到您的消息。

2.7K3 0

静态网站生成器推荐：构建高性能网站的利器

可本地化：Docusaurus 支持通过 CrowdIn 进行多语言支持。通过将文档进行翻译，您可以扩展并发展国际社区。...使用 Pygments 进行代码语法高亮显示导入现有 WordPress、Dotclear 或 RSS 订阅源中的内容基于缓存和选择性输出写入而快速完成重建可通过丰富插件生态系统进行扩展 react-static...渐进增强并适配移动设备 SEO 友好轻松设置及迁移项目支持整个 React 生态系统，包括 CSS-in-JS 库、自定义查询层如 GraphQL 甚至 Redux 等技术组件另外还有热加载支持...无论是个人博客还是企业门户，都能从 Middleman 的便捷性中受益匪浅。...跨平台兼容：无论是 Windows，Mac 还是 Linux 操作系统都能够轻松下载 Publii 并进行本地开发和线上发布操作。更加特别之处在于，这个应用程序运行在桌面端而非服务端。

6662 0

Meatier — 内容丰富的类Meteor框架

时髦的 webapp 都得有 GraphQL!...客户端验证 Simple Schema Joi 清晰的API，尽管这个包挺大数据库钩子 Collections2 GraphQL GraphQL 对于小应用来说太重了 (但是内容丰富) 表单 AutoForm...redux-form 非常棒的状态跟踪，与 react 完美结合 客户端缓存 Minimongo redux 加分项，日志，时光旅行，撤销功能 Socket 服务器 DDP-server socketcluster...扩展简单，发布订阅，认证，中间件认证 Meteor accounts JWTs JWTs 也能提供认证服务认证传输 DDP GraphQL (via HTTP) 只有必要时才使用sockets 前端...Blaze React 虚拟DOM，服务端渲染，异步路由等等构建系统 meteor webpack Meteor中Webpack的使用非常有限 CSS 魔术般地打包和提供 css-modules 组件范围的

9009 0

使用 React 和 GraphQL 做一个todo list

GraphQL GraphQL 允许我们定义一个查询来提供一个通用的接口在客户端和服务端之间来请求和处理数据。...GraphQL的查询都像是没有属性的JSON对象，GraphQL 不是一种语言特性这点被提到很重要，它只是在客户端和服务端中间的一种规范。如果使用通用的语言，任何的客户端都能和任何服务端通信。...一次关于本例子的彩排首先，我的们需要一个服务端 (运行正常的)来接收我们从Todo List应用发出的GraphQL请求。这个服务端已经在上面写好了。...服务正常运行后，我们已经准备好来用我们基于React的Todo List了。...第二，我们本地创建了一个服务端代理来直接使用GraphQL 请求我们创建的服务。更多的细节，查看下面的图片。 ? 而且，你能在这找到一个demo。 ?

2K13 0

「首席架构师推荐」React生态系统大集合

创建React Native App - 在没有构建配置的任何操作系统上创建React Native应用程序，包含或不包含Expo Snowflake - 使用Redux，Parse.com，Jest（...- Facebook的GraphQL的Ruby实现 graphql-java - GraphQL Java实现 sangria - Scala GraphQL客户端和服务器库 graphql-php...- 运行GraphQL服务器的最简单方法数据库集成 Hasura - Postgres上的即时实时GraphQL Prisma - 一个高性能的开源GraphQL ORM-like层，可以在GraphQL...：为移动设备带来现代网络技术 - f8 2015） Citrusbyte推出GraphQL：与Nick Schrock合作的横向平台 Laney Kuenzel：接力中的突变和订阅 - JSConf 2015...Redux CRUD在本地存储中具有持久状态 React Slack克隆 - 使用React和Chatkit构建的综合Slack克隆 React颜色漂移 - 与React的生成艺术 overreacted.io

12.4K3 0

基于 Express 应用框架的技术方案选型浅谈

但是如果应用较大，首次请求静态资源和进行页面动态渲染的过程中会产生以下问题：首屏加载慢，产生白屏效果不利于 SEO 为了解决上述客户端的渲染问题，需要实现 React 服务端渲染。...当页面渲染完成后，由 React 打包后的静态资源对页面进行 hydrate 处理。此时的 React 代码是同构的，因此需要注意哪些会运行在服务端，哪些会运行在客户端。...# socket.io │ ├── pubs/ # Redis发布 │ └── subs/ # Redis订阅...客户端的 HTTP 请求需要符合 Graphql 请求格式，一种方式是使用 axios 等模拟 Graphql 的请求格式，另外一种方式是选用支持Graphql 请求格式的请求库，这里选用 lokka...作为 Graphql 客户端的请求库。

7K3 0

安全地将 Netflix 迁移到 GraphQL

GraphQL shim 使得客户端工程师能够快速切换到 GraphQL，解决客户端方面的问题，如缓存规范化，尝试不同的 GraphQL 客户端，并在不受服务器端迁移的阻碍下研究客户端性能。...我们不希望传统的 Falcor API 永远存在，因此我们采用了 Federated GraphQL 来支持一个具有多个 GraphQL 服务器的单一 GraphQL API。...通过这些抽样事件，该工具可以捕获来自生产环境的实时请求，并对 GraphQL Shim 和新的 Video API 服务同时运行相同的 GraphQL 查询。...我们还注意到了本地化、日期精度和浮点数精度的差异。这让我们对复制的业务逻辑充满信心，其中订阅计划和用户地理位置确定了客户的目录可用性。优势对两种 GraphQL 实现之间的一致性充满信心。...在我们的 GraphQL API 案例中，我们使用了 Sticky Canary 实验来运行两个 GraphQL 网关实例。基线网关使用现有的模式，将所有流量路由到 GraphQL Shim。

1643 0

Nest 实现 GraphQL 版 TodoList

3306 端口映射到容器里的 3306 端口，这样就可以在宿主机访问了。...数据卷挂载就是把宿主机的某个目录映射到容器里的 /var/lib/mysql 目录，这样数据是保存在本地的，不会丢失。...跑起来后，我们用 GUI 客户端连上，这里我们用的是 mysql workbench，这是 mysql 官方提供的免费客户端：连接上之后，点击创建 database：指定名字、字符集为 utf8mb4...然后在 react 项目里调用下。...前端用 React + @apollo/client。后端用 Nest + GraphQL + Prisma + MySQL。

1391 0

React 设计模式 0x6：数据获取

学习如何轻松构建可伸缩的 React 应用程序：数据获取 # React 中服务端数据获取的方式在大多数 React 应用程序中，应用程序需要来自 API 或服务器的数据才能正常运行。...在服务器端，它使用本地的 node.js http 模块，而在客户端（浏览器）中，它使用 XMLHttpRequests。...GraphQL 是用于 API 的查询语言，也是用现有数据来满足这些查询的运行时。...GraphQL 提供了 API 中数据的完整且易于理解的描述，使客户端能够精确地请求所需的数据，避免了不必要的数据传输，使得 API 能够随着时间的推移更容易地发展，并提供了强大的开发者工具。...GraphQL 查询总是返回可预测的结果，使用 GraphQL 的应用程序速度快且稳定，因为它们控制获取的数据，而不是由服务器来控制。

1.2K2 0

.NET与GraphQL的碰撞：新一代的数据交互与演示

以及新增一个测试用的类和string类型返回值的方法 Hello() 在启动项或Program里面，添加Graphql服务，并添加Query的类型注册：最后还要记得映射端点：然后运行程序，例如我默认运行起来端口是...注册服务和接口以后，运行程序，并在graphql里面进行运行测试。当前测试的是输出所有字段。...在控制台客户端，也执行一下mutation操作，也能够成功调用：以上是查询和修改操作的例子，graphql还可以做数据推送和订阅，用于实现websocket的效果。...使用默认的持久化，该持久化选择不建议上生产。具体原因，我去AI一下：可扩展性问题：AddInMemorySubscriptions 存储订阅信息是在内存中进行的。这意味着订阅数据仅存在于单个进程中。...运行以后，会一直监听，除非我们取消监听。打开swagger，直接调用并测试，可以看到面板接收到了测试推送的数据。 客户端要实现订阅，需要做一些改动。

921 0

一个治愈JavaScript疲劳的学习计划

客户端与服务器之间如果有这么多的缺点，那么为什么还要搞那么麻烦？为什么不坚持老旧的 PHP 应用程序呢？...真相是，大多数的 web apps 都裁倒在了服务器与客户端中间，问题是要知道裁在哪儿。但关键的一件事是服务器与客户端之间不是连绵不断的，你不能从一个纯粹的服务端应用开始，将它慢慢转变成客户端应用。...假设 Redux 是一间银行：你不能去你的本地分行然后直接手动修改你的存款余额（“来，我可以给你在后面加上几个零”）。相反，你必须填一张存款表格，然后给出纳员请求允许操作。...丰收的第5周: 使用GraphQL构建API 目前为止，我们都只是讨论了客户端，那才说了一半呢。...这个框架有很多优点，例如性能的提升，强制的版本控制并且没有运行时异常。

7882 0

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

最终我们选择了Apollo GraphQL+gRPC+React+TypeScript这样一套技术栈，并对使用它们的结果感到满意。...使用类型化的客户端代码是一件令人愉快的事情。每一个服务端所对应的客户端代码都是基于后端接口的请求和响应信息来进行类型化。...为了保证GraphQL server和前端之间的类型安全，我们使用Apollo CLI的代码生成器：使用命令行来生成我们所有GraphQL查询的类型： React示例在我们的应用中需要用到三种查询：...此外，由于实现了端对端的类型检验，很难出现数据的错误使用或是引入向前不兼容的变更。如果我们需要引入向前不兼容的变更，也很容易在发生变更之前决定我们系统中的哪些部分是需要进行修改的。...无论是采用哪种技术栈，服务端和客户端之间的类型安全的确能够增加对系统整体稳定性的信心。本文示例代码地址：https://github.com/TLadd/todo-graphql-grpc

3.1K2 0

干货 | React Server Components 初探

Facebook 的 React Team 尝试给出了他们的一个探索方案——React Server Component。一种只运行在服务端的 React 组件化能力，我们来一探究竟。...项目可以直接在本地运行，但是需要进行一些数据库配置。如果有docker环境的话，建议在docker里运行，可以避免手动配置环境。 2）RFC。...但是并不是所有团队都会去使用和接受 GraphQL，因此 React 团队希望使用 React 自己的生态去解决这个问题。...对于没有 GraphQL 的环境，React Server Components 是一种替代方案。...另外，Facebook在使用 React Server Components 时，会在服务端组件中去调用 GraphQL。

9834 0

GraphQL 入门详解

前端刚刚我们都是用GraphiQL在浏览器调用接口，接下来我们看一下在前端页面中怎么调用graphql服务。前端我们使用react。...GraphQL的客户端有多种实现，本次项目使用 Apollo，最流行的GraphQL Client。更多client请参考 GraphQL Clients。...react-apollo 是react视图层的集成，graphql 用于解析graphql的查询语句。...} from 'react'; import gql from 'graphql-tag'; import { Query } from 'react-apollo'; import LaunchItem...运行由于本地调试，client和server分别运行在不同的端口，所以需要先进行跨域处理，使用 cors。

2.1K2 0

新一代数据查询语言GraphQL来啦！

回到2012年，Fackbook开始重构他们的本地移动应用。当时他们的iOS和android移动应用实际上是就是他们Web应用的内容再加上一个本地浏览器的壳。...GraphQL是一种API查询语言，是一个对自定义类型系统执行查询的服务端运行环境一个GraphQL查询是一个被发往服务端的字符串，该查询在服务端被解释和执行后返回JSON数据给客户端。...GraphQL：给客户端自主选择数据内容的能力，客户端完全自主决定获取信息的内容，服务端负责精确的返回目标数据。...2、实践方案，GraphQL在前端如何直接与视图层、状态管理方案结合，目前也只有React/Relay这个官方方案。...也就是说，如果你不是使用Node+React这个技术栈，引入GraphQL看上去带来了额外的成本和风险。

3K7 0

在 redux 应用中使用 GraphQL

快速的启动一个服务端环境启动一个 redux 脚手架增加一个 GraphQL 客户端 (Apollo Client) 使用 GraphQL 获取数据获取更多的数据接下来要做的 1....现在，我们已经确认服务器运行正常，并返回正确的响应，接下来让我们开始构建客户端。 2....客户端正在运行，现在是开始添加 GraphQL 客户端的时候了。我们的目标是使用 GraphQL 查询，从服务器轻松获取数据并将其呈现在着陆页（HomeView）中。 3....增加一个 GraphQL 客户端（Apollo 客户端）安装 apollo-client, react-apollo, 和 graphql-tag。...这样我们就把一个 GraphQL 客户端添加进了一个普通的 Redux 应用中。接下来让我们开始第一个 GraphQL 查询吧。 4.

1.9K1 0

Horizon介绍—无需编写后端代码，就能构建实时应用

Horizon包括以下特性： Horizon服务端，由Node.js和RethinkDB构成，支持数据持久化，实时数据流，输入验证，用户认证和权限管理 Horizon客户端，开发者可以用于前端应用，将...JSON数据存储到数据库中，执行请求，订阅在线更新等 Horizon命令行 - hz ，它会生成项目模板，启动一个本地的Horizon开发服务器，帮助你部署应用到云端 GraphQL支持，Horizon...的服务端会由一个GraphQL适配器来驱动你的React或Relay应用，这将使你在一开始就不必写后端代码，它不会在v1发布，但是会在项目启动后尽快发布。

1.5K3 0

如何将Web主页性能提升十倍以上？

渲染: 客户端与服务器端渲染、预渲染以及混合渲染方法。网络: CDN、缓存、GraphQL 缓存、编码、HTTP/2 以及 Server Push。...预渲染与服务器端渲染 客户端渲染应用程序的具体构建——例如采用 React Router DOM，仍然会带来与 Ember.js 相同的问题。...使用 React 时的常规渲染选项 Gatsby.js 允许我们利用 React 与 GraphQL 构建预渲染页面。Gatsby.js 是一款强大的工具，能够直接提供多种性能优化方案。...客户端接收并立即开始显示 HTML，而后由 Hydration 将 React DOM 状态持续作为常规 SPA。...而我们选择了立足 Fastly 层级对部分 GraphQL 请求进行缓存：我们的 React 应用会标注出那些可进行缓存的 GraphQL 查询。

3.9K4 0

使用 Meteor 和 React 开发 Web App

文中讨论了Meteor与React开发Web App的优势所在，以及Meteor在现代Web开发中扮演的角色。...此外，本文还简要阐述了Meteor REST WebSocket，Flux概念，Relay和GraphQL等对于Meteor社区的影响。...Store 负责保存应用的状态和逻辑，在其外部的代码是不涉及数据管理的；它自己也不产生数据，只能从外部获得新数据。Store 对 Action 进行反馈，然后发出一个数据状态改变的事件。...这样可以为 React 带来很好的数据和逻辑状态的管理；反过来，React 也可以为 Meteor 带来前端模块化，单向数据流模式，使代码更少且更好维护；另外 React 的 Virtual Dom 机制也为会...而 Meteor 客户端自带的 MiniMongo 可以作为 Store。对于 View，如图中可以使用一个父组件来监听数据的变化，子组件负责界面渲染和互动。

1.2K4 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭