by Leonardo Maldonado

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

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

從GraphQL和MongoDB開始的最直接的方法。 (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.

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

All the code from this article is available here.

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

So now, let’s get started.

現在，讓我們開始吧。

為什么選擇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的查詢語言。它于2015年由Facebook發布，并獲得了很高的采用率。它是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，客戶可以要求他們提供所需的確切數據，然后準確地獲取他們所要求的數據。 GraphQL還使用類似JSON的查詢語法來發出這些請求。所有請求都到達相同的端點。

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.

如果您正在閱讀本文，我假設您對GraphQL有所了解。如果您不知道，可以在這里了解有關GraphQL的更多信息。

入門 (Getting started)

First, create a folder, then start our project.

首先，創建一個文件夾，然后啟動我們的項目。

npm init -y

Then install some dependencies for our project.

然后為我們的項目安裝一些依賴項。

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依賴項：

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:

現在我們將為我們的項目設置Babel。在項目文件夾中創建一個名為.babelrc的文件。然后，將@ babel / env放在此處，如下所示：

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

然后轉到您的package.json并添加一些腳本：

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

我們只有一個腳本要在我們的項目中使用。

“server” — It will mainly run our server.

“服務器” -主要運行我們的服務器。

服務器 (Server)

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

現在，在我們的根文件夾中創建index.js文件。這將是我們要制造服務器的地方。

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

首先，我們將導入所有將要使用的模塊。

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

然后，我們將使用Mongoose創建與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呢？您將在這里放置數據庫URL來連接MongoDB。然后您要對我說：“但是，我還沒有數據庫”，是的，我知道了。為此，我們正在使用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的數據庫即服務，您所需要做的就是訪問他們的網站( 單擊此處 )并注冊。

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

注冊后，請創建一個新數據庫。要免費使用，請選擇以下選項：

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)作為選項，然后為我們的數據庫命名。之后，我們的數據庫將顯示在主頁上。

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.

單擊我們的數據庫，然后轉到“ 用戶”并創建一個新用戶。在此示例中，我將創建一個名為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.

創建用戶之后，在頁面頂部，我們找到兩個URL。 ?NE使用蒙戈殼牌連接。另一個使用MongoDB URL連接。我們復制第二個。

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上。我們的數據庫常量看起來像這樣：

表達 (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.

現在我們終于要啟動服務器了。為此，我們在index.js中增加了幾行，然后就完成了。

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

現在，運行命令npm run server并轉到localhost：4000 / graphql ，您將找到類似以下的頁面：

MongoDB和架構 (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).

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

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

在User.js內部，我們將使用Mongoose在MongoDB中創建第一個架構。

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

現在，我們已經創建了用戶模式，我們將從GraphQL開始。

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.

在我們的根文件夾中，我們將創建一個名為graphql的文件夾。在該文件夾內，我們將創建一個名為index.js的文件以及另外兩個文件夾： 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中的查詢是我們向服務器請求數據的方式。我們要求我們需要的數據，并且它精確地返回該數據。

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

我們所有的查詢都將在我們的類型文件夾中。在該文件夾內，創建一個index.js文件和一個User文件夾。

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

在User文件夾內，我們將創建一個index.js文件并編寫查詢。

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文件中，我們將導入所有我們擁有的類型。現在，我們有用戶類型。

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

如果您有多個類型， 則將其導入文件并包含在typeDefs數組中。

變異 (Mutations)

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

GraphQL中的突變是我們修改服務器中數據的方式。

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

我們所有的變異都將在我們的resolvers文件夾中。在該文件夾內，創建一個index.js文件和一個User文件夾。

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

在User文件夾中，我們將創建一個index.js文件并編寫我們的變體。

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

現在我們所有的解析器和變體都已準備就緒，我們將對我們的架構進行模塊化。

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

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

在名為graphql的文件夾中，轉到我們的index.js并創建我們的架構，如下所示：

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

現在我們的模式已經完成，請轉到我們的根文件夾，并在index.js內導入我們的模式。

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.

為了測試我們的查詢和變異，我們將使用命令npm run server啟動服務器 ，并轉到localhost：4000 / graphql。

創建用戶 (Create user)

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

首先，我們要創建第一個具有突變的用戶：

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游樂場向您返回了我們創建的數據對象，則意味著我們的服務器運行正常。

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

為了確保安全，請轉到MLab，然后在我們的用戶集合中，檢查是否有我們剛剛創建的數據。

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.

之后，創建另一個用戶“ Max Stoiber”。我們添加此用戶以確保我們的突變工作正常，并且數據庫中有多個用戶。

刪除用戶 (Delete user)

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

要刪除用戶，我們的變異將如下所示：

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.

像另一個一樣，如果GraphiQL游樂場向您返回我們創建的數據對象，則意味著我們的服務器可以正常工作。

獲取所有用戶 (Get all users)

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

為了獲得所有用戶，我們將像這樣運行我們的第一個查詢：

query {  users {    id    name    email  }}

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

由于我們只有一個用戶，因此應該返回該確切用戶。

獲取特定用戶 (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.

那應該返回確切的用戶。

我們完成了！ (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!

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

All the code from this article is available here.

本文提供了所有代碼。

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

？ 在Twitter上關注我！ ? 在GitHub上關注我！

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

我正在尋找機會，所以如果有任何我想聽到的機會，請與我聯系！