GET 请求 GET 请求一般用来向服务器请求获取数据。总体来说目前有两种传参风格类型。 多参数拼接 这是我们最常见的传递方式,它一般传参方式如下: GET /api/v1/user?...在 Spring MVC 中这种参数可以被对象接收: @GetMapping("/user") public Rest<?...例如查询标识为1的用户: GET /api/v1/user/1 HTTP/1.1 Host: localhost:8080 查询第1页(每页10条)的用户: GET /api/v1/users/1/10...POST/PUT 请求 GET 请求是从服务端获取数据的,而 POST 请求则是向服务端发送数据。很多不清楚它们之间区别的同学会混用它们。...Spring MVC 中我们可以直接使用对象来接收: @PostMapping("/login") public Rest<?
最初,我主要使用 RESTful API,但随着前端需求的日益复杂,REST 的一些局限性逐渐显现,比如数据过载(获取的字段太多)和数据不足(一次请求拿不到所需的数据)。...后来,我接触了 GraphQL,它的灵活性和高效性让我眼前一亮。今天,我就来和大家聊聊如何使用 GraphQL 进行 API 设计,并通过一个实际项目代码示例,让你轻松上手。什么是 GraphQL?...GraphQL 由 Facebook 在 2015 年开源,是一种用于 API 查询的语言,允许客户端精确请求所需数据,避免数据冗余。...单一端点:所有请求都通过同一个 URL 处理,不需要多个 REST 端点。强类型:数据结构在 Schema 层定义清晰,避免前后端数据不匹配问题。有了这些优势,我们可以构建更加高效、易维护的 API。...相比传统的 REST API,它可以减少数据传输,提高查询效率,同时也让前端开发更加自由。如果你还没用过 GraphQL,不妨从这篇文章的示例开始实践,相信你会爱上它的强大之处!
作者 | Brian Rinaldi 译者 | 王强 策划 | 李俊辰 除了 REST 以外,很多 API 都开始支持 GraphQL,甚至完全支持它了。...GraphQL 请求的基础知识 与 RESTful API 不同,GraphQL 具有单个端点。...尽管 GraphQL 可以响应 GET 请求,但是一个典型的 GraphQL HTTP 请求是作为一个 POST 请求发送的。...如果你将一个 GraphQL 作为一个 GET 请求发送,则需要将以上内容作为查询参数传递。鉴于 GraphQL 查询可能会变得很长,这实际上不是最佳选择,因此我们还是考虑 POST 请求。...POST 请求。
强大的地方在于实现了一套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同一个作者。
前言 上篇文章中,我们介绍了 GraphQL 和 REST Api 的优劣势,今天我们以 REST API 为例聊聊如果一个前端想做全栈,会怎么选择!...Next.js 构建一个项目, 并且结合了 OpenAPI 和 Prisma 来实现数据库操作和 API 生成。...什么是 OpenAPI OpenAPI 是一个用于描述 REST API 的标准化规范(原称为 Swagger 规范)。...useUnionTypes: true, exportCore: true, exportSchemas: true, exportServices: true, }); 生成的代码如下: 使用fetch请求用户列表...scripts/: 包含用于生成服务、DAO 和 Prisma 模型的脚本。 src/: 包含应用的主要代码,包括 API、控制器、DAO 和服务。
操作 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。
操作 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。
比如 GET 请求 /students 查询所有学生,/students/1 查询 id 为 1 的学生 发送 POST、PUT、DETETE 请求分别代表增删改。...的 api 了: import { Injectable, OnModuleInit } from '@nestjs/common'; import { PrismaClient } from '@prisma...请求用 @Body() 注入请求体,@Query 拿路径中的参数: 把服务跑起来试一下: npm run start:dev 首先是 list,现在没有数据: 然后添加一个: 服务端打印了 insert.../prisma.service'; import { GraphQLModule } from '@nestjs/graphql'; import { ApolloDriver } from '@nestjs...后端用 Nest + GraphQL + Prisma + MySQL。
posts Post[] } model Post { id Int @id @default(autoincrement()) title String content...}) // 分页查询 await prisma.post.findMany({ skip: 10, take: 5, }) 可视化管理:Prisma Studio npx prisma studio...$transaction([ prisma.user.create({ data: { name: 'Alice' } }), prisma.post.create({ data: { title...: 'Hello' } }), ]) 与 GraphQL 的结合 如果项目中使用 Apollo Server,可以直接在 resolver 中使用 Prisma 操作数据库: const resolvers...通过今天的教程,相信你已经对 Prisma 的使用有了基本掌握。后续还可以结合 REST、GraphQL、Serverless 等架构深入使用。
正文 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
强大的地方在于实现了一套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
RPC如何工作 客户端唤醒远端程序,序列化参数,并在消息中添加额外的信息,然后将消息发送给服务端。在接收到客户端的消息后,服务端会反序列化消息中的内容,执行请求的操作,并将结果返回给客户端。...过度获取和不足获取问题:由于有时候会出现包含的数据过多或过少的情况,导致在接收到REST的响应之后,通常还会需要另一个请求。...因此,GraphQL被认为是一种改变API规则的风格。 GraphQL 的语法描述了如何发起精确的数据请求。GraphQL适合那些相互之间具有复杂实体引用关系的应用数据模型。 ?...GraphQL如何工作 一开始,GraphQL会创建一个schema(模式),它描述了在一个GraphQL API中的所有请求以及这些请求返回的所有types。...在给服务端发送包含大量查询的请求之后,API会返回一个JSON响应,内容正对应请求的资源。 ? 除RESTful CRUD操作外,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
它作为 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 {
值得注意的是,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
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调用。
GraphQL:如何构建灵活的数据 API,让前后端握手言和?在 Web 开发世界里,前后端“吵架”似乎是常态。后端开发者希望返回结构清晰的数据,而前端开发者希望只拿自己需要的字段,不要多、不用少。...REST API 虽然经典,但数据结构固定,往往造成前端拿到了一大堆自己不需要的数据,或者缺少一些关键信息,不得不再请求一次,白白增加了网络开销。...这时候,GraphQL 作为一种新型 API 设计方式,就像是一个调解员,帮我们解决这个数据沟通问题。今天,我就来聊聊如何使用 GraphQL 构建一个灵活的数据 API,让开发变得更加顺畅!...这不仅优化了网络请求,还让 API 更加高效灵活。 如何搭建 GraphQL API?...相比 REST,它让前端拥有了更大的自由度,避免了 “拿到一大堆没用数据” 和 “不得不发多个请求” 的问题。同时,它还支持实时订阅、数据合并等高级特性,让 API 更加智能。
本文首先介绍了 GraphQL,再通过 MongoDB + graphql + graph-pack 的组合实战应用 GraphQL,详细阐述如何使用 GraphQL 来进行增删改查和数据订阅推送,并附有使用示例...2.5 请求格式 GraphQL 最常见的是通过 HTTP 来发送请求,那么如何通过 HTTP 来进行 GraphQL 通信呢 举个栗子,如何通过 Get/Post 方式来执行下面的 GraphQL 查询呢...query { me { name } } Get 是将请求内容放在 URL 中,Post 是在 content-type: application/json 情况下,将 JSON 格式的内容放在请求体里...query={me{name}} # Post 方式的请求体 { "query": "...", "operationName": "......,详细用法可以参考 Prisma 文档 ?
当进行网络请求和 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
当进行网络请求和 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(