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

使用 GraphQL 进行 API 设计:从入门到实战

最初,我主要使用 RESTful API,但随着前端需求的日益复杂,REST 的一些局限性逐渐显现,比如数据过载(获取的字段太多)和数据不足(一次请求拿不到所需的数据)。...后来,我接触了 GraphQL,它的灵活性和高效性让我眼前一亮。今天,我就来和大家聊聊如何使用 GraphQL 进行 API 设计,并通过一个实际项目代码示例,让你轻松上手。什么是 GraphQL?...GraphQL 由 Facebook 在 2015 年开源,是一种用于 API 查询的语言,允许客户端精确请求所需数据,避免数据冗余。...单一端点:所有请求都通过同一个 URL 处理,不需要多个 REST 端点。强类型:数据结构在 Schema 层定义清晰,避免前后端数据不匹配问题。有了这些优势,我们可以构建更加高效、易维护的 API。...相比传统的 REST API,它可以减少数据传输,提高查询效率,同时也让前端开发更加自由。如果你还没用过 GraphQL,不妨从这篇文章的示例开始实践,相信你会爱上它的强大之处!

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

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

    强大的地方在于实现了一套GraphQL的缓存方案(GraphQL不像REST API那样可以用URL作为缓存的key,它只有单个schema,要缓存必须基于Schema拍平整个数据结构,然后再基于各个field...Server以中间件的形式挂载到一个Node应用上(我就是使用这种方式来同时提供REST和GraphQL两套API的,但需要注意某些中间件的配置需要ignore掉挂载的路径) GraphQL-Yoga...还提供了中间件(注意和服务端框架的中间件区分)、鉴权(推荐GraphQL API的鉴权只使用它提供的)、扩展、指令、联合类型等。作者也很厉害,提供了和NestJS以及Prisma各自的集成包。...GraphiQL[45],可视化的GraphQL API调试工具,直观的查看你的Schema、发起请求、查看问题,有一个增强版本是支持通过点击单选框生成查询语句,一时没找到。...JSON-Server[101],写demo神器,从JSON文件快速得到一个REST API,和Husky、LowDB同一个作者。

    5.6K10

    1.1 REST

    操作 API难免会有一个非CRUD的操作,例如“存档”这个操作。...GraphQL允许客户端定义需要得到的数据结构,服务器精确的返回所需的数据结构,例如: 与REST和RPC不同,GraphQL API只需要一个端点;它也不需要使用不同的HTTP动词,它只使用POST...相对REST和RPC,GraphQL有下面几个优势: 节省了多重的请求往返,GraphQL可以一次把所需的关联数据全部查询出来。不会存在例如N+1这样的问题 避免了API版本问题。...针对CRUD类的API,使用REST 针对暴露很多动作的API,使用RPC 当你需要查询的灵活性以及维护的连续性时,使用GraphQL 二、事件驱动式 Web API 针对用请求-响应式...2.1 WebHooks WebHook就是一个接收HTTP POST(或GET,PUT,DELETE)的URL。

    1.7K21

    常见形式 Web API 的简单分类总结

    操作 API难免会有一个非CRUD的操作,例如“存档”这个操作。...与REST和RPC不同,GraphQL API只需要一个端点;它也不需要使用不同的HTTP动词,它只使用POST,你需要在JSON body里面指定是要执行查询还是修改。...相对REST和RPC,GraphQL有下面几个优势: 节省了多重的请求往返,GraphQL可以一次把所需的关联数据全部查询出来。不会存在例如N+1这样的问题 避免了API版本问题。...针对CRUD类的API,使用REST 针对暴露很多动作的API,使用RPC 当你需要查询的灵活性以及维护的连续性时,使用GraphQL 二、事件驱动式 Web API 针对用请求-响应式...2.1 WebHooks WebHook就是一个接收HTTP POST(或GET,PUT,DELETE)的URL。

    3.7K50

    RedwoodJS:乱拳打倒老师傅 NextJS,上手体验全能选手给你提供的开发部署一条龙服务!

    正文 RedwoodJS 是为全栈开发者设计的一站式框架,它结合了 React、GraphQL、Prisma、TypeScript 等技术,旨在大幅降低开发难度。...API 在 http://localhost:8911/graphql 浏览器输入:http://localhost:8911/graphql,进入 graphql: graphql 整体主要的项目结构如下...配置数据库 RedwoodJS 默认使用 SQLite,配置文件在 api/db/schema.prisma 中。...自动生成后端 API 用 CLI 快速生成 SDL(Schema Definition Language)和服务逻辑: yarn rw generate sdl Post yarn rw generate...了解 RedwoodJS 的 Cell 在 RedwoodJS 中,数据请求采用 Cell 机制,统一处理四种状态: Loading Empty Failure Success 比如自动生成的 PostsCell.tsx

    21810

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

    强大的地方在于实现了一套GraphQL的缓存方案(GraphQL不像REST API那样可以用URL作为缓存的key,它只有单个schema,要缓存必须基于Schema拍平整个数据结构,然后再基于各个field...Server以中间件的形式挂载到一个Node应用上(我就是使用这种方式来同时提供REST和GraphQL两套API的,但需要注意某些中间件的配置需要ignore掉挂载的路径) GraphQL-Yoga...还提供了中间件(注意和服务端框架的中间件区分)、鉴权(推荐GraphQL API的鉴权只使用它提供的)、扩展、指令、联合类型等。作者也很厉害,提供了和NestJS以及Prisma各自的集成包。...GraphiQL,可视化的GraphQL API调试工具,直观的查看你的Schema、发起请求、查看问题,有一个增强版本是支持通过点击单选框生成查询语句,一时没找到。...但我只是比较简单的使用过,用于和TypeGraphQL一起实现自定义指令,详见 这里 Engine GraphQL Engine其实是一个非常神奇的方向,有点像REST那边的各种自动生成REST API

    3.9K10

    API架构风格对比:SOAP vs REST vs GraphQL vs RPC

    RPC如何工作 客户端唤醒远端程序,序列化参数,并在消息中添加额外的信息,然后将消息发送给服务端。在接收到客户端的消息后,服务端会反序列化消息中的内容,执行请求的操作,并将结果返回给客户端。...过度获取和不足获取问题:由于有时候会出现包含的数据过多或过少的情况,导致在接收到REST的响应之后,通常还会需要另一个请求。...因此,GraphQL被认为是一种改变API规则的风格。 GraphQL 的语法描述了如何发起精确的数据请求。GraphQL适合那些相互之间具有复杂实体引用关系的应用数据模型。 ?...GraphQL如何工作 一开始,GraphQL会创建一个schema(模式),它描述了在一个GraphQL API中的所有请求以及这些请求返回的所有types。...在给服务端发送包含大量查询的请求之后,API会返回一个JSON响应,内容正对应请求的资源。 ? 除RESTful CRUD操作外,GraphQL还有订阅功能,允许接收服务端的实时通知。

    3.7K11

    30分钟理解GraphQL核心概念

    值得注意的是,GraphQL中可以通过Scalar声明一个新的标量,比如: prisma(一个使用GraphQL来抽象数据库操作的库)中,还有DateTime和ID这两个标量分别代表日期格式和主键 在使用...首先,我们分别以REST和GraphQL的角度,以Article为数据模型,编写一系列CRUD的接口,如下: Rest 接口 GET /api/v1/articles/ GET /api/v1/article.../:id/ POST /api/v1/article/ DELETE /api/v1/article/:id/ PATCH /api/v1/article/:id/ GraphQL Query query...,比如: POST /api/v1/messages/ 之后长连接会将新的数据推送给我们,在GraphQL中,我们则会以更加声明式的方式进行声明,如下 subscription { updatedArticle...这意味着Resolver如何返回数据、返回什么样的数据、从哪返回数据,完全取决于Resolver本身,基于这一点,在实际中,很多人往往把GraphQL作为一个中间层来使用,数据的获取通过Resolver

    2.3K40

    《ASP.NET Core 与 RESTful API 开发实战》-- (第7章)-- 读书笔记(下)

    它作为 REST 统一界面约束中的一个子约束,是 REST 架构中最重要、最复杂,也是构建成熟 REST 服务的核心 Richardson 成熟度模型是根据 REST 约束对 API 成熟度进行衡量的一种方法...这些 URL 能够告诉客户端如何使用 API,它们由服务器根据应用程序当前的状态动态生成,而客户端在得到响应后,通过这些 URL 就能够知道服务器提供哪些操作,并使用这些链接与服务器进行交互 7.5 GraphQL...(2)请求方式:REST 充分使用 HTTP 动词来访问不同的端点,而 GraphQL 所有请求都是向服务器相同端点发送类似 JSON 格式的信息 (3)资源表现形式:REST 得到的资源是事先定义好的固定的数据结构...GraphQL 仅使用一个端点即可执行并响应所有 Graph 查询请求,因此它完全可以与 Library.API 项目中现有的 REST 端点共存,弥补 RESTful API 的不足 添加nuget.../// /// 用于接收客户端请求正文中的 Graph 查询 /// public string Query {

    1.3K10

    30分钟理解GraphQL核心概念

    值得注意的是,GraphQL中可以通过Scalar声明一个新的标量,比如: prisma(一个使用GraphQL来抽象数据库操作的库)中,还有DateTime和ID这两个标量分别代表日期格式和主键 在使用...首先,我们分别以REST和GraphQL的角度,以Article为数据模型,编写一系列CRUD的接口,如下: Rest 接口 GET /api/v1/articles/ GET /api/v1/article.../:id/ POST /api/v1/article/ DELETE /api/v1/article/:id/ PATCH /api/v1/article/:id/ GraphQL Query Query...,比如: POST /api/v1/messages/ 之后长连接会将新的数据推送给我们,在GraphQL中,我们则会以更加声明式的方式进行声明,如下 subscription { updatedArticle...这意味着Resolver如何返回数据、返回什么样的数据、从哪返回数据,完全取决于Resolver本身,基于这一点,在实际中,很多人往往把GraphQL作为一个中间层来使用,数据的获取通过Resolver

    1.3K20

    标准化API设计流程!

    vs GraphQL 当涉及到API设计时,REST和GraphQL都有自己的优点和缺点。...下图显示了REST和GraphQL之间的快速比较。 REST 使用标准的HTTP方法,如GET,POST,PUT,CRUD操作。...GraphQL非常适合复杂或频繁变化的前端需求,而REST适合那些首选简单和一致的合同的应用程序。 这两种API方法都不是银弹。仔细评估需求和权衡对于选择正确的风格很重要。...REST和GraphQL都是公开数据和支持现代应用程序的有效选择。 gRPC是如何工作的?...上图说明了gRPC的总体数据流 步骤1:从客户端进行REST调用。请求体通常是JSON格式。 步骤2 ~ 4:订单服务(gRPC客户端)接收REST调用,对其进行转换,并对支付服务进行RPC调用。

    1.1K10

    GraphQL:如何构建灵活的数据 API,让前后端握手言和?

    GraphQL:如何构建灵活的数据 API,让前后端握手言和?在 Web 开发世界里,前后端“吵架”似乎是常态。后端开发者希望返回结构清晰的数据,而前端开发者希望只拿自己需要的字段,不要多、不用少。...REST API 虽然经典,但数据结构固定,往往造成前端拿到了一大堆自己不需要的数据,或者缺少一些关键信息,不得不再请求一次,白白增加了网络开销。...这时候,GraphQL 作为一种新型 API 设计方式,就像是一个调解员,帮我们解决这个数据沟通问题。今天,我就来聊聊如何使用 GraphQL 构建一个灵活的数据 API,让开发变得更加顺畅!...这不仅优化了网络请求,还让 API 更加高效灵活。 如何搭建 GraphQL API?...相比 REST,它让前端拥有了更大的自由度,避免了 “拿到一大堆没用数据” 和 “不得不发多个请求” 的问题。同时,它还支持实时订阅、数据合并等高级特性,让 API 更加智能。

    42110

    Typescript 全栈最值得学习的技术栈 TRPC

    当进行网络请求和 API 调用时,你是否知道本次请求的参数类型以及返回的响应数据类型?...举个 axios 发送 post 请求的例子 这是一个 post 请求用于实现登录的,但是这个响应数据 data 没有任何具体提示(这里的提示是 vscode 记录用户最近输入的提示),这时候如果一旦对象属性拼写错误...tRPC 可以作为 REST/GraphQL 的替代品,如果前端与后端共享代码的 TypeScript monorepo,trpc 则可以无需任何类型转换,也不太会有心智负担。...此时请求变为 post 请求,并且携带的参数也以 body 形式传递。 通过 useQuery 和 useMutation 就能够用 tRPC 实现最基本的 CRUD。...({ where: { id: 1 } }); prisma.post.create({ data: {} }); prisma.post.update(id, { data: {} }); prisma.post.delete

    4.2K51

    Typescript 全栈最值得学习的技术栈 TRPC

    当进行网络请求和 API 调用时,你是否知道本次请求的参数类型以及返回的响应数据类型?...举个 axios 发送 post 请求的例子图片这是一个 post 请求用于实现登录的,但是这个响应数据 data 没有任何具体提示(这里的提示是 vscode 记录用户最近输入的提示),这时候如果一旦对象属性拼写错误...tRPC 可以作为 REST/GraphQL 的替代品,如果前端与后端共享代码的 TypeScript monorepo,trpc 则可以无需任何类型转换,也不太会有心智负担。...:::此时请求变为 post 请求,并且携带的参数也以 body 形式传递。图片图片通过 useQuery 和 useMutation 就能够用 tRPC 实现最基本的 CRUD。...id: 1 } });prisma.post.create({ data: {} });prisma.post.update(id, { data: {} });prisma.post.delete(

    2.7K20
    领券