You can get a lot done in 2 minutes, like microwaving popcorn, sending a text message, eating a cupcake, and hooking up a GraphQL server.

您可以在2分鐘內完成很多工作，例如微波爐爆米花，發送短信， 吃蛋糕以及連接GraphQL服務器 。

Yup. If you have an old Express.js RESTful API lying around or you're interested in incrementally adopting GraphQL, we only need 2 minutes to hook it up with a fresh new GraphQL Server.

對。 如果您有一個舊的Express.js RESTful API，或者對逐步采用GraphQL感興趣，我們只需2分鐘即可將其與新的GraphQL Server連接起來。

Ready? Set. Go!

準備？ 組。 走！

Let's say that your server looked something like the following.

假設您的服務器如下所示。

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}`))

At the root of your project, npm install apollo-server-express as a dependency.

在項目的根目錄下， npm install apollo-server-express npm install為依賴項。

npm install apollo-server-express --save

Go to where your Express app is defined and import ApolloServer and gql from apollo-server-express.

轉到定義Express應用程序的位置，然后從apollo-server-express導入ApolloServer和gql 。

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

Next, create an instance of an ApolloServer with the simplest possible GraphQL type definitions and resolvers.

接下來，使用最簡單的 GraphQL 類型定義和解析器創建ApolloServer的實例。

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

Lastly, use ApolloServer's applyMiddleware method to pass in our Express.js server.

最后，使用ApolloServer的applyMiddleware方法傳遞我們的Express.js服務器。

server.applyMiddleware({ app })

Boom. That's it!

繁榮。 而已！

Your code should look something like this.

您的代碼應如下所示。

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}`)
})

If you navigate to localhost:5000/graphql, you should be able to see your GraphQL schema in the GraphQL playground.

如果導航到localhost:5000/graphql ，則應該能夠在GraphQL游樂場中看到GraphQL模式。

Note: If you want to change the URL that the GraphQL endpoint sits at from /graphql to something else, you can pass in a path option to server.applyMiddleware() with the URL you want, like path: '/specialUrl'. Check out the docs for full API usage.

注意：如果要將GraphQL端點所在的URL從/graphql為其他名稱，則可以將path選項與所需URL傳遞給server.applyMiddleware() ，例如path: '/specialUrl' 。 查看文檔以了解完整的API使用情況。

How simple was that? Is your popcorn finished? 😉

那有多簡單？ 爆米花吃完了嗎？ 😉

摘要 (Summary)

Here's what we did.

這就是我們所做的。

1. Install apollo-server-express

   安裝apollo-server-express

2. Create a new ApolloServer

   創建一個new ApolloServer

3. Connect your GraphQL Server with server.applyMiddleware

   將GraphQL Server與server.applyMiddleware連接

I personally really love the fact that Apollo Server is non-intrusive and can be tacked on any project as an alternative way to communicate between services and applications.

我個人真的很喜歡Apollo Server是非侵入性的，并且可以作為任何在服務和應用程序之間進行通信的替代方式而適用于任何項目。

從這往哪兒走 (Where to go from here)

If you're new to Apollo and GraphQL, a great way to learn is to actually build something in real life. For that reason, I highly recommend checking out the Apollo Fullstack Tutorial (you can also learn in TypeScript now 🔥).

如果您是Apollo和GraphQL的新手，那么學習的一種好方法是在現實生活中實際構建一些東西。 因此，我強烈建議您查看Apollo Fullstack教程(您現在也可以在TypeScript中學習🔥) 。

I'm Khalil Stemmler, a Developer Advocate at Apollo GraphQL. I teach advanced TypeScript, GraphQL, and Node.js best practices for large-scale applications. Feel free to ping me on Twitter if you need help with anything Apollo, TypeScript, or architecture-related. Cheers 🤠

我是Apollo GraphQL的開發人員倡導者Khalil Stemmler 。 我為大型應用程序教授高級TypeScript，GraphQL和Node.js最佳實踐。 如果您需要有關Apollo，TypeScript或與體系結構相關的任何幫助，請隨時在Twitter上對我進行ping操作。 干杯🤠

翻譯自: https://www.freecodecamp.org/news/add-a-graphql-server-to-a-restful-express-js-api-in-2-minutes/