前言
作爲一名前端開發人員，GraphQL對於我們來說是令人難以置信的好用。它可以用來簡化數據訪問，這讓我們的工作變得更加容易。
什麼是 GraphQL？它是一個抽象層，位於任意數量的數據源之上，併爲您提供一個簡單的 API 來訪問所有數據。
GraphQL 的美妙之處在於您可以準確定義要從服務器返回的數據以及您希望其格式化的方式。它還允許您通過單個請求從多個來源獲取數據。 GraphQL 還使用類型系統來提供更好的錯誤檢查和消息傳遞。
簡單嘗試
我們可以用一個demo網址來嘗試感受一下GraphQL的魅力所在：https://demodata.grapecity.com/northwind/ui/graphql
我們用 Microsoft 的經典 Northwind 數據庫進行測試。假設我們想要獲取產品列表，但我們只需要產品 ID 和名稱字段。我們的查詢如下所示：
{
products {
productId
productName
}
}
這是我們的查詢測試器中的結果：
GraphQL 就是這麼簡單！
實際使用
日常開發過程中我們可以用我們常用的JavaScript來直接操作GraphQL，並將自己想要的數據呈現在頁面上，
我們可以參考這個簡單的應用程序，我們將僅使用 fetch API 來調用 GraphQL 服務：https://stackblitz.com/edit/wijmo-with-graphql-lruhgx
當然我們也可以添加更多的字段，方便我們取獲取其他自己想要的信息：
fetch("https://demodata.grapecity.com/northwind/graphql", {
method: "POST",
headers: {
"Content-Type": "application/json",
Accept: "application/json"
},
body: JSON.stringify({
query:
"{ products { productId, productName, unitPrice, unitsInStock, unitsOnOrder, reorderLevel, discontinued, categoryId }}"
})
})
我們打開控制檯可以看到返回的結果以及綁定的數據內容：
此時我們配合一些表格類的控件，便可以將這些數據很友好地渲染在頁面上，這裏我們以葡萄城公司的純前端表格控件SpreadJS爲例：
安裝 Wijmo：
npm install @grapecity/spread-sheets
我們可以在app.Vue中添加以下模塊
import Vue from "vue";
import '@grapecity/spread-sheets-resources-zh';
GC.Spread.Common.CultureManager.culture("zh-cn");
import '@grapecity/spread-sheets-vue'
import GC from '@grapecity/spread-sheets';
import './styles.css';
緊接着我們只需要建立數據的key和我們表格內區域的映射關係就能完美的展示需要的內容
var colInfos = [
{ name: "productId", displayName: "productId" },
{ name: "productName", displayName: "productName", size: 100 },
{ name: "unitPrice", displayName: "unitPrice", size: 80 },
{ name: "unitsInStock", displayName: "unitsInStock" },
{ name: "unitsOnOrder", displayName: "unitsOnOrder", size: 80 },
{ name: "reorderLevel", displayName: "reorderLevel", size: 80 },
{ name: "discontinued", displayName: "discontinued", cellType: new GC.Spread.Sheets.CellTypes.CheckBox(), size: 80 },
{ name: "categoryId", displayName: "categoryId", size: 100},
];
sheet.bindColumns(colInfos);
現在我們有了數據和展示的組件，我們可以將它們放在一起。在 fetch 調用之後，在 then()方法中轉換爲 JSON 並用結果填充我們的 sheet即可。
fetch("https://demodata.grapecity.com/northwind/graphql", {
...
})
.then(r => r.json())
.then(data => bindData(data));
function bindData(data) {
sheet.setDataSource(data.data.products);
}
我們的數據已經綁定到了工作表上，且這是一種雙向綁定關係，因此一旦數據有變動，頁面的表格內渲染的數據也會相應的變動！
這是我們的網格渲染時的樣子：
只需要一點點代碼，我們就可以得到一個綁定到 GraphQL 源的功能齊全的在線表格！當然除了GraphQL的強大以外，也不得不佩服SpreadJS對於數據渲染的便捷和可靠性。
如果您想自己嘗試這個應用程序，這裏有一個實例：https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/features/data-binding/sheet-level-binding/vue
深入討論
類別信息動態渲染
GraphQL 最有趣的功能之一是將許多不同的查詢聚合到一個請求中。此功能可用於最大程度地減少與服務器的往返次數，從而提高應用程序的響應能力。當然，對服務器進行多次往返仍然是合適的，但這是一個非常實用的功能。
在我們的示例中，我們加載了產品。我們還獲得了每個產品的類別ID，因爲每個產品都與另一個數據集中的類別相關聯。 而我們相應的信息中希望添加類別信息，並通過CategoryID 查找類別。 GraphQL 的一個很酷的事情是我們可以便可以在一個查詢中加載產品和類別兩類信息！
以下是一個查詢擴展後的樣子：
{
products {
productId
productName
unitPrice
unitsInStock
unitsOnOrder
reorderLevel
discontinued
categoryId
}
categories {
categoryId
categoryName
}
}
如果我們將其放入查詢測試器中，我們可以看到現在得到兩個數組（一個用於產品，另一個用於類別）
現在我們希望將產品的類別信息按照我們給定類別信息進行展示，我們可以藉助SpreadJS的數據綁定功能中對列的單元格類型來實現這個需求：
var combo = new GC.Spread.Sheets.CellTypes.ComboBox();
combo
.items(data.data.categories)
.editorValueType(GC.Spread.Sheets.CellTypes.EditorValueType.value);
var colInfos = [
{ name: "productId", displayName: "productId" },
{ name: "productName", displayName: "productName", size: 100 },
{ name: "unitPrice", displayName: "unitPrice", size: 80 },
{ name: "unitsInStock", displayName: "unitsInStock" },
{ name: "unitsOnOrder", displayName: "unitsOnOrder", size: 80 },
{ name: "reorderLevel", displayName: "reorderLevel", size: 80 },
{ name: "discontinued", displayName: "discontinued", cellType: new GC.Spread.Sheets.CellTypes.CheckBox(), size: 80 },
{ name: "Category", displayName: "categoryId", cellType: combo, size: 100},
];
sheet.bindColumns(colInfos);
如此一來我們在頁面上看到的就不是類別的ID了，而是類別的名稱
格式化數據
對於測量計算行業的開發人員來說，對於數據的精確是有規定的，即使給的數據中不存在小數，但是頁面上展示數據時也是需要格式化成規定的小數位，而對此我們只要在數據綁定時爲列信息添加格式化的信息即可
這裏我們可以將Price設置爲兩位小數爲例，只要添加一條formatter參數即可：
var colInfos = [
{ name: "productId", displayName: "productId" },
{ name: "productName", displayName: "productName", size: 100 },
{ name: "Price", displayName: "unitPrice",formatter: "[$¥-804]#,##0.00", size: 80 },
{ name: "unitsInStock", displayName: "unitsInStock" },
{ name: "unitsOnOrder", displayName: "unitsOnOrder", size: 80 },
{ name: "reorderLevel", displayName: "reorderLevel", size: 80 },
{ name: "discontinued", displayName: "discontinued", cellType: new GC.Spread.Sheets.CellTypes.CheckBox(), size: 80 },
{ name: "categoryId", displayName: "categoryId", size: 100},
];
sheet.bindColumns(colInfos);
結果如下所示：
數據驗證
我們要做的下一件事是向我們的應用程序添加驗證。SpreadJS中數據驗證是存在繼承性的，上一行同一列的單元格存在數據驗證，那麼下一個行同一位置就會繼承上一行的數據驗證效果。
因此我們可以參考這篇學習指南來實現數據展示的同時按照我們設定的標準進行數據的驗證：
spread.options.highlightInvalidData = true;
var dv = GC.Spread.Sheets.DataValidation.createNumberValidator(GC.Spread.Sheets.ConditionalFormatting.ComparisonOperators.greaterThan, "11");
dv.showInputMessage(true);
dv.inputMessage("Units too low and none on order!");
dv.inputTitle("tip");
activeSheet.setDataValidator(0, 4, 1,1,dv,GC.Spread.Sheets.SheetArea.viewport);
在此驗證處理程序中，我們查看unitsInStock 以確定是否應訂購新單位。我們確保該商品不會停產；如果unitsInStock低於reorderLevel（並且unitsOnOrder爲0），我們會顯示錯誤消息。
後記
GraphQL 是管理 JavaScript 應用程序中數據的優秀工具。它與SpreadJS配合得很好，尤其是我們的數據綁定功能組件。本教程展示了 GraphQL 和 SpreadJS如何簡單地構建應用程序。 GraphQL 和 SpreadJS都有更多功能可供探索，因此您可以做的事情遠遠超出了這個示例。
擴展鏈接：