Fastify 和 TypeScript 实现 GraphQL API-JavaScript中文网-JavaScript教程资源分享门户

GraphQL 是一种用于 API 的查询语言和运行时环境，它可以让客户端精确地获取需要的数据，从而避免了过度获取数据的情况。Fastify 是一个快速和低开销的 Web 框架，它可以帮助我们构建高效的 Web 服务。TypeScript 是一种类型安全的 JavaScript 的超集，它可以帮助我们在编写代码时发现错误，从而提高代码的可维护性。在本文中，我们将介绍如何使用 Fastify 和 TypeScript 实现 GraphQL API。

准备工作

在开始之前，我们需要安装以下工具：

Node.js
npm 或 yarn

之后，我们可以使用以下命令来创建一个新的 TypeScript 项目：

mkdir fastify-graphql
cd fastify-graphql
npm init -y
npm install fastify fastify-autoload fastify-cors graphql apollo-server-fastify apollo-server-core graphql-tools @types/graphql @types/node typescript nodemon -D

在这里，我们使用了 Fastify、Fastify-Autoload、Fastify-CORS、GraphQL、Apollo Server Fastify、Apollo Server Core、GraphQL-Tools、@types/graphql、@types/node、TypeScript 和 Nodemon 这些工具。

创建 Fastify 应用

在安装了所需的工具之后，我们可以开始创建 Fastify 应用了。在项目的根目录下创建 src/index.ts 文件，然后在其中添加以下代码：

// javascriptcn.com 代码示例
import fastify from 'fastify';
import autoload from 'fastify-autoload';
import cors from 'fastify-cors';

const app = fastify({ logger: true });

app.register(cors, {});

app.register(autoload, {
  dir: `${__dirname}/routes`,
});

const start = async () => {
  try {
    await app.listen(3000);
    app.log.info(`server listening on ${app.server.address().port}`);
  } catch (err) {
    app.log.error(err);
    process.exit(1);
  }
};

start();

在这里，我们首先导入了 Fastify、Fastify-Autoload 和 Fastify-CORS。然后，我们创建了一个 Fastify 应用，并注册了 Fastify-CORS 插件。接下来，我们使用 Fastify-Autoload 插件自动加载 routes 目录下的所有路由。最后，我们使用 listen 方法启动了 Fastify 应用，并在控制台输出服务器监听的端口号。

创建 GraphQL Schema

在创建 Fastify 应用之后，我们需要创建一个 GraphQL Schema。在项目的根目录下创建 src/schema.ts 文件，然后在其中添加以下代码：

// javascriptcn.com 代码示例
import { makeExecutableSchema } from 'graphql-tools';

const typeDefs = `
  type Query {
    hello: String!
  }
`;

const resolvers = {
  Query: {
    hello: () => 'Hello World!',
  },
};

export default makeExecutableSchema({
  typeDefs,
  resolvers,
});

在这里，我们首先导入了 makeExecutableSchema 函数。然后，我们定义了一个 GraphQL Schema，其中包含一个 Query 类型和一个 hello 字段。最后，我们使用 makeExecutableSchema 函数将 typeDefs 和 resolvers 转换为一个可执行的 GraphQL Schema。

创建 GraphQL 路由

在创建了 GraphQL Schema 之后，我们需要创建一个 GraphQL 路由。在项目的根目录下创建 src/routes/graphql.ts 文件，然后在其中添加以下代码：

// javascriptcn.com 代码示例
import { ApolloServerPluginDrainHttpServer } from 'apollo-server-core';
import { ApolloServer } from 'apollo-server-fastify';
import schema from '../schema';
import fastify from 'fastify';

const app = fastify({ logger: true });

const apolloServer = new ApolloServer({
  schema,
  plugins: [ApolloServerPluginDrainHttpServer({ httpServer: app.server })],
});

app.register(apolloServer.createHandler());

export default app;

在这里，我们首先导入了 ApolloServerPluginDrainHttpServer 和 ApolloServer。然后，我们创建了一个 Fastify 应用，并在其中创建了一个 Apollo Server。接下来，我们使用 register 方法将 Apollo Server 的处理程序注册到 Fastify 应用中。最后，我们导出了 Fastify 应用。

启动应用

在完成了上述步骤之后，我们可以使用以下命令来启动应用：

npx nodemon src/index.ts

在控制台中，我们应该能够看到 Fastify 应用正在监听的端口号。然后，我们可以在浏览器中访问 http://localhost:3000/graphql，并尝试运行以下查询：

{
  hello
}

在运行查询之后，我们应该能够看到服务器返回了 Hello World! 的响应。

总结

在本文中，我们介绍了如何使用 Fastify 和 TypeScript 实现 GraphQL API。我们首先创建了一个 Fastify 应用，并注册了 Fastify-CORS 插件和 Fastify-Autoload 插件。然后，我们创建了一个 GraphQL Schema，并使用 makeExecutableSchema 函数将其转换为一个可执行的 GraphQL Schema。接下来，我们创建了一个 GraphQL 路由，并使用 register 方法将 Apollo Server 的处理程序注册到 Fastify 应用中。最后，我们启动了应用，并在浏览器中测试了 GraphQL 查询。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/657fdf3fd2f5e1655dac509a