⚡ 2 分钟内即可为 RESTful Express.js API 添加 GraphQL 服务器

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

⚡ 2 分钟内即可为 RESTful Express.js API 添加 GraphQL 服务器

2 分钟内你可以做很多事情，比如用微波炉加热爆米花、发送短信、吃纸杯蛋糕和连接 GraphQL 服务器。

是的。如果您手头有一个旧的 Express.js RESTful API，或者您有兴趣逐步采用 GraphQL，我们只需要 2 分钟就能将其与全新的 GraphQL 服务器连接起来。

预备，开始！

假设你的服务器看起来像下面这样。

import express from 'express';
import { apiRouter } from './router';

const app = express();
const port = process.env.PORT || 5000;

// Existing routes for our Express.js app
app.use('/api/v1', apiRouter);

app.listen(port, () => console.log(`[App]: Listening on port ${port}`))

在项目的根目录下，npm install 将 apollo-server-express作为依赖项。

npm install apollo-server-express --save

前往定义 Express 应用的位置，ApolloServer然后gql从中导入apollo-server-express。

import { ApolloServer, gql } from 'apollo-server-express'

接下来，创建一个ApolloServer具有最简单的GraphQL类型定义和解析器的实例。

const server = new ApolloServer({
  typeDefs: gql`
    type Query {
      hello: String
    }
  `,
  resolvers: {
    Query: {
      hello: () => 'Hello world!',
    },
  }
})

最后，使用ApolloServer's applyMiddleware方法传入我们的 Express.js 服务器。

server.applyMiddleware({ app })

砰！就是这样！

你的代码应该类似于这样。

import express from 'express';
import { v1Router } from './api/v1';
import { ApolloServer, gql } from 'apollo-server-express'

const app = express();
const port = process.env.PORT || 5000;

const server = new ApolloServer({
  typeDefs: gql`
    type Query {
      hello: String
    }
  `,
  resolvers: {
    Query: {
      hello: () => 'Hello world!',
    },
  }
})

server.applyMiddleware({ app })

app.use('/api/v1', v1Router);

app.listen(port, () => {
  console.log(`[App]: Listening on port ${port}`)
})

如果您导航到localhost:5000/graphql，您应该能够在 GraphQL playground 中看到您的 GraphQL schema。

注意：如果您想将 GraphQL 端点所在的 URL 从原来的 URL 更改/graphql为其他 URL，您可以向 `--url` 参数传递一个path选项，server.applyMiddleware()指定您想要的 URL，例如 `--url` 。有关完整的 API 用法，path: '/specialUrl'请参阅文档。

是不是很简单？你的爆米花吃完了吗？😉

概括

我们做了以下工作。

1. 安装apollo-server-express
2. 创建一个new ApolloServer
3. 将您的 GraphQL 服务器与server.applyMiddleware

我个人非常喜欢 Apollo Server 的一点是，它不会侵入现有系统，可以作为服务和应用程序之间通信的替代方式添加到任何项目中。

接下来该何去何从

如果你是 Apollo 和 GraphQL 的新手，最好的学习方法就是实际动手构建一些项目。因此，我强烈推荐你看看Apollo 全栈教程（现在你也可以学习 TypeScript 版本了🔥）。

我是Khalil Stemmler，Apollo GraphQL 的开发者布道师。我教授面向大规模应用的 TypeScript、GraphQL 和 Node.js 高级最佳实践。如果您在 Apollo、TypeScript 或架构方面需要任何帮助，欢迎随时在Twitter上联系我。祝好！🤠