开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

React with Apollo GraphQL订阅返回值

是指在使用React和Apollo GraphQL进行开发时，订阅操作返回的数据。

React是一个用于构建用户界面的JavaScript库，它通过组件化的方式使得开发者可以轻松地构建可复用的UI组件。React可以与各种后端技术进行集成，其中包括Apollo GraphQL。

Apollo GraphQL是一个用于构建现代、可扩展的API的开发工具。它提供了一种声明式的方式来定义数据需求，并通过GraphQL查询语言来获取数据。Apollo GraphQL支持订阅操作，允许客户端实时地接收来自服务器的数据更新。

当使用React与Apollo GraphQL进行开发时，可以通过使用Apollo Client来进行数据管理和订阅操作。订阅操作可以用于实时更新数据，例如聊天应用中的新消息通知或实时数据监控等场景。

订阅操作返回的值通常是一个Observable对象，它可以被React组件订阅以获取实时的数据更新。在React组件中，可以使用Apollo Client提供的useSubscription钩子函数来订阅数据更新。useSubscription函数接收一个GraphQL订阅查询作为参数，并返回订阅操作的结果。

在React组件中使用Apollo Client的useSubscription钩子函数，可以轻松地订阅并处理订阅返回的值。当订阅的数据发生变化时，React组件会自动重新渲染以显示最新的数据。

推荐的腾讯云相关产品是腾讯云云开发（Tencent Cloud CloudBase），它是一款全托管的云原生应用开发平台。腾讯云云开发提供了一体化的开发工具和服务，包括云函数、数据库、存储、静态网站托管等，可以方便地进行前端开发、后端开发和部署。腾讯云云开发支持GraphQL，并且提供了与Apollo Client集成的文档和示例，可以帮助开发者快速搭建基于React和Apollo GraphQL的应用。

腾讯云云开发产品介绍链接地址：https://cloud.tencent.com/product/tcb

相关搜索:Apollo Graphql:重放查询 Apollo v3 GraphQL订阅错误:必须提供文档 Apollo-Graphql测试 Apollo:在订阅更新上更新React道具？Apollo的Angular graphql FastAPI graphql订阅 Graphql | Apollo client |如何更改现有订阅中的变量？Graphql/ React -Apollo: React映射函数错误 Graphql/Apollo/React无法导入本地图像 ReactJS/Javascript/Graphql/React-apollo:传递查询变量

相关搜索:

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

有帮助

没帮助

相关·内容

GraphQL实践10——Netflix Dgs Graphql异步订阅

介绍GraphQL订阅模式支持服务端主动向客户端推送数据通知，避免客户端轮训DGS Subscriptions新增依赖此处使用的是SpringBoot Web组件，故引入websockets依赖如果使用的是...Actor就给所有订阅者发异步通知@Slf4j@DgsComponent@RequiredArgsConstructorpublic class ActorDataFetcher {private final...客户端订阅后接收异步通知，此处参考官方最佳实践，使用单元测试模拟@Slf4j@SpringBootTestclass ActorDataFetcherTest {@Autowiredprivate DgsQueryExecutor...onComplete() {}});addActor();addActor();assertThat(actors.size()).isEqualTo(2);}}从日志输出可以看到客户端成功接收异步通知图片总结订阅模式属于...GraphQL特色功能，类似消息队列实现方式，减少客户端对普通查询接口轮训性能开销

52215 0

【Graphql实践】使用 Apollo（iOS）访问 Github 的 Graphql API

如果你也对 Graphql 感兴趣，不妨先从 Github 的 Graphql API 来切手实践。...关于 Graphql 官网尽管只是做客户端的一些实践，我还是建议你先过一遍 Graphql 官网的学习指南。这样能更快速地理解概念。一些客户端库的文档，大部分都只是介绍基本用法。...官网文档没有及时更新，应该下面这样写： APOLLO_FRAMEWORK_PATH="$(eval find $FRAMEWORK_SEARCH_PATHS -name "Apollo.framework..." -maxdepth 1)" if [ -z "$APOLLO_FRAMEWORK_PATH" ]; then echo "error: Couldn't find Apollo.framework...-name '*.graphql')" --schema=schema.json --output API.swift 【未验证】如果考虑 Apollo 自定义Header或者自定义 HTTPS 证书校验

1.4K0 0

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

前端设置（使用Apollo Client）接着，我们需要在前端应用中配置Apollo Client，与我们的GraphQL服务器通信：npm install apollo-boost @apollo/client...graphql# client.jsimport ApolloClient from 'apollo-boost';import { InMemoryCache } from '@apollo/client...编写前端组件现在，我们在React组件中使用Apollo Client执行查询和变更：// App.jsimport React from 'react';import { gql, useQuery,...查询语言：查询、突变、订阅在GraphQL中，查询和突变是通过JSON-like结构表示的字符串。...OnNewUser订阅等待新用户被创建时触发，返回新用户的信息。2. 类型系统在后端，我们定义GraphQL schema来描述这些类型：type User { id: ID!

591 0

构建带 Subscriptions 的 graphql golang 后端

现在有许多用于编写JavaScript的GraphQL客户端和服务器的库和框架，其中最着名的是Apollo和Graphcool 。...Apollo团队还开发了针对WebSockets的GraphQL协议，该协议主要用于Apollo Client和Graphcool中的Subscriptions。...创建一个GraphQL模式，创建一个订阅管理器，为WebSocket上的通信创建一个HTTP处理程序，然后使用net/http服务处理程序。...它没有实现任何开箱即用的订阅。一个典型的服务器实现将监听数据库的变化，并通过识别哪些订阅需要更新，重新执行这些订阅的查询并将结果发送给相应的订阅客户端来对这些更改做出反应。...如果您正在寻找下一个项目的React或GraphQL开发方面的帮助，我们很乐意在Functional Foundry处听到您的消息。

2.7K3 0

在 redux 应用中使用 GraphQL

快速的启动一个服务端环境启动一个 redux 脚手架增加一个 GraphQL 客户端 (Apollo Client) 使用 GraphQL 获取数据获取更多的数据接下来要做的 1....增加一个 GraphQL 客户端（Apollo 客户端）安装 apollo-client, react-apollo, 和 graphql-tag。...$ npm install apollo-client react-apollo graphql-tag --save 打开 Redux 应用的入口文件 src/containers/AppContainer.js...中的 Provider 替换为来自 react-apollo 的 ApolloProvider。...react-apollo' // NOTE: different connect!

1.9K1 0

如何在 React.js 项目中使用 GraphQL

设置 React.js 项目在深入研究 GraphQL 之前，请确保您已经设置了一个 React.js 项目。...：npm install graphql @apollo/client@apollo/client 软件包是 Apollo Client，这是一个强大的库，用于在 React 应用程序中管理状态并进行...连接到 GraphQL 服务器要在 React.js 项目中使用 GraphQL，您需要连接到 GraphQL 服务器。...: new InMemoryCache(),});export default client;在 React 组件中使用 GraphQL 获取数据现在，让我们使用 GraphQL 在 React 组件中获取数据...您已经成功将 GraphQL 集成到您的 React.js 项目中。

3254 0

React + Redux + GraphQL 环境搭建

var graphqlHTTP = require('express-graphql'); var { buildSchema } = require('graphql'); // Construct...IDE 吧 Client 轮子：react-apollo 因为之前用了 Redux，只需要修改一些地方就行。.../registerServiceWorker'; import { createStore } from 'redux' import { Provider } from 'react-redux'.../reducers' +import gql from "graphql-tag"; +import { ApolloProvider } from "react-apollo"; +import ApolloClient...from "apollo-boost"; const store = createStore( - Reducer, /* preloadedState, */ - window

3111 0

GraphQL 入门详解

安装依赖安装如下依赖： $ cd client $ npm i apollo-boost react-apollo graphql 其中 apollo-boost 是apollo client本身，...react-apollo 是react视图层的集成，graphql 用于解析graphql的查询语句。...设置client 修改App.js内容如下： import React, { Component } from 'react'; import ApolloClient from 'apollo-boost...'; import { ApolloProvider } from 'react-apollo'; import '....} from 'react'; import gql from 'graphql-tag'; import { Query } from 'react-apollo'; import LaunchItem

2.1K2 0

用 GraphQL 查询你的 Django 应用

主流的客户端框架主要有两种—— Relay 和 Apollo ，我们仅从有限的角度来看下二者的异同： Relay vs Apollo Relay Apollo 框架支持仅支持 React, React...Native 无框架限定 GraphQL API 需要特定的 Schema 支持无需特定的 Schema 支持学习成本较高较低生产力高较低灵活性固定结构较灵活是否支持订阅否是...简而言之，Realy 更复杂，更能够应对大型应用，Apollo 更轻量，不过需要更多的手工劳动。...edges { node { id, name } } } } Relay Schema：edges、node 层级同样会出现在返回值...总结 GraphQL 在前端需求迭代频繁的场景下，比 REST 更符合现代开发节奏 GraphQL 的语言设计比自定义扩展的 REST 更自然，更具备通用性 GraphQL 会将比较多的工作放到客户端，

2K6 0

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

本文将引导你使用 React 和 Apollo 构建客户端应用程序，并调用 SpaceX 的公共 GraphQL API ，来显示有关的发射信息。...切换到 app 目录： 1cd graphql-typescript-react 现在安装附加依赖项。我们的程序用 Apollo 来执行 GraphQL API 请求。...Apollo 所需的库是 apollo-boost，react-apollo，react-apollo-hooks，graphql-tag和graphql。...apollo-boost 包含了查询 API 和在内存中缓存数据所需的工具， react-apollo 为React提供绑定， react-apollo-hooks 在 React Hook 中包装了...1yarn add apollo-boost react-apollo react-apollo-hooks graphql-tag graphql graphql-code-generator 用于自动化

3K2 0

GraphQL 实战篇之前端Vue+后端Nest

安装首先我们先使用vue-cli新建项目，接着安装依赖： npm install apollo-cache-inmemory apollo-client apollo-link apollo-link-http...apollo-link-ws apollo-utilities vue-apollo -S 引入依赖 // main.js import Vue from 'vue' import App from...', }) // 创建订阅的 websocket 连接 const wsLink = new WebSocketLink({ uri: 'ws://localhost:3001/graphql'...前面我们介绍了GraphQL的概念和基础知识，这篇文章记录下使用Nestjs+GraphQL搭建Node服务。...安装 npm i --save @nestjs/graphql graphql-tools graphql apollo-server-express 注册 // app.module.ts import

1.2K6 0

GraphQL 从入门到实践

本文首先介绍了 GraphQL，再通过 MongoDB + graphql + graph-pack 的组合实战应用 GraphQL，详细阐述如何使用 GraphQL 来进行增删改查和数据订阅推送，并附有使用示例...graph-pack 是集成了 Webpack + Express + Prisma + Babel + Apollo-server + Websocket 的支持热更新的零配置 GraphQL 服务环境...3.2 Query 首先我们来试试 hello world，我们在 schema.graphql 中写上 Query 的一个入口 hello，它接受 String 类型的返回值 # src/schema.graphql...### 3.4 Subscription GraphQL 还有一个有意思的地方就是它可以进行数据订阅，当前端发起订阅请求之后，如果后端发现数据改变，可以给前端推送实时信息，我们用一下看看。...接收到数据： ', payload) } } } } 这里的 pubsub 是 apollo-server 里负责订阅和发布的类，它在接受订阅时提供一个异步迭代器

2.5K3 1

2017年JS 框架回顾：React 生态系统

当引入 React 时，Facebook 还推出了 Flux（一种管理应用程序中状态的方法）和 GraphQL（一种用于在客户端和服务器之间进行通信的系统）。这两者都不如 React 本身流行。...GraphQL GraphQL 与 React 是由 Facebook 同时开发的，但是这两者之间并没有内在的联系。GraphQL 是 Web 客户端查询服务器数据的一种方式。...GraphQL 通过名为 Relay 和 Apollo 的两个竞争库得到了普及，Relay 和 Apollo 提供了一个 Web 应用程序，用于生成 GraphQL 和管理数据流。...虽然 GraphQL 开发者使用量的绝对数还很小，但是 Apollo 的增长轨迹意味着 GraphQL 很值得开发者关注。...React生态系统概述通过上图中 React 生态系统12个月的变化趋势，可以得到以下结论： Apollo 的使用率正在快速增长。 Flux 的使用率正在下降。

89710 0

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

Client Apollo-Client[35]，来自ApolloGraphQL[36]的作品，只有React版本是官方团队在维护，Vue版本的被挪到Vue团队了(VueUI有一部分就是基于Apollo-Client-Vue...） GraphQL-Yoga[43]，Prisma团队出品，基于Apollo-Server，封装了一些特性，因此比Apollo-Server更容易上手，但功能却更强，比如原生支持文件上传这种。.../graphqurl [41] GraphQL-Zeus: https://github.com/graphql-editor/graphql-zeus [42] Apollo-Server: https...://github.com/apollographql/apollo-server [43] GraphQL-Yoga: https://github.com/prisma-labs/graphql-yoga.../graphiql [46] GraphQL-Playground: https://github.com/graphql/graphql-playground [47] Apollo Federation

4.2K1 0

2017年 JavaScript 框架回顾 -- React生态系统

当引入 React 时，Facebook 还推出了 Flux（一种管理应用程序中状态的方法）和 GraphQL（一种用于在客户端和服务器之间进行通信的系统）。这两者都不如 React 本身流行。...GraphQL GraphQL 与 React 是由 Facebook 同时开发的，但是这两者之间并没有内在的联系。GraphQL 是 Web 客户端查询服务器数据的一种方式。...GraphQL 通过名为 Relay 和 Apollo 的两个竞争库得到了普及，Relay 和 Apollo 提供了一个 Web 应用程序，用于生成 GraphQL 和管理数据流。...虽然 GraphQL 开发者使用量的绝对数还很小，但是 Apollo 的增长轨迹意味着 GraphQL 很值得开发者关注。...React生态系统概述通过上图中 React 生态系统12个月的变化趋势，可以得到以下结论： Apollo 的使用率正在快速增长。 Flux 的使用率正在下降。

1.2K4 0

React生态系统

当引入 React 时，Facebook 还推出了 Flux（一种管理应用程序中状态的方法）和 GraphQL（一种用于在客户端和服务器之间进行通信的系统）。这两者都不如 React 本身流行。...GraphQL ? GraphQL 与 React 是由 Facebook 同时开发的，但是这两者之间并没有内在的联系。GraphQL 是 Web 客户端查询服务器数据的一种方式。...GraphQL 通过名为 Relay 和 Apollo 的两个竞争库得到了普及，Relay 和 Apollo 提供了一个 Web 应用程序，用于生成 GraphQL 和管理数据流。...虽然 GraphQL 开发者使用量的绝对数还很小，但是 Apollo 的增长轨迹意味着 GraphQL 很值得开发者关注。 React生态系统概述 ?...通过上图中 React 生态系统12个月的变化趋势，可以得到以下结论： Apollo 的使用率正在快速增长。 Flux 的使用率正在下降。

9453 0

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

最终我们选择了Apollo GraphQL+gRPC+React+TypeScript这样一套技术栈，并对使用它们的结果感到满意。...使用apollo-client和react-apollo简化了前端代码对缓存和数据的管理。灵活的查询方式方便我们在未来构建移动端以及内部应用。...为了保证GraphQL server和前端之间的类型安全，我们使用Apollo CLI的代码生成器：使用命令行来生成我们所有GraphQL查询的类型： React示例在我们的应用中需要用到三种查询：...在此基础上，我们进一步使用apollo-typed-components来给每项操作生成react-apollo组件，也就是ApolloComps.tsx文件中的GetTodosQuery组件、CreateTodoMutation...*/ import * as React from "react"; import { Mutation } from "react-apollo"; import { CreateTodo } from

3.1K2 0

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

Relay由Facebook官方推出，支持的框架有React和React Native，Apolloo则支持绝大多数主流框架。...Router方面Relay官方支持React Route，新版本中还支持一个新的路由Found。Apollo由于本身的运行方式和生命周期已经完全和路由割离开，所以能够支持任何Route。...我们通过阿里云物联网套件来实现服务器端和树莓派之间的通信，设备可以发布和订阅一些数据到MQTT中，每隔一段时间就会有心跳包从设备上传到MQTT，以此来更新页面数据。...现在转换到GraphQL后，请求发起机制、数据刷新、文件上传等等都完全不同，相当于要从头开始学习新的东西。在使用Apollo的过程中我们也遇到了一些坑。...我们在技术栈的选择上，web用的是React，App用的React Native，后端主要的API源是用Ruby写的，还有部分Python用来做数据分析，目前所有的API都被迁移到了GraphQL上。

7.3K2 0

JavaScript 2016年的概况

正是因为大家都有同样的疑问，所以就有人搞了一个调查，如果你也想尽快知晓明年的调查结果，可以访问#介绍页面#然后输入你的邮箱进行订阅。...技术选型方面： ES6 + React + Redux + Mocha + Webpack TypeScript + Angular 2 前端框架本节摘要：你不能错过React...技术选型方面： React + ES6 + Redux + Mocha + Enzyme + Webpack + React Native Angular 2 + TypeScript...API层本节摘要： GraphQL 看上去很有前景 REST APIs仍旧是默认的标准，大幅度领先流行度： REST API > GraphQL 技术选型方面： GraphQL...+ Relay + Apollo + React Native 全栈框架本节摘要：该类别Meteor主导 ‘all in one’模式并不受欢迎流行度： Meteor > MEAN

6492 0

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

Redux工具 Redux教程 MobX MobX通用资源 MobX工具 MobX教程 GraphQL GraphQL规范 GraphQL工具 GraphQL教程 GraphQL实现服务器集成数据库集成...Relay 中继一般资源中继教程中继工具 Apollo Apollo综合资源影片重要会谈 React.js Conf 2015播放列表 ReactEurope Conf 2015第1天播放列表...Redux或MobX：尝试解散混乱 GraphQL 查询语言 GraphQL规范 GraphQL官方网站 GraphQL规范 GraphQL规范库 GraphQL工具 GraphCMS - GraphQL...脚本，用于更新中继API Apollo 基于GraphQL的数据堆栈阿波罗综合资源阿波罗官方网站 Apollo GitHub 阿波罗博客 Apollo Slack Apollo工具 react-apollo-redux...：为移动设备带来现代网络技术 - f8 2015） Citrusbyte推出GraphQL：与Nick Schrock合作的横向平台 Laney Kuenzel：接力中的突变和订阅 - JSConf 2015

12.3K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭