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

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

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

什麼是GraphQL？

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

我們正在構(gòu)建什麼

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

我們將為書籍摘錄構(gòu)建一個API 應(yīng)用程序，允許我們存儲我們閱讀內(nèi)容中令人難忘的段落。 API 用戶將能夠?qū)λ麄兊恼泩?zhí)行“CRUD”（創(chuàng)建、讀取、更新、刪除）操作：

• 創(chuàng)建新的摘錄
• 讀取單個摘錄以及摘錄列表
• 更新摘錄的內(nèi)容
• 刪除摘錄

開始

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

 <code># 創(chuàng)建新目錄mkdir highlights-api # 進(jìn)入目錄cd highlights-api # 初始化新的節(jié)點項目npm init -y # 安裝項目依賴項npm install apollo-server graphql # 安裝開發(fā)依賴項npm install nodemon --save-dev</code>

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

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

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

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

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

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

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

GraphQL 模式類型

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

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

我們可以使用這些基本組件構(gòu)建API 的模式。在一個名為schema.js的文件中，我們可以導(dǎo)入gql庫並為我們的模式語法準(zhǔn)備文件：

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

要編寫我們的模式，我們首先定義類型。讓我們考慮一下我們?nèi)绾螢槲覀兊恼洃?yīng)用程序定義模式。首先，我們將創(chuàng)建一個名為Highlight的新類型：

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

每個摘錄都將有一個唯一的ID、一些內(nèi)容、標(biāo)題和作者。 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>

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

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

現(xiàn)在，在index.js文件中，我們可以導(dǎo)入我們的類型定義並設(shè)置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>

如果我們保持節(jié)點進(jìn)程運行，應(yīng)用程序?qū)⒆詣痈潞椭匦聠?，但如果不是，則在終端窗口中從項目的目錄鍵入npm start將啟動服務(wù)器。如果我們查看終端，我們應(yīng)該看到nodemon 正在監(jiān)視我們的文件並且服務(wù)器正在本地端口上運行：

 <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 應(yīng)用程序，該應(yīng)用程序提供用於與我們的API 交互的用戶界面。

GraphQL 解析器

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

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

 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 請求特定數(shù)據(jù)，並以其所需格式顯示。然後，查詢將返回一個對象，其中包含API 用戶請求的數(shù)據(jù)。查詢永遠(yuǎn)不會修改數(shù)據(jù)；它只訪問數(shù)據(jù)。我們已經(jīng)在模式中編寫了兩個查詢。第一個返回摘錄數(shù)組，第二個返回特定摘錄。下一步是編寫將返回數(shù)據(jù)的解析器。

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

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

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

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

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

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

查詢的格式如下所示：

 query {
  queryName {
      field
      field
    }
}

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

 query {
  highlights {
    id
    content
    title
    author
  }
}

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

 query {
  highlights {
    title
    author
  }
}

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

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

變異

當(dāng)我們想要修改API 中的數(shù)據(jù)時，我們使用變異。在我們的摘錄示例中，我們將想要編寫一個變異來創(chuàng)建一個新的摘錄，一個更新現(xiàn)有摘錄，以及第三個刪除摘錄。與查詢類似，變異也應(yīng)該以對象的形式返回結(jié)果，通常是執(zhí)行的操作的最終結(jié)果。

更新GraphQL 中任何內(nèi)容的第一步是編寫模式。我們可以通過向我們的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作為參數(shù)值傳遞，並將返回更新的Highlight 。最後， deleteHighlight變異將接受一個ID參數(shù)，並將返回已刪除的Highlight 。

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

 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 來練習(xí)變異數(shù)據(jù)。變異的結(jié)構(gòu)與查詢幾乎相同，指定變異的名稱，傳遞參數(shù)值，並請求返回特定數(shù)據(jù)。讓我們首先添加一個新的摘錄：

 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
  }
}

總結(jié)

恭喜！您現(xiàn)在已經(jīng)成功構(gòu)建了一個使用Apollo Server 的GraphQL API，並且可以對內(nèi)存中數(shù)據(jù)對象運行GraphQL 查詢和變異。我們已經(jīng)為探索GraphQL API 開發(fā)的世界奠定了堅實的基礎(chǔ)。

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

• 了解嵌套的GraphQL 查詢和變異。
• 遵循Apollo 全棧教程。
• 更新示例以包含數(shù)據(jù)庫，例如MongoDB 或PostgreSQL。
• 探索更多優(yōu)秀的CSS-Tricks GraphQL 文章。
• 使用您新獲得的GraphQL 知識來使用Gatsby 構(gòu)建靜態(tài)網(wǎng)站。

以上是開始使用節(jié)點構(gòu)建GraphQl API的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！