資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究使用 GraphQL 和 JavaScript 構建 API 驅動的應用程式
近年來，GraphQL 作為傳統 RESTful API 的強大替代方案，獲得了廣泛的關注。它能夠高效地檢索資料並提供靈活的查詢機制，使其成為開發人員構建 API 驅動的應用程式的首選方案之一。在本文中，我們將探討 GraphQL 的基礎知識，並學習如何使用 JavaScript 構建 API 驅動的應用程式。
什麼是 GraphQL？
GraphQL 是一種用於 API 的開源查詢語言和執行時。它由 Facebook 開發，並於 2015 年公開發布。與 RESTful API（需要多個端點來檢索特定資料）不同，GraphQL 允許客戶端在單個查詢中請求所需的確切資料。它提供了一個強型別的模式，描述了可用的資料，並允許客戶端指定所需響應的結構。
GraphQL 旨在透過減少資料的過度獲取和不足獲取來提高效率。過度獲取是指檢索比必要資料更多的資訊，而不足獲取是指需要多個請求才能收集所有所需資料。使用 GraphQL，客戶端可以在單個請求中僅獲取所需的資料，從而實現更快、更高效的資料檢索。
設定 GraphQL 伺服器
要開始使用 JavaScript 構建 GraphQL 應用程式，我們需要設定一個 GraphQL 伺服器。為此，可以使用多種庫，但本文將使用 Apollo Server，這是在 JavaScript 中構建 GraphQL 伺服器的流行選擇。
首先，讓我們安裝所需的依賴項：
npm install apollo-server graphql
安裝完成後，我們可以開始構建 GraphQL 伺服器。建立一個新的 JavaScript 檔案 server.js，並新增以下程式碼：
// server.js
const { ApolloServer, gql } = require('apollo-server');
// Define the GraphQL schema
const typeDefs = gql`
type Query {
hello: String
}
`;
// Define resolvers to handle the query
const resolvers = {
Query: {
hello: () => 'Hello, GraphQL!'
}
};
// Create an instance of ApolloServer
const server = new ApolloServer({ typeDefs, resolvers });
// Start the server
server.listen().then(({ url }) => {
console.log(`Server running at ${url}`);
});
解釋
在上面的程式碼片段中，我們定義了一個簡單的 GraphQL 模式，其中包含一個名為 hello 的查詢，該查詢返回一個字串。我們還為 hello 查詢定義了一個解析器函式，該函式返回字串“Hello, GraphQL！”。最後，我們建立了一個 ApolloServer 的例項並啟動伺服器。
要執行伺服器，請在終端中執行以下命令：
node server.js
如果一切設定正確，您應該在終端中看到訊息“Server running at https://:4000”。
執行 GraphQL 查詢
現在我們的 GraphQL 伺服器已啟動並執行，我們可以對其執行查詢。GraphQL 查詢是結構化的類似 JSON 的物件，用於定義我們想要檢索的資料。
讓我們修改我們的模式以包含更復雜的資料型別和查詢。按如下方式更新 server.js 中的 typeDefs 常量
// server.js
const typeDefs = gql`
type Book {
title: String
author: String
}
type Query {
books: [Book]
}
`;
解釋
在更新後的模式中，我們定義了一個新的 Book 型別，其中包含 title 和 author 欄位。我們還修改了 Query 型別以包含 books 欄位，該欄位返回一個 Book 物件陣列。
接下來，更新 server.js 中的 resolvers 常量以提供 books 欄位的解析器函式
// server.js
const resolvers = {
Query: {
books: () => [
{ title: 'Harry Potter and the Philosopher's Stone', author: 'J.K. Rowling' },
{ title: 'To Kill a Mockingbird', author: 'Harper Lee' },
{ title: '1984', author: 'George Orwell' }
]
}
};
在 books 的解析器函式中，我們返回一個包含其各自標題和作者的書籍陣列。
重新啟動伺服器，然後讓我們使用 GraphQL Playground 測試新的查詢。開啟瀏覽器並導航到 https://:4000 以訪問 playground。
在 GraphQL Playground 的左側面板中，輸入以下查詢
{
books {
title
author
}
}
點選播放按鈕或按 Ctrl + Enter 執行查詢。您應該在右側面板中看到以下輸出
{
"data": {
"books": [
{
"title": "Harry Potter and the Philosopher's Stone",
"author": "J.K. Rowling"
},
{
"title": "To Kill a Mockingbird",
"author": "Harper Lee"
},
{
"title": "1984",
"author": "George Orwell"
}
]
}
}
該查詢檢索所有書籍的 title 和 author 欄位，並在響應中返回它們。
GraphQL 中的 Mutation
查詢用於檢索資料，而 Mutation 用於修改資料。讓我們修改我們的模式以包含新增新書籍的 mutation。按如下方式更新 server.js 中的 typeDefs 常量：
// server.js
const typeDefs = gql`
type Book {
title: String
author: String
}
type Query {
books: [Book]
}
type Mutation {
addBook(title: String, author: String): Book
}
`;
在更新後的模式中，我們定義了一個新的 Mutation 型別，其中包含一個 addBook 欄位，該欄位接受 title 和 author 作為引數並返回一個 Book 物件。
接下來，更新 server.js 中的 resolvers 常量以提供 addBook mutation 的解析器函式
// server.js
const resolvers = {
Query: {
// Query resolvers
},
Mutation: {
addBook: (parent, args) => {
const newBook = { title: args.title, author: args.author };
// Logic to save the new book
return newBook;
}
}
};
在 addBook 的解析器函式中，我們使用提供的 title 和 author 引數建立一個新的 book 物件。我們可以在此處新增邏輯以將新書籍儲存到資料庫或執行任何其他必要的操作。
重新啟動伺服器並開啟 GraphQL Playground。在左側面板中，輸入以下 mutation
mutation {
addBook(title: "The Great Gatsby", author: "F. Scott Fitzgerald") {
title
author
}
}
執行 mutation，您應該看到以下輸出：
{
"data": {
"addBook": {
"title": "The Great Gatsby",
"author": "F. Scott Fitzgerald"
}
}
}
mutation 將一個具有提供的 title 和 author 的新書籍新增到資料來源，並在響應中返回新增的書籍。
結論
GraphQL 提供了一種強大而高效的方式來構建 API 驅動的應用程式。憑藉其靈活的查詢機制以及能夠在單個請求中檢索所需的確切資料的能力，它已成為開發人員的熱門選擇。在本文中，我們透過構建 GraphQL 伺服器、執行查詢和執行 mutation，探討了 GraphQL 與 JavaScript 的基礎知識。
我們學習瞭如何使用 Apollo Server 設定 GraphQL 伺服器，並定義了一個包含查詢和 mutation 的簡單模式。我們執行查詢以檢索資料並執行 mutation 以修改資料。在整篇文章中，我們提供了帶解釋的程式碼示例並觀察了相應的輸出。
161 次檢視
