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.
这就是我们所做的。
Install
apollo-server-express
安装
apollo-server-express
Create a
new ApolloServer
创建一个
new ApolloServer
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/