由於GraphQL目前在API世界中引起了極大的瘋狂，您可能想知道如何在不破壞任何內容的情況下將現有的REST API遷移到GraphQL。本指南將幫助您完成REST to GraphQL的任務，而無需更改代碼庫，以便可以使用GraphQL進行REST！（雙關語意）

REST到GraphQL

好吧，GraphQL的倡導者在營銷GraphQL方面做得很好。尊重他們的努力，我將不做詳細介紹，而是提供一個摘要：

GraphQL允許您在單個請求中獲取多個資源。
GraphQL通過讓您描述您的確切數據需求來解決REST的獲取問題。
GraphQL通過在單個查詢中獲取相關數據來幫助您解決前端的N + 1查詢問題。

我將在本指南中涉及的是大多數人在提倡GraphQL時會錯過的方面，即"我們已經在REST上投入了大量資金"。這表示：

我們大多數現有的服務都在REST中。
我們更願意編寫REST服務。
我們希望使用REST API支持現有的客戶端。

儘管許多文章可幫助您從REST遷移到GraphQL，但它們都迫使您更改現有代碼庫或在REST服務之前編寫新代碼庫。

可是等等…

如果它還工作，請不要修改它。

這不是編程的第一條規則嗎？

遷移可能會很痛苦，尤其是龐大的代碼庫的規模可能令人生畏。總是有可能破壞某些東西。

我們為什麼不能只用REST？

面對現實-我們所有人天生都是懶惰的。我們喜歡簡單的技巧和簡單的解決方案。

如果有一種方法可以使您的REST服務保持原樣，並且仍然在其上面獲得GraphQL層而無需編寫任何代碼，該怎麼辦？聽起來像魔術嗎？好吧， Space Cloud有助於實現這一目標。

什麼是 Space Cloud？

為了簡單起見，

Space Cloud是一個開源Web伺服器，可在您的資料庫和微服務上提供即時的GraphQL和REST API。

關於Space Cloud的最酷的部分是所有API都是實時的。您可以選擇訂閱資料庫中的更改。在製作實時應用程式時，此功能非常方便。

但是，在本指南中，我們將堅持使用Space Cloud的遠程服務模塊將REST服務遷移到GraphQL。

已經開始動心了嗎？通過在Github上給我們一顆星來表示支持❤️。

架構

這是基於REST的GraphQL的最終體系結構：

您的應用程式向Space Cloud進行GraphQL查詢，這反過來又命中了伺服器上的REST端點。在這種情況下，Space Cloud充當GraphQL代理或API網關。

如您所知，Space Cloud是位於REST服務之上的單獨的GraphQL層。這個事實的好處在於您的REST服務仍然完整無缺，您可以直接在現有客戶端中使用它們。這一事實使您可以將REST服務發送到GraphQL，而不會破壞較舊的客戶端。

很好！我們已經了解了什麼是 Space Cloud以及它在應用程式中的位置。讓我們直接採取行動！

我們將要構建的內容

在本指南中，我們將構建一個簡單的算術服務，該服務具有以下端點：

加法器端點：POST / adder
倍增端點：GET / doubler /：number

加法器端點將返回從請求正文獲得的兩個數字的和。另一方面，doubler端點將返回其接收的數字的兩倍，作為URL路徑參數。

大！現在開始構建東西！

注意：如果卡在某個地方，請不要擔心。您可以隨時在此Discord伺服器上ping我，我將親自為您提供幫助。

步驟1：編寫服務

注意：即使您現在正在從手機中閱讀此內容，仍然可以僅通過閱讀來遵循本指南。

讓我們從編寫REST服務開始。我們將使用Express在NodeJS中編寫REST服務。

注意：您可以使用任何語言或框架編寫服務，只要它能說HTTP，因為Space Cloud將使用該協議與REST服務進行通信。

首先，創建一個文件夾作為我們的工作目錄。

創建NPM項目：

npm init -y

安裝Express：

npm install - save express

編寫express伺服器

創建一個文件index.js並複製粘貼以下代碼：

var express = require("express");
var app = express();
app.use(express.json());
app.post("/adder", function(req, res) {
  const num1 = req.body.num1;
  const num2 = req.body.num2;
  const response = { result: num1 + num2 };
  res.status(200).send(JSON.stringify(response));
});
app.get("/doubler/:num", function(req, res) {
  const num = req.params.num;
  const response = { result: num * 2 };
  res.status(200).send(JSON.stringify(response));
});
var server = app.listen(5000, function () {
    console.log("app running on port:", server.address().port);
});

如您所見，該代碼非常簡單。我們剛剛使用ExpressJS創建了一個HTTP伺服器，該伺服器正在偵聽埠5000。

如前所述，伺服器具有兩個端點：

加法器端點：我們期望從POST正文收到兩個數字num1和num2。我們要做的就是返回這兩個數字的和。
倍增器端點：我們只是返回從URL路徑參數獲得的數字。

這就是我們需要為該服務編寫的所有內容。

注意：要遷移現有的REST服務，您無需編寫/修改任何代碼。如果您的服務已經在運行，則可以跳過下一步。

步驟2：啟動服務

只需運行以下命令即可運行該服務：

node index.js

很好！我們已啟動並運行REST服務。讓我們啟動Space Cloud並通過GraphQL使用此REST服務。

步驟3：下載Space Cloud

您需要為您的作業系統下載Space Cloud二進位文件，也可以直接從其原始碼構建它。您需要安裝1.13.0或更高版本才能從原始碼構建它。

從此處下載適用於您的作業系統的二進位文件：

Mac 蘋果電腦
Linux
Windows

您可以解壓縮壓縮的存檔。

對於Linux / Mac：unzip space-cloud.zip && chmod +x space-cloud

對於Windows：右鍵單擊存檔，然後在此處選擇解壓縮。

要確定二進位文件是否正確，請從下載二進位文件的目錄中鍵入以下命令：

對於Linux / Mac：./space-cloud -v

對於Windows：space-cloud.exe -v

它應該顯示如下內容：

space-cloud-ee version 0.13.0

步驟4：啟動Space Cloud

要以開發人員模式啟動Space Cloud，請複製粘貼以下命令，然後按Enter鍵：

對於Linux / Mac：./space-cloud run — dev

對於Windows：space-cloud.exe run — dev

Space Cloud啟動時，您應該會看到類似以下內容：

Creating a new server with id auto-1T5fA9E1B2jeNUbV8R0fOPubRng
Starting http server on port: 4122
Hosting mission control on http://localhost:4122/mission-control/
Space cloud is running on the specified ports :D

注意：-dev標誌告訴Space Cloud在dev模式下運行（以便管理UI不需要輸入用戶名和密碼）

步驟5：配置空間雲

您會注意到，Space Cloud在工作目錄中生成一個config.yaml文件。

Space Cloud需要此配置文件才能起作用。配置文件用於加載信息，例如要連接的REST伺服器及其端點。

Space Cloud具有自己的任務控制（admin UI），可以快速配置所有這些功能。

開放式任務控制

轉到http://localhost:4122/mission-control 打開任務控制。

注意：如果您不在本地運行本地主機，請用您的空間雲的地址替換本地主機。

建立專案

單擊創建項目按鈕以打開以下螢幕：

為您的項目命名。

您在這裡選擇哪個資料庫都沒有關係，因為我們還是不會使用它。

單擊下一步創建項目。

步驟6：將遠程服務添加到Space Cloud

轉到任務控制中的"遠程服務"部分。

單擊"添加第一個遠程服務"按鈕以打開以下表單：

將服務名稱輸入為算術，將服務URL輸入為：

http://localhost:5000

添加遠程服務後，您應該能夠在遠程服務表中看到它：

單擊"操作"列中的"查看"按鈕以打開服務頁面。

單擊"添加第一個遠程端點"按鈕以打開以下表單：

放入以下加法器端點：

名稱：adder
方法：POST
路徑：/ adder

再次單擊"添加"按鈕以添加倍增器端點：

名稱：doubler
方法：GET
路徑：/ doubler / {args.num}

注意：現在不必擔心{args.num}部分。只要確保已將"方法"作為GET即可。

步驟7：通過GraphQL查詢您的REST服務

我們已經將REST服務和兩個端點也添加到了Space Cloud。是時候使用我們統一的GraphQL API對其進行查詢了。

轉到"資源管理器"部分：

嘗試在GraphiQL資源管理器中運行以下GraphQL查詢：

{
  adder(num1: 10, num2: 20) @arithmetic {
    result
  }
}

您應該能夠看到如下響應：

{
  "adder": {
    "result": 30
  }
}

在獲得上述GraphQL查詢後，Space Cloud向您的REST服務發出了以下請求：

· 方法：POST

· 路徑：/ adder

· 請求正文：

{ "num1": 10, "num2": 20}

這意味著您在GraphQL查詢中傳遞的參數將作為請求正文發送到REST服務。

讓我們嘗試使用以下GraphQL查詢來查詢doubler端點：

{
  doubler(num: 50) @arithmetic {
    result
  }
}

SC將此GraphQL查詢轉換為REST調用，如下所示：

GET /doubler/50

如果您還記得我們添加到Space Cloud的倍增器的端點是：

/doubler/{args.num}

基於此端點，Space Cloud理解它必須從GraphQL查詢中選擇參數num並將其用作變量以形成路徑/ doubler / 50。

成功調用後，您應該能夠看到如下響應：

{
  "doubler": {
    "result": 100
  }
}

獎勵—服務連結

成功地遵循了本指南，到這裡為止，我們都應獲得豐厚的獎金！讓我們看看從REST到GraphQL的過渡如何為我們釋放超強大的功能Service Chaining。

讓我們假設一個場景：

我們想使用加法器服務對兩個數字求和。
將我們從加法器服務獲得的結果加倍。

REST方式

如果我們在客戶端代碼中使用REST，則上述任務將看起來像這樣：

注意，我們如何從前端發出兩個請求，這意味著往返時間是兩倍。這會導致響應時間慢和用戶體驗差。

GraphQL方式

現在，如果使用太空雲將客戶端從REST切換到GraphQL，我們的請求將如下所示：

注意，這裡我們只進行從前端到後端（太空雲）的一個GraphQL查詢。反過來，Space Cloud正在向您的REST伺服器發出兩個請求以實現此請求。但是，這些請求（從Space Cloud到伺服器）的往返行程可以忽略不計，因為它們在同一網絡中。

向Space Cloud查詢以完成上述任務的GraphQL將是：

{
  adder(num1: 10, num2: 20) @arithmetic {
    doubler(num: "adder.result") @arithmetic {
      result
    }
  }
}

注意，我們如何在加法器服務響應後調用doubler服務，並將加法器服務的結果作為參數傳遞給doubler。

該查詢的響應如下所示：

{
  "adder": {
    "doubler": {
      "result": 60
    }
  }
}

如您所料，結果是60（（10 + 20）* 2）。

附加提示：如果要並行查詢兩個不相關的REST服務，則也可以在單個請求中完成此操作，如下所示：

{
  adder(num1: 10, num2: 20) @arithmetic {
    result
  }
  doubler(num: 50) @arithmetic {
    result
  }
}

我將把該查詢的響應部分留給您作為作業。

結論

首先，請遵循下面的指南，以幫助自己。

我們了解到：

從REST遷移到GraphQL不需要更改代碼。
我們不需要在REST和GraphQL之間進行選擇。我們可以在同一應用程式中同時支持REST和GraphQL。
將GraphQL與Space Cloud一起使用可為我們提供一些巧妙的聯網好處，並幫助您減少往返行程。

嗯，除了從REST遷移到GraphQL（例如，跨資料庫聯接）之外，您還可以使用Space Cloud做更多的事情。如果您喜歡，請在Github上給Space Cloud一顆星星❤️。如果您想跳出一些想法或有任何疑問，請加入我們的Discord伺服器。

(本文翻譯自Noorain - YourTechBud的文章《REST to GraphQL in minutes》，參考：https://medium.com/spaceuptech/rest-to-graphql-in-minutes-44f3b86cf79f)

分分鐘帶你將REST轉換為GraphQL