by Leonardo Maldonado

萊昂納多·馬爾多納多(Leonardo Maldonado)

如何使用Node.js，Express和MongoDB設(shè)置GraphQL服務(wù)器 (How to set up a GraphQL Server using Node.js, Express & MongoDB)

從GraphQL和MongoDB開(kāi)始的最直接的方法。 (The most straightforward way to start with GraphQL & MongoDB.)

So you are planning to start with GraphQL and MongoDB. Then you realize how can I set up those two technologies together? Well, this article is made precisely for you. I’ll show you how to set up a GraphQL server using MongoDB. I will show you how you can modularize your GraphQL schema and all this using MLab as our database.

因此，您計(jì)劃從GraphQL和MongoDB開(kāi)始。 然后您意識(shí)到如何將這兩種技術(shù)一起設(shè)置？ 好吧，本文專為您而設(shè)計(jì)。 我將向您展示如何使用MongoDB設(shè)置GraphQL服務(wù)器。 我將向您展示如何使用MLab作為我們的數(shù)據(jù)庫(kù)來(lái)模塊化GraphQL模式以及所有這些。

All the code from this article is available here.

本文中的所有代碼均在此處提供。

So now, let’s get started.

現(xiàn)在，讓我們開(kāi)始吧。

為什么選擇GraphQL？ (Why GraphQL?)

GraphQL is a query language for your APIs. It was released by Facebook back in 2015 and has gained a very high adoption. It’s the replacement of REST.

GraphQL是API的查詢語(yǔ)言。 它于2015年由Facebook發(fā)布，并獲得了很高的采用率。 它是REST的替代品。

With GraphQL, the client can ask for the exact data that they need and get back exactly what they asked for. GraphQL also uses a JSON-like query syntax to make those requests. All requests go to the same endpoint.

借助GraphQL，客戶可以要求他們提供所需的確切數(shù)據(jù)，然后準(zhǔn)確地獲取他們所要求的數(shù)據(jù)。 GraphQL還使用類似JSON的查詢語(yǔ)法來(lái)發(fā)出這些請(qǐng)求。 所有請(qǐng)求都到達(dá)相同的端點(diǎn)。

If you’re reading this article, I assume that you know a little bit about GraphQL. If you don’t know, you can learn more about GraphQL here.

如果您正在閱讀本文，我假設(shè)您對(duì)GraphQL有所了解。 如果您不知道，可以在這里了解有關(guān)GraphQL的更多信息。

入門(mén) (Getting started)

First, create a folder, then start our project.

首先，創(chuàng)建一個(gè)文件夾，然后啟動(dòng)我們的項(xiàng)目。

npm init -y

Then install some dependencies for our project.

然后為我們的項(xiàng)目安裝一些依賴項(xiàng)。

npm install @babel/cli @babel/core @babel/preset-env body-parser concurrently cors express express-graphql graphql graphql-tools merge-graphql-schemas mongoose nodemon

And then @babel/node as a dev dependency:

然后@ babel / node作為dev依賴項(xiàng)：

npm install --save-dev @babel/node

巴別塔 (Babel)

Now we’re gonna set up Babel for our project. Create a file called .babelrc in your project folder. Then, put the @babel/env there, like this:

現(xiàn)在我們將為我們的項(xiàng)目設(shè)置Babel。 在項(xiàng)目文件夾中創(chuàng)建一個(gè)名為.babelrc的文件。 然后，將@ babel / env放在此處，如下所示：

Then go to your package.json and add some scripts:

然后轉(zhuǎn)到您的package.json并添加一些腳本：

We’ll have only one script that we’re gonna use in our project.

我們只有一個(gè)腳本要在我們的項(xiàng)目中使用。

“server” — It will mainly run our server.

“服務(wù)器” -主要運(yùn)行我們的服務(wù)器。

服務(wù)器 (Server)

Now, in our root folder create the index.js file. It will be where we’re gonna make our server.

現(xiàn)在，在我們的根文件夾中創(chuàng)建index.js文件。 這將是我們要制造服務(wù)器的地方。

First, we’re gonna import all the modules that we’ll use.

首先，我們將導(dǎo)入所有將要使用的模塊。

Then, we’re gonna create our connect with MongoDB using Mongoose:

然后，我們將使用Mongoose創(chuàng)建與MongoDB的連接：

What about that db const? This is where you’re gonna put your database URL to connect MongoDB. Then you’re gonna say to me: “But, I don’t have a database yet”, yes I got you. For that, we’re using MLab.

那db const呢？ 您將在這里放置數(shù)據(jù)庫(kù)URL來(lái)連接MongoDB。 然后您要對(duì)我說(shuō)：“但是，我還沒(méi)有數(shù)據(jù)庫(kù)”，是的，我知道了。 為此，我們正在使用MLab。

MLab is a database-as-a-service for MongoDB, all you need to do is go to their website (click here) and register.

MLab是MongoDB的數(shù)據(jù)庫(kù)即服務(wù)，您所需要做的就是訪問(wèn)他們的網(wǎng)站( 單擊此處 )并注冊(cè)。

After you register, go and create a new database. To use as free, choose this option:

注冊(cè)后，請(qǐng)創(chuàng)建一個(gè)新數(shù)據(jù)庫(kù)。 要免費(fèi)使用，請(qǐng)選擇以下選項(xiàng)：

Choose US East (Virginia) as an option, and then give our database a name. After that, our database will show at the home page.

選擇US East(Virginia)作為選項(xiàng)，然后為我們的數(shù)據(jù)庫(kù)命名。 之后，我們的數(shù)據(jù)庫(kù)將顯示在主頁(yè)上。

Click on our database, then go to User and create a new user. In this example, I’m gonna create a user called leo and password leoleo1.

單擊我們的數(shù)據(jù)庫(kù)，然后轉(zhuǎn)到“ 用戶”并創(chuàng)建一個(gè)新用戶。 在此示例中，我將創(chuàng)建一個(gè)名為leo和密碼leoleo1的用戶。

After our user is created, on the top of our page, we find two URLs. One to connect using Mongo Shell. The other to connect using a MongoDB URL. We copy the second one.

創(chuàng)建用戶之后，在頁(yè)面頂部，我們找到兩個(gè)URL。 ?NE使用蒙戈殼牌連接。 另一個(gè)使用MongoDB URL連接。 我們復(fù)制第二個(gè)。

After that, all you need to do is paste that URL on our db const at the index.js file. Our db const would look like this:

之后，您所需要做的就是將該URL粘貼到index.js文件的db const上。 我們的數(shù)據(jù)庫(kù)常量看起來(lái)像這樣：

表達(dá) (Express)

Now we’re gonna finally start our server. For that, we’ve put some more lines in our index.js and we’re done.

現(xiàn)在我們終于要啟動(dòng)服務(wù)器了。 為此，我們?cè)趇ndex.js中增加了幾行，然后就完成了。

Now, run the command npm run server and go to localhost:4000/graphql and you’ll find a page like this:

現(xiàn)在，運(yùn)行命令npm run server并轉(zhuǎn)到localhost：4000 / graphql ，您將找到類似以下的頁(yè)面：

MongoDB和架構(gòu) (MongoDB and Schema)

Now, in our root folder, make a folder named models and create a file inside called User.js (yes, with capital U).

現(xiàn)在，在我們的根文件夾中，創(chuàng)建一個(gè)名為models的文件夾，并在其中創(chuàng)建一個(gè)名為User.js的文件(是的，大寫(xiě)字母U)。

Inside of User.js, we’re gonna create our first schema in MongoDB using Mongoose.

在User.js內(nèi)部，我們將使用Mongoose在MongoDB中創(chuàng)建第一個(gè)架構(gòu)。

Now that we have created our User schema, we’re gonna start with GraphQL.

現(xiàn)在，我們已經(jīng)創(chuàng)建了用戶模式，我們將從GraphQL開(kāi)始。

GraphQL (GraphQL)

In our root folder, we’re gonna create a folder called graphql. Inside that folder, we’re gonna create a file called index.js and two more folders: resolvers and types.

在我們的根文件夾中，我們將創(chuàng)建一個(gè)名為graphql的文件夾。 在該文件夾內(nèi)，我們將創(chuàng)建一個(gè)名為index.js的文件以及另外兩個(gè)文件夾： resolvers和types 。

查詢 (Queries)

Queries in GraphQL are the way we ask our server for data. We ask for the data that we need, and it returns exactly that data.

GraphQL中的查詢是我們向服務(wù)器請(qǐng)求數(shù)據(jù)的方式。 我們要求我們需要的數(shù)據(jù)，并且它精確地返回該數(shù)據(jù)。

All our queries will be inside our types folder. Inside that folder, create an index.js file and a User folder.

我們所有的查詢都將在我們的類型文件夾中。 在該文件夾內(nèi)，創(chuàng)建一個(gè)index.js文件和一個(gè)User文件夾。

Inside the User folder, we’re gonna create an index.js file and write our queries.

在User文件夾內(nèi)，我們將創(chuàng)建一個(gè)index.js文件并編寫(xiě)查詢。

In our types folder, in our index.js file, we’re gonna import all the types that we have. For now, we have the User types.

在我們的types文件夾中的index.js文件中，我們將導(dǎo)入所有我們擁有的類型。 現(xiàn)在，我們有用戶類型。

In case you have more than one type, you import that to your file and include in the typeDefs array.

如果您有多個(gè)類型， 則將其導(dǎo)入文件并包含在typeDefs數(shù)組中。

變異 (Mutations)

Mutations in GraphQL are the way we modify data in the server.

GraphQL中的突變是我們修改服務(wù)器中數(shù)據(jù)的方式。

All our mutations will be inside our resolvers folder. Inside that folder, create an index.js file and a User folder.

我們所有的變異都將在我們的resolvers文件夾中。 在該文件夾內(nèi)，創(chuàng)建一個(gè)index.js文件和一個(gè)User文件夾。

Inside the User folder, we’re gonna create an index.js file and write our mutations.

在User文件夾中，我們將創(chuàng)建一個(gè)index.js文件并編寫(xiě)我們的變體。

Now that all our resolvers and mutations are ready, we’re gonna modularize our schema.

現(xiàn)在我們所有的解析器和變體都已準(zhǔn)備就緒，我們將對(duì)我們的架構(gòu)進(jìn)行模塊化。

模塊化我們的架構(gòu) (Modularizing our schema)

Inside our folder called graphql, go to our index.js and make our schema, like this:

在名為graphql的文件夾中，轉(zhuǎn)到我們的index.js并創(chuàng)建我們的架構(gòu)，如下所示：

Now that our schema is done, go to our root folder and inside our index.js import our schema.

現(xiàn)在我們的模式已經(jīng)完成，請(qǐng)轉(zhuǎn)到我們的根文件夾，并在index.js內(nèi)導(dǎo)入我們的模式。

After all that, our schema will end up like this:

畢竟，我們的模式將最終如下所示：

處理我們的查詢和變異 (Playing with our queries and mutations)

To test our queries and mutations, we’re gonna start our server with the command npm run server, and go to localhost:4000/graphql.

為了測(cè)試我們的查詢和變異，我們將使用命令npm run server啟動(dòng)服務(wù)器 ，并轉(zhuǎn)到localhost：4000 / graphql。

創(chuàng)建用戶 (Create user)

First, we’re gonna create our first user with a mutation:

首先，我們要?jiǎng)?chuàng)建第一個(gè)具有突變的用戶：

mutation { addUser(id: "1", name: "Dan Abramov", email: "dan@dan.com") { id name email }}

After that, if the GraphiQL playground returns to you the data object that we created, that means that our server is working fine.

之后，如果GraphiQL游樂(lè)場(chǎng)向您返回了我們創(chuàng)建的數(shù)據(jù)對(duì)象，則意味著我們的服務(wù)器運(yùn)行正常。

To make sure, go to MLab, and inside of our users collection, check if there is our data that we just created.

為了確保安全，請(qǐng)轉(zhuǎn)到MLab，然后在我們的用戶集合中，檢查是否有我們剛剛創(chuàng)建的數(shù)據(jù)。

After that, create another user called “Max Stoiber”. We add this user to make sure that our mutation is working fine and we have more than one user in the database.

之后，創(chuàng)建另一個(gè)用戶“ Max Stoiber”。 我們添加此用戶以確保我們的突變工作正常，并且數(shù)據(jù)庫(kù)中有多個(gè)用戶。

刪除用戶 (Delete user)

To delete a user, our mutation will go like this:

要?jiǎng)h除用戶，我們的變異將如下所示：

mutation { deleteUser(id: "1", name: "Dan Abramov", email: "dan@dan.com") { id name email }}

Like the other one, if the GraphiQL playground returns to you the data object that we created, that means that our server is working fine.

像另一個(gè)一樣，如果GraphiQL游樂(lè)場(chǎng)向您返回我們創(chuàng)建的數(shù)據(jù)對(duì)象，則意味著我們的服務(wù)器可以正常工作。

獲取所有用戶 (Get all users)

To get all users, we’re gonna run our first query like this:

為了獲得所有用戶，我們將像這樣運(yùn)行我們的第一個(gè)查詢：

query { users { id name email }}

Since we only have one user, it should return that exact user.

由于我們只有一個(gè)用戶，因此應(yīng)該返回該確切用戶。

獲取特定用戶 (Get a specific user)

To get a specific user, this will be the query:

要獲取特定用戶，將是以下查詢：

query { user(id: "2"){ id name email }}

That should return the exact user.

那應(yīng)該返回確切的用戶。

我們完成了！ (And we’re done!)

Our server is running, our queries and mutations are working fine, we’re good to go and start our client. You can start with create-react-app. In your root folder just give the command create-react-app client and then, if you run the command npm run dev, our server and client will run concurrently!

我們的服務(wù)器正在運(yùn)行，我們的查詢和變體工作正常，我們很高興開(kāi)始啟動(dòng)客戶端。 您可以從create-react-app開(kāi)始。 在您的根文件夾中，輸入命令create-react-app client ，然后，如果您運(yùn)行命令npm run dev ，我們的服務(wù)器和客戶端將同時(shí)運(yùn)行！

All the code from this article is available here.

本文提供了所有代碼。

? Follow me on Twitter! ? Follow me on GitHub!

？ 在Twitter上關(guān)注我！ ? 在GitHub上關(guān)注我！

I’m looking for a remote opportunity, so if have any I’d love to hear about it, so please contact me!

我正在尋找機(jī)會(huì)，所以如果有任何我想聽(tīng)到的機(jī)會(huì)，請(qǐng)與我聯(lián)系！

翻譯自: https://www.freecodecamp.org/news/how-to-set-up-a-graphql-server-using-node-js-express-mongodb-52421b73f474/

總結(jié)

以上是生活随笔為你收集整理的如何使用Node.js，Express和MongoDB设置GraphQL服务器的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。