開始使用節點構建GraphQl API

我們都有許多興趣和愛好。例如，我對JavaScript、90 年代獨立搖滾和嘻哈、冷門爵士樂、匹茲堡市、披薩、咖啡以及約翰·盧裡主演的電影感興趣。我們的家人、朋友、熟人、同學和同事也都有自己的社交關係、興趣和愛好。其中一些關係和興趣是重疊的，例如我的朋友Riley 就和我一樣對90 年代嘻哈和披薩感興趣。而另一些則沒有重疊，例如我的同事Harrison，他更喜歡Python 而不是JavaScript，只喝茶，並且更喜歡當前的流行音樂。總而言之，我們每個人都與生活中的人們以及我們的關係和興趣的重疊方式有著聯繫的圖譜。

這類相互關聯的數據正是GraphQL 最初在API 開發中著手解決的挑戰。通過編寫GraphQL API，我們能夠有效地連接數據，從而降低複雜性和請求數量，同時允許我們精確地為客戶端提供所需的數據。 （如果您更喜歡GraphQL 的比喻，請查看在雞尾酒會上遇見GraphQL。）

在本文中，我們將使用Apollo Server 包在Node.js 中構建一個GraphQL API。為此，我們將探討基本的GraphQL 主題，編寫GraphQL 模式，開發代碼來解析我們的模式函數，並使用GraphQL Playground 用戶界面訪問我們的API。

什麼是GraphQL？

GraphQL 是一種用於API 的開源查詢和數據操作語言。它的開發目標是為數據提供單一端點，允許應用程序請求所需的確切數據。這不僅有利於簡化我們的UI 代碼，而且還通過限制需要通過網絡發送的數據量來提高性能。

我們正在構建什麼

要遵循本教程，您需要Node v8.x 或更高版本以及一些使用命令行的經驗。

我們將為書籍摘錄構建一個API 應用程序，允許我們存儲我們閱讀內容中令人難忘的段落。 API 用戶將能夠對他們的摘錄執行“CRUD”（創建、讀取、更新、刪除）操作：

• 創建新的摘錄
• 讀取單個摘錄以及摘錄列表
• 更新摘錄的內容
• 刪除摘錄

開始

首先，為我們的項目創建一個新目錄，初始化一個新的節點項目，並安裝我們需要的依賴項：

 <code># 创建新目录mkdir highlights-api # 进入目录cd highlights-api # 初始化新的节点项目npm init -y # 安装项目依赖项npm install apollo-server graphql # 安装开发依赖项npm install nodemon --save-dev</code>

在繼續之前，讓我們分解一下我們的依賴項：

• apollo-server是一個允許我們在Node 應用程序中使用GraphQL 的庫。我們將將其用作獨立庫，但Apollo 團隊還創建了用於在現有Node Web 應用程序中與Express、hapi、Fastify 和Koa 協同工作的中間件。
• graphql包含GraphQL 語言，並且是apollo-server的必需對等依賴項。
• nodemon是一個有用的庫，它將監視我們的項目是否有更改並自動重新啟動我們的服務器。

安裝完我們的包後，接下來讓我們創建應用程序的根文件，名為index.js 。現在，我們將在這個文件中使用console.log()輸出一條消息：

 <code>console.log("? Hello Highlights");</code>

為了簡化我們的開發過程，我們將更新package.json文件中的scripts對像以使用nodemon包：

 <code>"scripts": { "start": "nodemon index.js" },</code>

現在，我們可以通過在終端應用程序中鍵入npm start來啟動我們的應用程序。如果一切正常，您將看到? Hello Highlights記錄到您的終端。

GraphQL 模式類型

模式是我們數據和交互的書面表示。通過要求模式，GraphQL 對我們的API 實施嚴格的計劃。這是因為API 只能返回在模式中定義的數據並執行交互。 GraphQL 模式的基本組件是對像類型。 GraphQL 包含五種內置類型：

• String:使用UTF-8 字符編碼的字符串
• Boolean:真值或假值
• Int: 32 位整數
• Float:浮點值
• ID:唯一標識符

我們可以使用這些基本組件構建API 的模式。在一個名為schema.js的文件中，我們可以導入gql庫並為我們的模式語法準備文件：

 <code>const { gql } = require('apollo-server'); const typeDefs = gql` # 模式将放在这里`; module.exports = typeDefs;</code>

要編寫我們的模式，我們首先定義類型。讓我們考慮一下我們如何為我們的摘錄應用程序定義模式。首先，我們將創建一個名為Highlight的新類型：

 <code>const typeDefs = gql` type Highlight { } `;</code>

每個摘錄都將有一個唯一的ID、一些內容、標題和作者。 Highlight 模式將如下所示：

 <code>const typeDefs = gql` type Highlight {  id: ID  content: String  title: String  author: String } `;</code>

我們可以通過添加感嘆號來使其中一些字段成為必需字段：

 <code>const typeDefs = gql` type Highlight {  id: ID!  content: String!  title: String  author: String } `;</code>

雖然我們已經為我們的摘錄定義了一個對像類型，但我們還需要描述客戶端如何獲取該數據。這稱為查詢。我們稍後將深入探討查詢，但現在讓我們在我們的模式中描述某人檢索摘錄的方式。當請求我們所有的摘錄時，數據將作為數組（表示為[Highlight] ）返回，當我們想要檢索單個摘錄時，我們需要將ID 作為參數傳遞。

 <code>const typeDefs = gql` type Highlight {  id: ID!  content: String!  title: String  author: String } type Query {  highlights: [Highlight]!  highlight(id: ID!): Highlight } `;</code>

現在，在index.js文件中，我們可以導入我們的類型定義並設置Apollo Server：

 <code>const {ApolloServer } = require('apollo-server'); const typeDefs = require('./schema'); const server = new ApolloServer({ typeDefs }); server.listen().then(({ url }) => { console.log(`? Highlights server ready at ${url}`); });</code>

如果我們保持節點進程運行，應用程序將自動更新和重新啟動，但如果不是，則在終端窗口中從項目的目錄鍵入npm start將啟動服務器。如果我們查看終端，我們應該看到nodemon 正在監視我們的文件並且服務器正在本地端口上運行：

 <code>[nodemon] 2.0.2 [nodemon] to restart at any time, enter `rs` [nodemon] watching dir(s): *.* [nodemon] watching extensions: js,mjs,json [nodemon] starting `node index.js` ? Highlights server ready at http://localhost:4000/</code>

在瀏覽器中訪問URL 將啟動GraphQL Playground 應用程序，該應用程序提供用於與我們的API 交互的用戶界面。

GraphQL 解析器

雖然我們已經使用初始模式和Apollo Server 設置開發了我們的項目，但我們還無法與我們的API 交互。為此，我們將介紹解析器。解析器執行其名稱所暗示的確切操作；它們解析API 用戶請求的數據。我們將通過首先在我們的模式中定義它們，然後在我們的JavaScript 代碼中實現邏輯來編寫這些解析器。我們的API 將包含兩種類型的解析器：查詢和變異。

讓我們首先添加一些要交互的數據。在應用程序中，這通常是我們從數據庫中檢索和寫入的數據，但對於我們的示例，讓我們使用對象的數組。在index.js文件中添加以下內容：

 let highlights = [
  {
    id: '1',
    content: 'One day I will find the right words, and they will be simple.',
    title: 'Dharma Bums',
    author: 'Jack Kerouac'
  },
  {
    id: '2',
    content: 'In the limits of a situation there is humor, there is grace, and everything else.',
    title: 'Arbitrary Stupid Goal',
    author: 'Tamara Shopsin'
  }
]

查詢

查詢從API 請求特定數據，並以其所需格式顯示。然後，查詢將返回一個對象，其中包含API 用戶請求的數據。查詢永遠不會修改數據；它只訪問數據。我們已經在模式中編寫了兩個查詢。第一個返回摘錄數組，第二個返回特定摘錄。下一步是編寫將返回數據的解析器。

在index.js文件中，我們可以添加一個resolvers對象，其中可以包含我們的查詢：

 const resolvers = {
  Query: {
    highlights: () => highlights,
    highlight: (parent, args) => {
      return highlights.find(highlight => highlight.id === args.id);
    }
  }
};

highlights查詢返回完整的摘錄數據數組。 highlight查詢接受兩個參數： parent和args 。 parent是Apollo Server 中任何GraqhQL 查詢的第一個參數，並提供了一種訪問查詢上下文的方式。 args參數允許我們訪問用戶提供的參數。在這種情況下，API 用戶將提供id參數來訪問特定摘錄。

然後，我們可以更新我們的Apollo Server 配置以包含解析器：

 const server = new ApolloServer({ typeDefs, resolvers });

編寫了我們的查詢解析器並更新了Apollo Server 後，我們現在可以使用GraphQL Playground 查詢API。要訪問GraphQL Playground，請在您的Web 瀏覽器中訪問http://localhost:4000 。

查詢的格式如下所示：

 query {
  queryName {
      field
      field
    }
}

考慮到這一點，我們可以編寫一個查詢來請求我們每個摘錄的ID、內容、標題和作者：

 query {
  highlights {
    id
    content
    title
    author
  }
}

假設我們在UI 中有一個頁面，只列出我們突出顯示文本的標題和作者。我們不需要檢索每個摘錄的內容。相反，我們可以編寫一個隻請求我們需要的數據的查詢：

 query {
  highlights {
    title
    author
  }
}

我們還編寫了一個解析器，通過在我們的查詢中包含ID 參數來查詢單個註釋。我們可以這樣做：

 query {
  highlight(id: "1") {
    content
  }
}

變異

當我們想要修改API 中的數據時，我們使用變異。在我們的摘錄示例中，我們將想要編寫一個變異來創建一個新的摘錄，一個更新現有摘錄，以及第三個刪除摘錄。與查詢類似，變異也應該以對象的形式返回結果，通常是執行的操作的最終結果。

更新GraphQL 中任何內容的第一步是編寫模式。我們可以通過向我們的schema.js文件添加變異類型來包含模式中的變異：

 type Mutation {
  newHighlight (content: String! title: String author: String): Highlight!
  updateHighlight(id: ID! content: String!): Highlight!
  deleteHighlight(id: ID!): Highlight!
}

我們的newHighlight變異將採用content的必需值以及可選的title和author值，並返回一個Highlight 。 updateHighlight變異將要求將highlight id和content作為參數值傳遞，並將返回更新的Highlight 。最後， deleteHighlight變異將接受一個ID參數，並將返回已刪除的Highlight 。

更新了模式以包含變異後，我們現在可以更新index.js文件中的resolvers來執行這些操作。每個變異都會更新我們的highlights數據數組。

 const resolvers = {
  Query: {
    highlights: () => highlights,
    highlight: (parent, args) => {
      return highlights.find(highlight => highlight.id === args.id);
    }
  },
  Mutation: {
    newHighlight: (parent, args) => {
      const highlight = {
        id: String(highlights.length 1),
        title: args.title || '',
        author: args.author || '',
        content: args.content
      };
      highlights.push(highlight);
      return highlight;
    },
    updateHighlight: (parent, args) => {
      const index = highlights.findIndex(highlight => highlight.id === args.id);
      const highlight = {
        id: args.id,
        content: args.content,
        author: highlights[index].author,
        title: highlights[index].title
      };
      highlights[index] = highlight;
      return highlight;
    },
    deleteHighlight: (parent, args) => {
      const deletedHighlight = highlights.find(
        highlight => highlight.id === args.id
      );
      highlights = highlights.filter(highlight => highlight.id !== args.id);
      return deletedHighlight;
    }
  }
};

編寫了這些變異後，我們可以使用GraphQL Playground 來練習變異數據。變異的結構與查詢幾乎相同，指定變異的名稱，傳遞參數值，並請求返回特定數據。讓我們首先添加一個新的摘錄：

 mutation {
  newHighlight(author: "Adam Scott" title: "JS Everywhere" content: "GraphQL is awesome") {
    id
    author
    title
    content
  }
}

然後，我們可以編寫變異來更新摘錄：

 mutation {
  updateHighlight(id: "3" content: "GraphQL is rad") {
    id
    content
  }
}

以及刪除摘錄：

 mutation {
  deleteHighlight(id: "3") {
    id
  }
}

總結

恭喜！您現在已經成功構建了一個使用Apollo Server 的GraphQL API，並且可以對內存中數據對象運行GraphQL 查詢和變異。我們已經為探索GraphQL API 開發的世界奠定了堅實的基礎。

以下是一些可以提升水平的後續步驟：

• 了解嵌套的GraphQL 查詢和變異。
• 遵循Apollo 全棧教程。
• 更新示例以包含數據庫，例如MongoDB 或PostgreSQL。
• 探索更多優秀的CSS-Tricks GraphQL 文章。
• 使用您新獲得的GraphQL 知識來使用Gatsby 構建靜態網站。

以上是開始使用節點構建GraphQl API的詳細內容。更多資訊請關注PHP中文網其他相關文章！