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

React Apollo查询使用pollInterval无限期地发出网络请求

React Apollo是一个用于构建GraphQL客户端的JavaScript库。它提供了一种简单的方式来管理应用程序中的数据,并与GraphQL服务器进行交互。

在React Apollo中,可以使用pollInterval选项来设置查询的轮询间隔,以便无限期地发出网络请求。轮询是一种定期向服务器发送查询以获取最新数据的机制。

使用pollInterval选项,可以指定一个时间间隔(以毫秒为单位),React Apollo将在该时间间隔之后自动重新发送查询。这对于需要实时更新数据的应用程序非常有用,例如实时聊天应用程序或实时监控系统。

以下是使用React Apollo进行查询并设置pollInterval的示例代码:

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

const client = new ApolloClient({
  uri: 'https://example.com/graphql', // 替换为实际的GraphQL服务器地址
  cache: new InMemoryCache(),
});

const GET_DATA = gql`
  query GetData {
    // 查询语句
  }
`;

function App() {
  const { loading, error, data } = useQuery(GET_DATA, {
    pollInterval: 5000, // 设置轮询间隔为5秒
  });

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :(</p>;

  // 处理数据并渲染UI

  return (
    // 渲染UI组件
  );
}

ReactDOM.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  document.getElementById('root')
);

在上述示例中,我们使用useQuery钩子来执行GraphQL查询,并将pollInterval选项设置为5000毫秒(即5秒)。这意味着每隔5秒,React Apollo将自动重新发送查询以获取最新数据。

对于React Apollo的更多信息和使用方法,您可以参考腾讯云的相关产品Apollo Server的文档:Apollo Server。请注意,这是腾讯云的产品文档链接,与亚马逊AWS、Azure、阿里云、华为云、天翼云、GoDaddy、Namecheap、Google等品牌无关。

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

相关·内容

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

最终我们选择了Apollo GraphQL+gRPC+React+TypeScript这样一套技术栈,并对使用它们的结果感到满意。...由于GraphQL查询可以一次请求多种资源,因此可以减少网络请求的次数。 未来可以很方便增加服务端接口。...使用apollo-client和react-apollo简化了前端代码对缓存和数据的管理。 灵活的查询方式方便我们在未来构建移动端以及内部应用。...为了保证GraphQL server和前端之间的类型安全,我们使用Apollo CLI的代码生成器:使用命令行来生成我们所有GraphQL查询的类型: React示例 在我们的应用中需要用到三种查询:...Apollo GraphQL、gRPC、React和TypeScript,我们既享受了查询数据的灵活性,也保证了我们后端服务之间的原子性。

3.1K20

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

我们将自动为查询生成 TypeScript 类型,并使用 React Hooks 执行这些查询。...通过使用 GraphQL,我们可以自动且自由输入我们的 React 组件的属性。这样可以减少产品上的错误并提高迭代速度。...切换到 app 目录: 1cd graphql-typescript-react 现在安装附加依赖项。我们的程序用 Apollo 来执行 GraphQL API 请求。...apollo-boost 包含了查询 API 和在内存中缓存数据所需的工具, react-apolloReact提供绑定, react-apollo-hooks 在 React Hook 中包装了...我们能够编写与使用它们的组件并存的查询,并且 UI 能够准确请求它要呈现的内容。 在使用 REST API 时,我们所能找的的文档有可能不是最新的。

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

    许多开发者告诉过我们,使用 Apollo Client 可以很好管理远端数据,这部分数据一般会占到总数据量的 80% 左右。...此外,GraphQL 有能力将对多个数据源的请求集成在单次查询中,在此我们将充分利用这个特性。 . 以上是 Apollo Client 的数据流架构图。...Apollo Client 中的状态管理 Apollo Link 是 Apollo 的模块化网络栈,可以用于在某个 GraphQL 请求的生命周期的任意阶段插入钩子代码。...Apollo Link 使得在 Apollo Client 中管理本地的数据成为可能,从一个 GraphQL 服务器中获取数据,可以使用 HttpLink,而从 Apollo 的缓存中请求数据,则需要使用一个新的...以上代码使用 @client 指令查询 Apollo cache。 在我们 最新的文档页中,可以找到更多的例子,以及一些将 apollo-link-state 集成在应用中的小贴士。

    2.4K100

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

    前端设置(使用Apollo Client)接着,我们需要在前端应用中配置Apollo Client,与我们的GraphQL服务器通信:npm install apollo-boost @apollo/client...编写前端组件现在,我们在React组件中使用Apollo Client执行查询和变更:// App.jsimport React from 'react';import { gql, useQuery,...运行应用启动后端服务器:node server.js然后启动前端应用,假设使用Create React App:npm startGraphQL基本查询1....{ newUser { id name }}在上述代码中,GetUser查询请求了用户ID为1的用户姓名和电子邮件。...查询根和突变根接下来,定义GraphQL的查询根(Query)和突变根(Mutation)类型,它们是客户端请求数据和修改数据的入口点。type Query { user(id: ID!)

    9810

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

    Fetch 提供了 Request 和 Response 对象(以及其他与网络请求相关的内容)。...这将使它们在将来需要的任何地方都可以使用,无论是用于 Service Worker、缓存 API 还是其他处理或修改请求和响应的类似功能,或者任何可能需要您编写程序来生成响应的地方。...GraphQL 提供了 API 中数据的完整且易于理解的描述,使客户端能够精确请求所需的数据,避免了不必要的数据传输,使得 API 能够随着时间的推移更容易地发展,并提供了强大的开发者工具。...GraphQL 查询总是返回可预测的结果,使用 GraphQL 的应用程序速度快且稳定,因为它们控制获取的数据,而不是由服务器来控制。...安装: npm install graphql @apollo/client 使用: import React from "react"; import { ApolloClient, InMemoryCache

    1.2K20

    2017JavaScript框架战报-React分战场

    Flux在React之后不久就被推出,但直到2015年中才与React Router同步渐渐走入大众的视野,这表明了两者在网络应用程序中正在“捆绑”使用。...现在Redux几乎和React Router一样流行,而且两者紧密相互追随,并且越来越受欢迎。这表明Redux已经取代Flux成为React网络应用程序中的首选管理状态系统。...GraphQL 虽然它与React是同时在Facebook内部开发的,但是GraphQL与React并没有内在的联系。它只是Web客户端查询服务器数据的一种方式。...React生态系统总结 回头看过去12个月的变化,我们可以看到各个“玩家”在React生态系统中的位置变化: * Apollo正在快速增长。 * Flux正在下降。...* React Router和Redux都非常受欢迎,并且有紧密关系。 * MobX增长看好,但还没有危及到Redux的地位。 * React本身是庞大的。

    1K70

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

    1 REST 的缺点 作者指出了 REST API 的一系列缺点,以及 GraphQL 如何克服所有这些缺点: 过度获取; 多个请求请求多项资源; 针对嵌套数据的瀑布式网络请求; 每个客户端都需要知道每个服务的位置...你可以将多个调用封装到一个 API 中,让它们在服务器端完成,而不是从客户端发出多个请求。此方法也可以解决过取和欠取问题,因为你可以在将数据发回客户端之前对其进行操作。...此外,你无需使用Apollo 这样的重量级客户端。由 Vercel 提供的 swr 库很小,很容易使用。它支持分页、hooks,并能帮我们实现非常有效来回导航。...GraphQL 内省是向服务器发送一个特定的 GraphQL 查询以获取关于 GraphQL 模式的信息。GraphQL 服务器可以自由使用它期望的任何类型进行响应。...你可以使用其他工具,或者扩展 GraphQL,来获得更好的结果,例如使用 Relay 来持久化查询。要真正从 GraphQL 文档中获得好处,你要做的不仅仅是向模式中添加描述。

    2K10

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

    URL 查询组件已经不够用了,但是GET请求中的请求体也不太好,这意味着你最终要在POST请求中发送非可变查询(Elasticsearch 就是这样做的)。至此,API 还是 RESTful 的吗?...在大多数情况下,向 GraphQL API 发出的每个请求要么是没有副作用的Query实例,要么是会修改存储在服务器上的对象的Mutation实例。...相应Apollo 提供了多个平台的客户端库,以及在最流行的编程语言(包括 TypeScript 和 Swift)中生成类型定义的代码生成器。...总的来说,我发现,Apollo 比 Relay 等更简单和易于使用。...由于 Apollo 客户端库架构简单,我能够将一个使用 React.js 与 Redux 的应用慢慢过渡到 React Apollo,一个组件一个组件的,只在有意义的时候才这样做。

    2.3K30

    GraphQL最突出的架构优势是什么?

    作者 | Khalil Stemmler 策划 | 田晓旭 在服务器上使用 GraphQL 代替 REST 是有很多好处的,使用 Apollo Client 取代自己编写的数据获取逻辑也有很多优势。...在开发工作早期,我们完全可以使用一个端口的内存内实现。 通过依赖注入方法,这种架构还会让开发人员优先编写可以测试的代码。这样我们就可以尽可能减少可能导致代码不可测试的具体依赖项。...Apollo 发布了带有 apollo-link-state 的 Apollo Client 后,React 开发人员就能用更少的代码满足所有这三个需求了。...Apollo-link-state(现已直接放入 Apollo Client 2 和 3 中)让开发人员可以编写几乎同时解决远程状态和本地状态的查询。远程状态(位于服务器上)感觉比之前近多了。...路由 + 方法组合 请求形式 + 参数 路由 + 方法组合 的一个例子是,某人可以很简单将 创建一个用户 的操作从 POST /users 移至 POST /users/new。

    2.2K20

    用 GraphQL 查询你的 Django 应用

    vs 扩展的 REST 协议 (此小节中图片拷贝自网络,懒得画) 和 REST 一样,GraphQL 并不是什么开发框架,它只是定义了一种通用型查询的 DSL。...", } ] } ] } 相较于自定义的 REST 协议,使用 GraphQL 可以更简单: 使用 GraphQL,只需要一次请求 ---- 相信通过上面的例子...主流的客户端框架主要有两种—— Relay 和 Apollo ,我们仅从有限的角度来看下二者的异同: Relay vs Apollo Relay Apollo 框架支持 仅支持 React, React...有所区别,都会遇到类似像 N+1 这样的慢查询问题,所以需要谨慎将前端的查询转换成可靠的 Django ORM 查询。...鉴权 由于 API 请求并不再经过传统封装的 ViewSet,原有的鉴权组件不再能使用,你需要引入新的 graphene-permissions 来解决针对用户的权限控制。

    2K60

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

    暂时没有使用过,不做展开介绍。 SWR[6]、React-Query[7]、useRequest[8],网络请求的状态管理、缓存、竞态处理等。...GraphiQL[45],可视化的GraphQL API调试工具,直观的查看你的Schema、发起请求、查看问题,有一个增强版本是支持通过点击单选框生成查询语句,一时没找到。...GraphQL-Playground[46],类似上一个,但是更美观一些,支持跟踪请求链路(Tracing)以及 Apollo Federation[47] 插件的集成(Query Plan)。...在TS中这个工具的主要能力就是生成TS的类型定义,同时它的插件体系还提供了更多的额外能力,如Apollo-Client的插件,让你可以直接使用封装好的的useXXXQuery等,前端连查询语句都不用写了...简单说,你提供一个数据库,GraphQL Engine会为你基于数据库的结构(可能这就是目前都支持PostgreSQL的原因?)

    4.2K10

    如何在纯 JavaScript 中使用 GraphQL

    但是,如果你需要使用一个 GraphQL API,你很自然就会想到自己需要使用 React 和 / 或其他一些库才能让它跑起来。...这是因为许多教程和示例代码似乎都基于这样一个假设,也就是说如果你在使用 GraphQL,就需要使用这些库。 但是,一个对 GraphQL API 的查询只不过是一个定制格式的 HTTP 请求而已。...我们来使用 node-fetch 之类的东西来简化这一过程,以减少发出 HTTP 请求所需的样板代码量。...显然,一般来说你不会想要简单向用户显示查询结果,因此让我们看一下如何使用返回的数据。 使用 GraphQL 查询响应 GraphQL 的一大优点是,它的响应只是纯 JSON,因此数据使用起来很容易。...这里更好的是响应对应了查询,这意味着你无需花费大量时间来分析关于响应的文档。因此我们可以快速采用上面的示例并利用返回的数据,而不是简单把它摆出来。

    3.5K10

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

    暂时没有使用过,不做展开介绍。 SWR、React-Query、useRequest,网络请求的状态管理、缓存、竞态处理等。 生态 GatsbyJS,基于React的静态页面生成器,非常快。...GraphiQL,可视化的GraphQL API调试工具,直观的查看你的Schema、发起请求、查看问题,有一个增强版本是支持通过点击单选框生成查询语句,一时没找到。...GraphQL-Playground,类似上一个,但是更美观一些,支持跟踪请求链路(Tracing)以及 Apollo Federation 插件的集成(Query Plan)。...在TS中这个工具的主要能力就是生成TS的类型定义,同时它的插件体系还提供了更多的额外能力,如Apollo-Client的插件,让你可以直接使用封装好的的useXXXQuery等,前端连查询语句都不用写了...简单说,你提供一个数据库,GraphQL Engine会为你基于数据库的结构(可能这就是目前都支持PostgreSQL的原因?)

    2.9K10

    十七年来奇葩大崩溃!为不让OpenAI和谷歌白拿数据,Reddit 收取巨额API 费用还诽谤开发者,社区爆发大规模抗议

    Reddit 于 2005 年推出,但直到 2016 年才开发出自己的应用程序。这意味着在第一个十年中,第三方应用程序成为访问该平台的一种流行方式。...由于 Apollo 每月处理大约 70 亿个请求,因此 Apollo 的 API 访问费用约为每月 170 万美元或每年 2000 万美元。...对于 Apollo,平均用户每天使用 344 个请求,每月就是 1.06 万个。...“如果他们不妥协或找不到其他解决方案,那么我肯定不会再成为活跃的 Reddit 用户,因为我几乎只使用 Apollo。” Reddit 浇油:诽谤开发者?...Reddit 的冲突主要是由另一场冲突引发的:社交网络与 OpenAI 等人工智能公司之间的冲突,后者从该服务中收集了大量数据来训练他们的系统。

    23530

    GraphQL 基础实践

    ,对于移动端来说,发起一个 HTTP 请求还是比较消耗资源的,特别是在一些网络连接质量不佳的情况下,一下发出多个请求反而会导致不好的体验。...以及 Meteor 团队开发的 Apollo,同时开发了客户端和服务端,同时也支持流行的 Vue 和 React 框架。...然后在search查询中返回该接口。 searchMedia查询返回一组Basic接口。由于该接口中的字段是所有实现了该接口的类型所共有的,在请求体上可以直接使用。...后面的代码例子中将会清楚了解 Resolver。...GraphQL 的优缺点 优点 所见即所得:所写请求体即为最终数据结构 减少网络请求:复杂数据的获取也可以一次请求完成 Schema 即文档:定义的 Schema 也规定了请求的规则 类型检查:严格的类型检查能够消除一定的认为失误

    12.8K20
    领券