首页
学习
活动
专区
圈层
工具
发布

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

GraphQL规范 GraphQL工具 GraphQL教程 GraphQL实现 服务器集成 数据库集成 Relay 中继一般资源 中继教程 中继工具 Apollo Apollo综合资源 影片 重要会谈...React组件和数据存储的库 ProppyJS - 用于功能道具组合的小型库 WatermelonDB - 下一代数据库,用于强大的React和React Native应用程序,可扩展到10,000个记录并保持快速...无头CMS GraphQL CMS Mongoose模式到GraphQL GraphQL桥接到REST API GraphQL Playground - GraphQL IDE,用于更好的开发工作流程...NET的GraphQL graphql-go - Go / Golang的GraphQL 服务器集成 express-graphql - 使用Express创建GraphQL HTTP服务器 graphql-yoga...脚本,用于更新中继API Apollo 基于GraphQL的数据堆栈 阿波罗综合资源 阿波罗官方网站 Apollo GitHub 阿波罗博客 Apollo Slack Apollo工具 react-apollo-redux

16.2K30

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

如果有人说团队应该从头开始研发一种持久性存储技术,大家肯定会觉得这样的场面看起来很愚蠢;但选择你的 Web 应用程序 API 样式(传输 / 客户端 - 服务器技术)其实也是一样的道理。...去年(2019 年),我意识到 API 在技术栈中的深度已经超出了我们的想象。API 的触角伸到了前端框架的数据存储,也伸到了后端服务的合约层面。 这听起来可能有点虚幻,但它的确就是那样。...基本的全栈 Apollo Client+Server 应用程序栈 4数据图让远程状态更接近客户端本地状态 所有前端框架都需要解决的三个挑战分别是数据存储、更改检测和数据流。...使用 Apollo Federation,每个服务团队都可以从其限界上下文中构建和管理自己的 GraphQL 服务,将其注册到一个 Apollo 网关,从而在整个企业中分布化 GraphQL 的运维工作...很多时候,我们对 UI 所做的微小改动也会让我们替换掉组件,或意识到我们错误地判断了数据需求,并且需要为一些组件添加更多字段。

3K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Apollo:GraphQL现在可以轻松连接到REST API

    该计划包括访问试用功能和连接器,从而使团队可以更轻松地采用和扩展其 GraphQL 的使用。组织可以通过访问 GitHub 并下载带有 GraphQL 的适用 Apollo 代码来免费开始使用。...除了上面提到的 gRPC API 之外,还有其他的,例如 SOAP API,“可以追溯到更早的过去,”DeBergalis 说。“API 是业务的构建块。...“当你看到所有采用 Apollo 的公司时,他们正在解决的问题是一个编排问题:如何将所有这些 API 连接到我们想要编写的软件?这关系到如何以正确的顺序调用这些 API。如何将它们链接在一起?...对于具有遗留单体架构的组织,通过并购,组织必须将单独的产品集成到一致的用户体验中,DeBergalis 说。...虽然 Apollo 提供了 GraphQL 的企业版本和相关的 GraphOS 平台,但 Apollo 并不直接控制该标准。

    42600

    英国卫报基于 Serverless、React 和 GraphQL 构建内容协作工具 Pinboard

    该解决方案使用了一系列技术,包括用于编写业务逻辑的 Typescript、用于执行代码的无服务器服务、API 端点和 GraphQL 服务器,以及用于存储的 AWS RDS(PostgreSQL)。...目标是在不创建新的独立工具的情况下将协作功能嵌入到现有工具集中,让编辑可以在生产内容项的上下文之上进行协作。 Pinboard 使用 TypeScript 编写客户端、服务器和基础设施代码。...客户端应用程序是用 Preact 和 Emotion 创建的,并使用 Webpack 进行打包。它使用 Apollo 作为 GraphQL 客户端库。...在服务器端,使用 AWS Lambda 执行所有业务逻辑,使用 AWS RDS for PostgreSQL 存储用户和项目数据。...GraphQL 不仅支持 查询,还支持 mutation,这些是用于添加 / 修改数据的操作,因此由 GraphQL 服务器按顺序执行,而不是像查询那样并行执行。

    48410

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

    GraphQL 完全不能解决版本控制问题。相反,我认为它实际上使情况变得更糟。 你必须支持移动应用程序吗?你应该意识到,发布原生应用需要时间。...GraphQL 服务器可以自由地使用它期望的任何类型进行响应。如果你发送一个查询,则服务器的响应可以不符合自省响应中的 GraphQL 模式。以 Apollo Federation 为例。...6 减少记录和浏览 API 的时间 下一节将介绍如何将 OAS 这样的工具用于 RESTful API 开发,以及在微服务环境中维护多个 OAS 所面临的挑战。...Kyle 将一个 GraphQL 模式和分散在多个 Git 存储库中的 Swagger 文件进行了对比。...我认为,浏览一个 GraphQL 模式显然比查看 Git 存储库中的多个 OAS 文件要简单许多。不过,公平起见,我们必须进行同等比较。

    2.5K10

    在 redux 应用中使用 GraphQL

    您需要编写自定义代码来调用服务器接口,解释数据,对其进行规范化并将其插入到存储中 - 同时跟踪各种错误和加载状态。 在本教程中,您将学习如何通过 Apollo Client 来获取和管理数据。...我们启动的服务器支持从一个 SQLite 数据库中进行 GraphQL 查询。...客户端正在运行,现在是开始添加 GraphQL 客户端的时候了。我们的目标是使用 GraphQL 查询,从服务器轻松获取数据并将其呈现在着陆页(HomeView)中。 3....这样我们就把一个 GraphQL 客户端添加进了一个普通的 Redux 应用中。 接下来让我们开始第一个 GraphQL 查询吧。 4....在我们的 GraphQL 服务器中,并没有定义如何获取 authors。

    2.5K10

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

    现在,客户端和服务器团队可以以一种更好的方式在 API 设计上开展合作,缩短迭代时间,共享自动生成的文档,它们让每次 API 更新对每个人都可见。...在大多数情况下,向 GraphQL API 发出的每个请求要么是没有副作用的Query实例,要么是会修改存储在服务器上的对象的Mutation实例。...请注意,allTodos字段的offset参数是缺失的。作为可选项,它的缺失意味着它有null值。如果服务器提供这种模式,文档中可能会声明,null偏移量意味着默认情况下应该返回第一页。...有很多流行的开源项目都在使用 GraphQL:这个博客是基于静态站点生成器 Gatsby,它将 GraphQL 查询的结果转换成数据,然后呈现到 HTML 文件中。...另外值得一提的两个 GraphQL 库是 PostGraphile 和 Apollo。

    3.2K30

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

    它提供了一些很棒的想法,比如无状态服务器和结构化的资源访问。...代码即是文档 GraphQL 会把 schema 定义和相关的注释生成可视化的文档,从而使得代码的变更,直接就反映到最新的文档上,避免 RESTful 中手工维护可能会造成代码、 文档不一致的问题 参数类型强校验...5.1 使用graphQl简单查询 安装 找到Vue中集成GraphQl的文档 https://github.com/vuejs/apollo https://vue-apollo.netlify.app...:apolloClient }) 使用apollo Provider选项将它添加到你的应用程序 new Vue({     el:'#app',     apolloProvider,     render...data(){         return {              msg:'我是一个 home 组件'          }      },     // Apollo 具体选项     apollo

    6K42

    GraphQL-to-REST API Connectors是Apollo的“最伟大的成就”

    纽约——在 Apollo GraphQL 峰会 2024 上发布的 Apollo GraphQL Connectors 标志着 Apollo 在简化 API 集成 方面迄今为止最重要的创新之一。...随着针对 REST API 的 Apollo Connectors 的推出,开发人员可以逐步或一次性地将 REST API 集成到 联邦 GraphQL 架构中。...更具体地说,正如 Apollo 的 Dylan Anthony 在一篇 博文 中所说,在Connectors 发布之前,开发人员在将 REST 服务添加到联邦 GraphQL API 时必须采取许多额外的步骤...将任何类型的代码部署到 Coinbase 的模式中都具有挑战性,因为它需要 15 到 20 分钟才能完成部署。...“但以我们目前的吞吐量,它不一定会解决我们所有的问题——你总是需要一台服务器。” Apollo 之所以为 REST 设计 Connectors,是因为它仍然是最流行的 API 格式。

    50410

    为 Vue 配置 GraphQL API

    使用 Vue Apollo Vue Apollo[2] 是一个三方库,可以让你在 Vue 的应用中使用 GraphQL,使用起来也很轻松,在上述 hello-world 目录下,也就是 package.json...同级的目录下,打开命令窗口执行: vue add apollo 这个命令会自动安装 npm 包:graphql graphql-tag @apollo/client。...Django 里面的 graphql 的查询语句,因为需要传入参数,这里外层做了一下封装,不要问为啥这样写,这是 apollo 规定好了的,我们只需要比葫芦画瓢,如下: query categoryByName...到这里,我们已经实现了前端通过 GraphQL API 获取后端数据的过程。 其实,Vue Apollo 还有很多功能,比如上传文件。...CORS (Cross-origin resource sharing) 就是跨域资源共享,django 的域是 localhost:8000,而 Vue 的域是 localhost:8080,他们是两个不同的域

    1.5K20

    GraphQL项目中前端如何预生成Persisted Query

    然而常见的 HTTP 缓存只能存储 GET 响应,对于其他类型的响应则无能为力。/ 当然, 我们可以将默认的请求类型改为GET, 但是当schema过大的时候 ,就会出问题了....消息体暴露带来的安全问题 我们在请求的时候, 可以从http请求的Headers里面看到我们的query, 里面有完整的schema, 那么有没有解决这两点的办法呢?...Automatic persisted queries - Apollo Server - Apollo GraphQL Docs 简单翻译一下就是, 一个短dash代替一个超长的graphql schema....graphql 文件 去遍历获得它的fragment 通过AST给每一个节点上面添加__typename (这一步可能不需要, 因为如果你的请求设置了不带__typename, 就没必要了) hash...它 后端存储 贴上我的实现代码, 方便直接使用 // parseSchemaToJson const { resolve, dirname } = require('path') const { readFileSync

    1.4K20

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

    用GraphQL 之所以要使用GraphQL主要出于几方面的考虑。首先我们的业务复杂度高,应用本身的业务场景极其复杂,涉及到纺织行业大大小小几十个业务场景和十几个不同工种功能之间的联动与交互。...方法主要用来重写header,在header中添加资源字段。...我们通过阿里云物联网套件来实现服务器端和树莓派之间的通信,设备可以发布和订阅一些数据到MQTT中 ,每隔一段时间就会有心跳包从设备上传到MQTT,以此来更新页面数据。...当用户发现设备版本和服务器版本存在差异,执行需要更新的时候,本质上是发送动态操作到GraphQL API层,然后由GraphQL API层发送消息到设备 ,之后消息通过SDK API到达MQTT,接着发布一系列的请求到设备...还有资源对象和id重复导致资源数据被覆盖的问题,这是由Apollo的数据存储的特性所造成的,Apollo的每个资源对象的类型和id是定义数据字段唯一的标识。

    8.1K20

    GraphQL 基础实践

    而 GraphQL 就是为了解决这些问题而来的,向服务端发送一次描述信息,告知客户端所需的所有数据,数据的控制甚至可以精细到字段,达到一次请求获取所有所需数据的目的。...那么,上面的这个请求描述称为一个 GraphQL 请求体,请求体即用来描述你要从服务器上取什么数据用的。一般请求体由几个部分组成,从里到外了解一下。 首先是字段,字段请求的是一个数据单元。...类似于 JavaScript 的结构。GraphQL 的片段结构符号将片段内的字段“结构”到选择集中。 ? 接口(Interface) 与其他大多数语言一样,GraphQL 也提供了定义接口的功能。...将它安装到我们的项目中:npm install apollo-server-core graphql --save 编写中间件 runHttpQuery主要接受两个参数,第一个是 GraphQLServerOptions...接下来引用到我们中间件的handle配置中,完美,大功告成,用 ThinkJS 搭建的 GraphQL 服务器就此告一段落,npm start 运行起来之后,用 GraphiQL “播放”一下你的请求体

    13.8K20

    大前端时代你的VSCode插件

    用户可以定义要匹配的字符以及要使用的颜色。 ? C/C++ 此扩展的版本为C / C ++添加了对Visual Studio Code的语言支持,如果你写 Node.js 很有必要安装它。 ?...它可以帮助您通过Git责备注释和代码镜头一目了然地查看代码作者身份,无缝导航和探索Git存储库,通过强大的比较命令获得有价值的见解,以及更多。 ?...VS Live Share 此外,与传统的结对编程不同,Visual Studio Live Share允许开发人员一起工作,同时保留他们的个人编辑器首选项(例如主题,键绑定),以及拥有自己的光标。...Apollo GraphQL 丰富的编辑器支持GraphQL客户端和服务器开发,可与Apollo平台无缝集成。 ? Go 此扩展为Go代码添加了对Go语言的丰富语言支持。 ?...使用此扩展,您可以调试代码并从命令选项板快速运行react-native命令。 ? Reactjs code snippets 此扩展包含Reactjs的代码片段。 ?

    1.7K30

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

    这个项目涉及到整合不同的数据源,以及一些现有和全新的系统。...最终我们选择了Apollo GraphQL+gRPC+React+TypeScript这样一套技术栈,并对使用它们的结果感到满意。...GraphQL 当听到我们需要在这个项目中“整合许多不同的数据源”时,我立即意识到使用GraphQL作为API网关会是一个不错的选择。...我们团队的主要经验都是在构建React应用上,而且我们也没有找到任何令人信服的理由来换到别的选项上。...为了保证GraphQL server和前端之间的类型安全,我们使用Apollo CLI的代码生成器:使用命令行来生成我们所有GraphQL查询的类型: React示例 在我们的应用中需要用到三种查询:

    3.5K20

    2019-Web开发技术指南和趋势

    学会如何部署一个静态网站到服务器 注册一个域名(NameCheap, Google Domains) 管理共享主机或虚拟机(Inmotion, Hostgator, Bluehost) FTP, SFTP...对于使用框架的大型前端项目, 你也许需要使用状态管理工具去管理你的应用级的状态 Redux(Context API) Apollo(GraphQL Client) Vuex NgRx 2.5 满足一个成熟的前端开发者条件...使用到了 Chromium内核和Node.js 兼容Windows, Mac & Linux 崩溃报告, 调试和性能分析 4.3 GraphQL & Apollo GraphQl是对于API的一种革命性新方法...只查询你想要的东西 前端和后端可以合作得更为顺利 查询语句非常简单且很像JSON语句 Apollo是一个发送请求到GraphQL的客户端 使用的是Gatsby静态站点生成器 4.4 TypeScript...TypeScript是一个JavaScript的超集, 它添加了静态类型等很多特性.

    4.3K20
    领券