使用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 http://localhost:4000″。

执行GraphQL查询

既然我们的GraphQL服务器已经启动，我们可以对其执行查询。GraphQL查询是结构化的类似JSON的对象，用于定义我们想要检索的数据。

让我们修改我们的模式以包括更复杂的数据类型和查询。在server.js中更新typeDefs常量，如下所示：

// server.js
const typeDefs = gql`
   type Book {
      title: String
      author: String
   }

   type Query {
      books: [Book]
   }
`;

解释

在更新的模式中，我们定义了一个新的图书类型，包括标题和作者字段。我们还修改了查询类型，将其包括一个返回图书对象数组的books字段。

接下来，在server.js中更新解析器常量，为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' }
      ]
   }
};

在书的解析函数中，我们返回一个带有书的数组，包含它们的标题和作者。

重新启动服务器，并使用GraphQL Playground测试我们的新查询。打开浏览器并导航到http://localhost: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"
         }
      ]
   }
}

查询检索所有书籍的标题和作者字段，并将它们在响应中返回。

GraphQL中的变更

虽然查询用于检索数据，但变更用于修改数据。让我们修改我们的模式以包含一个用于添加新书的变更。在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字段，该字段接受标题和作者作为参数，并返回一个Book对象。

接下来，更新server.js中的解析器常量，为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
   }
}

执行变异，您应该看到如下输出−

{
   "data": {
      "addBook": {
         "title": "The Great Gatsby",
         "author": "F. Scott Fitzgerald"
      }
   }
}

变异通过提供的标题和作者在数据源中添加了一本新书，并在响应中返回添加的书籍。

结论

GraphQL提供了一种强大且高效的构建面向API的应用程序的方式。由于其灵活的查询机制和能够在一个请求中恰好检索所需数据的能力，它已成为开发人员的热门选择。在本文中，我们通过构建GraphQL服务器、执行查询和执行变异来探索了JavaScript中的GraphQL基础知识。

我们学习了如何使用Apollo Server设置GraphQL服务器，并定义了一个带有查询和变异的简单模式。我们执行查询以检索数据，并执行变异以修改数据。在整个文章中，我们提供了带有解释的代码示例，并观察了相应的输出。