数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究使用 GraphQL 和 JavaScript 构建 API 驱动的应用程序
近年来，GraphQL 作为传统 RESTful API 的强大替代方案，获得了广泛的关注。它能够高效地检索数据并提供灵活的查询机制，使其成为开发人员构建 API 驱动的应用程序的首选方案之一。在本文中，我们将探讨 GraphQL 的基础知识，并学习如何使用 JavaScript 构建 API 驱动的应用程序。
什么是 GraphQL？
GraphQL 是一种用于 API 的开源查询语言和运行时。它由 Facebook 开发，并于 2015 年公开发布。与 RESTful API（需要多个端点来检索特定数据）不同，GraphQL 允许客户端在单个查询中请求所需的确切数据。它提供了一个强类型的模式，描述了可用的数据，并允许客户端指定所需响应的结构。
GraphQL 旨在通过减少数据的过度获取和不足获取来提高效率。过度获取是指检索比必要数据更多的信息，而不足获取是指需要多个请求才能收集所有所需数据。使用 GraphQL，客户端可以在单个请求中仅获取所需的数据，从而实现更快、更高效的数据检索。
设置 GraphQL 服务器
要开始使用 JavaScript 构建 GraphQL 应用程序，我们需要设置一个 GraphQL 服务器。为此，可以使用多种库，但本文将使用 Apollo Server，这是在 JavaScript 中构建 GraphQL 服务器的流行选择。
首先，让我们安装所需的依赖项：
npm install apollo-server graphql
安装完成后，我们可以开始构建 GraphQL 服务器。创建一个新的 JavaScript 文件 server.js，并添加以下代码：
// server.js
const { ApolloServer, gql } = require('apollo-server');
// Define the GraphQL schema
const typeDefs = gql`
type Query {
hello: String
}
`;
// Define resolvers to handle the query
const resolvers = {
Query: {
hello: () => 'Hello, GraphQL!'
}
};
// Create an instance of ApolloServer
const server = new ApolloServer({ typeDefs, resolvers });
// Start the server
server.listen().then(({ url }) => {
console.log(`Server running at ${url}`);
});
解释
在上面的代码片段中，我们定义了一个简单的 GraphQL 模式，其中包含一个名为 hello 的查询，该查询返回一个字符串。我们还为 hello 查询定义了一个解析器函数，该函数返回字符串“Hello, GraphQL！”。最后，我们创建了一个 ApolloServer 的实例并启动服务器。
要运行服务器，请在终端中执行以下命令：
node server.js
如果一切设置正确，您应该在终端中看到消息“Server running at https://:4000”。
执行 GraphQL 查询
现在我们的 GraphQL 服务器已启动并运行，我们可以对其执行查询。GraphQL 查询是结构化的类似 JSON 的对象，用于定义我们想要检索的数据。
让我们修改我们的模式以包含更复杂的数据类型和查询。按如下方式更新 server.js 中的 typeDefs 常量
// server.js
const typeDefs = gql`
type Book {
title: String
author: String
}
type Query {
books: [Book]
}
`;
解释
在更新后的模式中，我们定义了一个新的 Book 类型，其中包含 title 和 author 字段。我们还修改了 Query 类型以包含 books 字段，该字段返回一个 Book 对象数组。
接下来，更新 server.js 中的 resolvers 常量以提供 books 字段的解析器函数
// server.js
const resolvers = {
Query: {
books: () => [
{ title: 'Harry Potter and the Philosopher's Stone', author: 'J.K. Rowling' },
{ title: 'To Kill a Mockingbird', author: 'Harper Lee' },
{ title: '1984', author: 'George Orwell' }
]
}
};
在 books 的解析器函数中，我们返回一个包含其各自标题和作者的书籍数组。
重新启动服务器，然后让我们使用 GraphQL Playground 测试新的查询。打开浏览器并导航到 https://:4000 以访问 playground。
在 GraphQL Playground 的左侧面板中，输入以下查询
{
books {
title
author
}
}
点击播放按钮或按 Ctrl + Enter 执行查询。您应该在右侧面板中看到以下输出
{
"data": {
"books": [
{
"title": "Harry Potter and the Philosopher's Stone",
"author": "J.K. Rowling"
},
{
"title": "To Kill a Mockingbird",
"author": "Harper Lee"
},
{
"title": "1984",
"author": "George Orwell"
}
]
}
}
该查询检索所有书籍的 title 和 author 字段，并在响应中返回它们。
GraphQL 中的 Mutation
查询用于检索数据，而 Mutation 用于修改数据。让我们修改我们的模式以包含添加新书籍的 mutation。按如下方式更新 server.js 中的 typeDefs 常量：
// server.js
const typeDefs = gql`
type Book {
title: String
author: String
}
type Query {
books: [Book]
}
type Mutation {
addBook(title: String, author: String): Book
}
`;
在更新后的模式中，我们定义了一个新的 Mutation 类型，其中包含一个 addBook 字段，该字段接受 title 和 author 作为参数并返回一个 Book 对象。
接下来，更新 server.js 中的 resolvers 常量以提供 addBook mutation 的解析器函数
// server.js
const resolvers = {
Query: {
// Query resolvers
},
Mutation: {
addBook: (parent, args) => {
const newBook = { title: args.title, author: args.author };
// Logic to save the new book
return newBook;
}
}
};
在 addBook 的解析器函数中，我们使用提供的 title 和 author 参数创建一个新的 book 对象。我们可以在此处添加逻辑以将新书籍保存到数据库或执行任何其他必要的操作。
重新启动服务器并打开 GraphQL Playground。在左侧面板中，输入以下 mutation
mutation {
addBook(title: "The Great Gatsby", author: "F. Scott Fitzgerald") {
title
author
}
}
执行 mutation，您应该看到以下输出：
{
"data": {
"addBook": {
"title": "The Great Gatsby",
"author": "F. Scott Fitzgerald"
}
}
}
mutation 将一个具有提供的 title 和 author 的新书籍添加到数据源，并在响应中返回添加的书籍。
结论
GraphQL 提供了一种强大而高效的方式来构建 API 驱动的应用程序。凭借其灵活的查询机制以及能够在单个请求中检索所需的确切数据的能力，它已成为开发人员的热门选择。在本文中，我们通过构建 GraphQL 服务器、执行查询和执行 mutation，探讨了 GraphQL 与 JavaScript 的基础知识。
我们学习了如何使用 Apollo Server 设置 GraphQL 服务器，并定义了一个包含查询和 mutation 的简单模式。我们执行查询以检索数据并执行 mutation 以修改数据。在整篇文章中，我们提供了带解释的代码示例并观察了相应的输出。
161 次查看
