本文概述
- 也就是说, 什么是GraphQL API?
- 什么是GraphQL查询?
- 使用GraphQL API的目的是什么?
- GraphQL是否比REST更好?
- 为什么我们使用Node.js?
- 动手GraphQL教程
- 让我们编码吧!
- 总结和最终想法
可能想到的一些问题可能是:
- 使用GraphQL API的目的是什么?
- 什么是GraphQL API?
- 什么是GraphQL查询?
- GraphQL有什么好处?
- GraphQL是否比REST更好?
- 为什么我们使用Node.js?
- 你今天发现的几乎每个解决方案都使用某种应用程序编程接口(API)。
- 即使仅使用Facebook或Instagram之类的社交网络, 你仍将连接到使用API??的前端。
- 如果你感到好奇, 你会发现几乎所有的在线娱乐服务都使用不同类型的API, 包括Netflix, Spotify和YouTube等服务。
借助结构良好的API, 可以拥有可以为多种客户端和前端应用程序提供服务的可靠, 可维护和可扩展的API。
也就是说, 什么是GraphQL API? GraphQL是一种API的查询语言, 专为在Facebook内部使用而开发, 并于2015年发布以供公众使用。它支持读取, 编写和实时更新。它也是开源的, 通常与REST和其他体系结构进行比较。概括地说, 它基于:
- GraphQL查询-这允许客户端读取和操纵应如何接收数据。
- GraphQL突变-这是如何在服务器上写入数据。这是关于如何将数据写入系统的GraphQL约定。
什么是GraphQL查询? 如前所述, 查询是客户端可以从API读取和操作数据的方式。你可以传递对象的类型, 然后选择要接收的字段类型。一个简单的查询如下所示:
query{
users{
firstName, lastName
}
}
在此查询中, 我们尝试从用户的架构访问所有用户, 但只接收firstName和lastName。该查询的结果如下所示:
{
"data": {
"users": [
{
"firstName": "Marcos", "lastName": "Silva"
}, {
"firstName": "Paulo", "lastName": "Silva"
}
]
}
}
客户端使用非常简单。
使用GraphQL API的目的是什么? 创建API的目的是具有将软件即服务与其他外部服务集成的能力。即使你的应用程序由单个前端使用, 你也可以将此前端视为外部服务, 为此, 当通过API提供两者之间的通信时, 你将能够在不同的项目中工作。
如果你在大型团队中工作, 则可以将其拆分成一个前端团队和一个后端团队, 从而允许他们使用相同的技术并简化他们的工作。在设计API时, 重要的是要选择最适合该项目的方案, 这将使你更接近所需的解决方案。
在本文中, 我们将重点介绍构建使用GraphQL的API的框架。
GraphQL是否比REST更好? 可能有点解决问题, 但我无能为力:要看情况。
【如何创建安全的Node.js GraphQL API】GraphQL是一种非常适合多种方案的方法。 REST是一种架构方法, 也已在多种情况下得到证明。如今, 有成千上万的文章解释了为什么一个比另一个更好, 或者为什么只使用REST而不是GraphQL。而且, 你可以采用多种方式在内部使用GraphQL, 并且仍将API的端点维护为基于REST的体系结构。
最好的指导是了解每种方法的好处, 分析你正在创建的解决方案, 评估你的团队使用该解决方案的舒适度, 并评估你是否能够指导你的团队学习和起步。在选择方法之前要加快速度。
本文更多是实用指南, 而不是对GraphQL和REST的主观比较。如果你想阅读两者的详细比较, 建议你阅读我们的另一篇文章GraphQL与REST-GraphQL教程。
在今天的文章中, 我们将重点介绍使用Node.js创建GraphQL API。
为什么我们使用Node.js? GraphQL有几个可以使用的不同库。就本文而言, 由于它们的广泛使用以及Node.js允许开发人员将熟悉的前端语法用于服务器端开发的事实, 我们决定将JavaScript与Node.js一起使用。
与我们的基于REST的API的方法进行比较也很有用, 类似于另一篇srcmini Engineering博客文章:在Node.js中创建安全REST API所演示的方法。本文还展示了如何将Node.js与Express一起使用来开发骨架REST API, 这将使你能够比较这两种方法之间的一些差异。 Node.js还设计为具有可扩展的网络应用程序, 全球社区以及可以在npm网站上找到的几个开源库。
这次, 我们将展示如何使用GraphQL, Node.js和Express构建骨架API!
动手GraphQL教程 如前所述, 我们将为GraphQL API建立一个基本概念, 并且你需要先了解Node.js和Express的基础知识。此处提供了针对此GraphQL示例创建的项目的源代码。
我们将处理两种类型的资源:
- 用户, 我们将为其处理基本的CRUD。
- 产品, 我们将对其进行详细介绍以展示GraphQL的更多功能。
- id
- 名字
- 姓
- 电子邮件
- 密码
- PermissionLevel
- id
- 名称
- 描述
- 价钱
让我们编码吧! 首先, 请确保你安装了最新的Node.js版本。在发布之时, 根据Nodejs.org, 当前版本为10.15.3。
初始化项目
让我们从一个可以命名为node-graphql的新文件夹开始。在这里, 我们可以打开终端或Git CLI控制台, 并使用以下命令启动魔术:npm init。
配置我们的依赖项和TypeScript
为了加快这一过程, 在我们的Git存储库中将package.json替换为以下内容应包含所有必要的依赖项:
{
"name": "node-graphql", "version": "1.0.0", "description": "", "main": "dist/index.js", "scripts": {
"tsc": "tsc", "start": "npm run tsc &
&
node ./build/app.js"
}, "author": "", "license": "ISC", "dependencies": {
"@types/express": "^4.16.1", "@types/express-graphql": "^0.6.2", "@types/graphql": "^14.0.7", "express": "^4.16.4", "express-graphql": "^0.7.1", "graphql": "^14.1.1", "graphql-tools": "^4.0.4"
}, "devDependencies": {
"tslint": "^5.14.0", "typescript": "^3.3.4000"
}
}
使用更新的package.json, 再次在终端上使用:npm install。它将在Node.js和Express中安装运行此GraphQL API所需的所有依赖项。
下一部分是配置我们的TypeScript模式。我们需要在根文件夹中包含以下名称的文件tsconfig.json:
{
"compilerOptions": {
"target": "ES2016", "module": "commonjs", "outDir": "./build", "strict": true, "esModuleInterop": true
}
}
此配置代码的逻辑将出现在app文件夹中。在这里我们可以创建一个app.ts文件, 并为进行基本测试在其中添加以下代码:
console.log('Hello Graphql Node API tutorial');
通过我们的配置, 我们现在可以运行npm start并等待构建, 并且能够测试一切正常。在终端控制台中, 你应该看到我们的” Hello GraphQL Node API教程” 。在后台, 配置基本上将TypeScript代码编译为纯JavaScript, 然后在build文件夹中执行构建。
现在, 我们为GraphQL API配置一个基本框架。为了开始我们的项目, 我们将添加三个基本导入:
- 表现
- 表达图
- 图形工具
import express from 'express';
import graphqlHTTP from 'express-graphql';
import {makeExecutableSchema} from 'graphql-tools';
现在我们应该可以开始编写一些代码了。下一步是处理Express中的应用程序和基本的GraphQL配置, 例如:
import express from 'express';
import graphqlHTTP from 'express-graphql';
import {makeExecutableSchema} from 'graphql-tools';
const app: express.Application = express();
const port = 3000;
let typeDefs: any = [`
type Query {
hello: String
}type Mutation {
hello(message: String) : String
}
`];
let helloMessage: String = 'World!';
let resolvers = {
Query: {
hello: () =>
helloMessage
}, Mutation: {
hello: (_: any, helloData: any) =>
{
helloMessage = helloData.message;
return helloMessage;
}
}
};
app.use(
'/graphql', graphqlHTTP({
schema: makeExecutableSchema({typeDefs, resolvers}), graphiql: true
})
);
app.listen(port, () =>
console.log(`Node Graphql API listening on port ${port}!`));
我们正在做的是:
- 为我们的Express服务器应用程序启用端口3000。
- 定义我们想用作快速示例的查询和变异。
- 定义查询和变异的工作方式。
- typeDefs-关于查询和变异的期望的架构定义。
- 解析器-在这里, 我们定义查询和变异应如何工作的功能和行为, 而不是字段或所需参数的期望。
- 查询-我们要从服务器读取的” 获取” 。
- 突变-我们的请求将影响我们在自己服务器上拥有的任何数据。
现在, 我们可以尝试通过以下方式在我们自己的服务器上查询和测试GraphQL API:http:// localhost:3000 / graphql
文章图片
太好了, 现在我们可以编写第一个自己的查询, 定义为” 你好” 。
文章图片
请注意, 我们在typeDefs上定义它的方式可以帮助我们构建查询。
很好, 但是我们如何改变价值呢?变异!
现在, 让我们看看通过突变更改内存值时会发生什么:
文章图片
现在, 我们可以使用GraphQL Node.js API进行基本的CRUD操作。现在让我们继续进行代码。
产品展示
对于产品, 我们将使用称为产品的模块。为了简化本文, 我们将仅使用内存数据库进行演示。我们将定义模型和服务来管理产品。
我们的模型将基于以下内容:
export class Product {
private id: Number = 0;
private name: String = '';
private description: String = '';
private price: Number = 0;
constructor(productId: Number, productName: String, productDescription: String, price: Number) {
this.id = productId;
this.name = productName;
this.description = productDescription;
this.price = price;
}}
将与GraphQL通信的服务将定义为:
export class ProductsService {public products: any = [];
configTypeDefs() {
let typeDefs = `
type Product {
name: String, description: String, id: Int, price: Int
} `;
typeDefs += `
extend type Query {
products: [Product]
}
`;
typeDefs += `
extend type Mutation {
product(name:String, id:Int, description: String, price: Int): Product!
}`;
return typeDefs;
}configResolvers(resolvers: any) {
resolvers.Query.products = () =>
{
return this.products;
};
resolvers.Mutation.product = (_: any, product: any) =>
{
this.products.push(product);
return product;
};
}}
用户数
对于用户, 我们将遵循与产品模块相同的结构。我们将为用户提供模型和服务。该模型将定义为:
export class User {
private id: Number = 0;
private firstName: String = '';
private lastName: String = '';
private email: String = '';
private password: String = '';
private permissionLevel: Number = 1;
constructor(id: Number, firstName: String, lastName: String, email: String, password: String, permissionLevel: Number) {
this.id = id;
this.firstName = firstName;
this.lastName = lastName;
this.email = email;
this.password = password;
this.permissionLevel = permissionLevel;
}}
同时, 我们的服务将像:
const crypto = require('crypto');
export class UsersService {public users: any = [];
configTypeDefs() {
let typeDefs = `
type User {
firstName: String, lastName: String, id: Int, password: String, permissionLevel: Int, email: String
} `;
typeDefs += `
extend type Query {
users: [User]
}
`;
typeDefs += `
extend type Mutation {
user(firstName:String, lastName: String, password: String, permissionLevel: Int, email: String, id:Int): User!
}`;
return typeDefs;
}configResolvers(resolvers: any) {
resolvers.Query.users = () =>
{
return this.users;
};
resolvers.Mutation.user = (_: any, user: any) =>
{
let salt = crypto.randomBytes(16).toString('base64');
let hash = crypto.createHmac('sha512', salt).update(user.password).digest("base64");
user.password = hash;
this.users.push(user);
return user;
};
}}
提醒一下, 可以从此链接使用源代码。
现在我们可以播放和测试我们的代码了。让我们运行npm start。我们将在端口3000上运行服务器。我们现在可以在http:// localhost:3000 / graphql上访问GraphQL进行测试。
让我们尝试一种将商品添加到我们的产品列表的变体:
文章图片
为了测试它是否有效, 我们现在将使用产品查询, 但只接收ID, 名称和价格:
query{
products{
id, name, price
}
}The response will be:
{
"data": {
"products": [
{
"id": 100, "name": "My amazing product", "price": 400
}
]
}
}
就是这样;产品运行正常。现在, 我们可以根据需要播放和切换字段。你可以尝试添加描述:
query{
products{
id, name, description, price
}
}
现在, 我们可以对我们的产品进行描述。让我们现在尝试用户。
mutation{
user(id:200, firstName:"Marcos", lastName:"Silva", password:"amaz1ingP4ss", permissionLevel:9, email:"[email
protected]") {
id
}
}
一个查询将类似于:
query{
users{
id, firstName, lastName, password, email
}
}
响应如下:
{
"data": {
"users": [
{
"id": 200, "firstName": "Marcos", "lastName": "Silva", "password": "kpj6Mq0tGChGbZ+BT9Nw6RMCLReZEPPyBCaUS3X23lZwCCp1Ogb94/oqJlya0xOBdgEbUwqRSuZRjZGhCzLdeQ==", "email": "[email
protected]"
}
]
}
}
现在我们的GraphQL骨架已经准备好了!从这里到实用的功能齐全的API尚有许多步骤, 但现在已设置了基本核心。
总结和最终想法 即使缩短技巧, 这篇文章也相当丰富, 其中包含有关GraphQL Node.js API开发的许多基本信息。
让我们回顾一下到目前为止所涵盖的内容:
- 将Node.js与Express和GraphQL结合使用以构建GraphQL API;
- GraphQL的基本用法;
- 查询和变异的基本用法;
- 为你的项目创建模块的基本方法;
- 测试我们的GraphQL API;
- 新项目验证;
- 使用通用错误服务正确处理错误;
- 验证用户可以在每个请求中使用通用服务的字段;
- 添加JWT拦截器以保护API;
- 使用更有效的方法处理密码哈希;
- 添加单元和集成测试;
这只是可用于开始设计自己的GraphQL API的众多方法之一。此外, 请确保更详细地阅读和探索GraphQL, 了解它所提供的功能以及如何使你的API更好。
推荐阅读
- 使用Spring Boot进行OAuth2和JWT REST保护
- 使用Laravel构建GraphQL服务器
- 加快生产中故障排除速度的7种调试技术
- 深入浅出(创建Flask项目完整实例步骤)
- Android-HttpURLConnection-Get与Post请求登录功能
- app内嵌 h5页面 再滑动的时候 触发击穿底下的一些touchstart事件
- Jmeter设置代理,抓包之app请求
- [Java] SpringMVC工作原理之二(HandlerMapping和HandlerAdapter)
- 微信扫一扫二维码直接打开外部浏览器下载app怎么解决