摘要：允許創(chuàng)建零配置的服務(wù)器。這是一種人類可讀的模式語法，稱為規(guī)范與描述語言。類型是表示外觀的自定義對(duì)象。為此，創(chuàng)建一個(gè)名為的新查詢。這意味著無論何時(shí)在服務(wù)器中發(fā)生事件，并且每當(dāng)調(diào)用該事件時(shí)，服務(wù)器都會(huì)將相應(yīng)的數(shù)據(jù)發(fā)送到客戶端。

想閱讀更多優(yōu)質(zhì)文章請(qǐng)猛戳GitHub博客,一年百來篇優(yōu)質(zhì)文章等著你！

今天最常討論的術(shù)語之一是 API，很多人不知道 API 到底是什么，API 是 Application Programming Interface(應(yīng)用程序編程接口)。顧名思義，它是一些預(yù)先定義的函數(shù)，目的是提供應(yīng)用程序與開發(fā)人員基于某軟件或硬件得以訪問一組例程的能力，而又無需訪問源碼，或理解內(nèi)部工作機(jī)制的細(xì)節(jié)。

你可以將 API 想象成一個(gè)酒保。你向酒保要一杯酒，他們會(huì)給你想要的。簡(jiǎn)單，但是傳統(tǒng)的 REST API 有什么問題的呢？

自從現(xiàn)代 Web 出現(xiàn)以來，構(gòu)建 Api 并不像聽起來那么困難，但是學(xué)習(xí)和理解 Api 才是比較難。開發(fā)人員是大多數(shù)據(jù)使用你的 API 來構(gòu)建某些內(nèi)容或僅使用數(shù)據(jù)。所以你的 API 應(yīng)該盡可能的簡(jiǎn)潔和直觀， 好的 API 是非常容易使用和學(xué)習(xí)的。直觀，在開始設(shè)計(jì) API 時(shí)常要記住的一點(diǎn)。

我們已經(jīng)使用 REST 構(gòu)建 Api 很長(zhǎng)時(shí)間了。隨之而來的也有一些問題，在使用 REST 設(shè)計(jì)構(gòu)建 API 時(shí)，你會(huì)遇到以下問題:

涉及很多端

于開發(fā)人員來說，學(xué)習(xí)和理解你的 API 要困難得多

*　信息的獲取有多有少

為了解決這些問題，F(xiàn)acebook 創(chuàng)建了 GraphQL?，F(xiàn)在，作者認(rèn)為 GraphQL 是構(gòu)建 Api 的最佳方式。這篇文章將告訴你為什么要學(xué)習(xí)了解一下 GraphQL。

GraphQL 是 Facebook 開發(fā)的一種開源查詢語言。它為我們提供了一種更有效的設(shè)計(jì)、創(chuàng)建和使用 Api的方法。從根本上說，它是 REST 的替代品。

GraphQL有很多特性，比如:

GraphQL查詢總是能準(zhǔn)確獲得你想要的數(shù)據(jù)，不多不少，所以返回的結(jié)果是可預(yù)測(cè)的， 不再像你使用 REST 那樣過度獲取信息。

它為我們提供了同一個(gè)端，對(duì)于同一個(gè) API，沒有版本2或版本3。給 GraphQL API 添加字段和類型而無需影響現(xiàn)有查詢，老舊字段可以廢棄，從工具中隱藏。

GraphQL是強(qiáng)類型的，通過它，可以在執(zhí)行之前驗(yàn)證 GraphQL 類型系統(tǒng)中的查詢， 它幫助我們構(gòu)建更強(qiáng)大的 Api。

這是對(duì) GraphQL 的基本介紹——為什么它這么強(qiáng)大，為什么它現(xiàn)在這么流行。如果你想了解更多關(guān)于它的信息，可以訪問 GraphQL網(wǎng)站 學(xué)習(xí)。

本文的主要目的不是學(xué)習(xí)如何設(shè)置 GraphQL服務(wù)器，所以我們現(xiàn)在還沒有深入研究。 文本的目標(biāo)是了解 GraphQL 在實(shí)踐中的工作原理，因此這里使用簡(jiǎn)約的零配置 GraphQL 服務(wù)器的 Graphpack。

開始項(xiàng)目前，首先我們創(chuàng)建一個(gè)新文件名為 graphql-server， 在 mac 終端執(zhí)行

mkdir graphql-server

接著進(jìn)入該文件，執(zhí)行

npm init -y

或者執(zhí)行

yarn init

npm 將創(chuàng)建一個(gè)包 package.json 文件，這個(gè)包是你安裝的所有依賴項(xiàng)和命令。

現(xiàn)在，我們要安裝唯一的依賴項(xiàng)。

Graphpack 允許創(chuàng)建零配置的 GraphQL 服務(wù)器。由于剛剛開始使用 GraphQL，這將幫助我們繼續(xù)學(xué)習(xí)GraphQL 更多的內(nèi)容，而不必?fù)?dān)心服務(wù)器配置，執(zhí)行以下命令：

npm install --save-dev graphpack

或者使用 yarn 安裝：

yarn add --dev graphpack

安裝 Graphpack 之后，轉(zhuǎn)到 package.json文件中的腳本，并在其中輸入以下代碼：

"scripts": {
    "dev": "graphpack",
    "build": "graphpack build"
}

接著創(chuàng)建一個(gè)名為 src 的文件夾，它將是整個(gè)服務(wù)器中唯一的文件夾。

在 src 文件夾中創(chuàng)建一個(gè)名為 schema.graphql 的文件，并寫入以下代碼：

type Query {
  hello: String
}

在 schema.graphql 文件將是我們的整個(gè) GraphQL的模式(Schema)。

接著在 src 下創(chuàng)建文件 resolvers.js，并寫入以下代碼：

import { users } from "./db";

const resolvers = {
  Query: {
    hello: () => "Hello World!"
  }
};

export default resolvers;

這個(gè) resolvers.js 文件是我們提供 GraphQL 操作轉(zhuǎn)換為數(shù)據(jù)的指令的方式。

接著在 src 下創(chuàng)建一個(gè) db.js 文件并寫入以下代碼：

export let users = [
  { id: 1, name: "John Doe", email: "[email protected]", age: 22 },
  { id: 2, name: "Jane Doe", email: "[email protected]", age: 23 }
];

在本教程中，不使用真實(shí)的數(shù)據(jù)庫，所以這個(gè) db.js 文件將模擬一個(gè)數(shù)據(jù)庫，只是為了學(xué)習(xí)的目的。

現(xiàn)在 src 的結(jié)構(gòu)如下：

src
  |--db.js
  |--resolvers.js
  |--schema.graphql

接著運(yùn)行 npm run dev 或者 yarn dev 啟動(dòng)服務(wù)

在瀏覽器打開 localhost：4000。這里就實(shí)現(xiàn)我們?cè)?GraphQL 中的第一個(gè)查詢，更改和訂閱，打開界面如下：

你可以看到 GraphQL Playground，這是一個(gè)功能強(qiáng)大的 GraphQL IDE，可用于更好的開發(fā)工作流程。 如果你想了解有關(guān) GraphQL Playground的更多信息，請(qǐng)單擊此處。

GraphQL 有自己的語言類型，用于編寫模式。 這是一種人類可讀的模式語法，稱為規(guī)范與描述語言（SDL）。無論使用何種技術(shù)，SDL 都是相同的 - 你可以將其用于你想要的任何語言或框架。

這種模式語言非常有用，因?yàn)樗庇^的看出 API 具有哪些類型，一看到 API 就知道怎么使用。

類型是 GraphQL 最重要的特性之一。類型是表示 API 外觀的自定義對(duì)象。例如，如果你正在構(gòu)建一個(gè)社交媒體應(yīng)用程序，那么你的 API 應(yīng)該具有諸如文章、用戶、贊、組等類型。

類型具有字段，這些字段返回特定類型的數(shù)據(jù)。 例如，我們要?jiǎng)?chuàng)建一個(gè) User 類型，我們應(yīng)該有一些 name，email 和 age 字段。 類型字段可以是任何類型，并始終返回一種數(shù)據(jù)類型，如 Int，F(xiàn)loat，String，Boolean，ID，對(duì)象類型列表或自定義對(duì)象類型。

現(xiàn)在編寫的第一個(gè) Type，在 schema.graphql 文件中用以下內(nèi)容替換已存在的 Query 類型：

type User {
  id: ID!
  name: String!
  email: String!
  age: Int
}

每個(gè)用戶都將擁有一個(gè) ID，因此為其提供了 ID 類型。 用戶也會(huì)有一個(gè) name 和 email，所以給它一個(gè)字符串類型和一個(gè) Int 類型。

但是，在每一行的結(jié)尾的 ！呢？ 感嘆號(hào)表示字段不可為空，這意味著每個(gè)字段必須在每個(gè)查詢中返回一些數(shù)據(jù)。 User 中唯一可以為空的字段是 age。

在GraphQL中，有三個(gè)主要概念:

query (查詢) — 從服務(wù)器獲取數(shù)據(jù)的方式。

mutation (更改) — 修改服務(wù)器上的數(shù)據(jù)并獲取更新數(shù)據(jù)的方法(創(chuàng)建、更新、刪除)。

subscription (訂閱) — 當(dāng)希望數(shù)據(jù)更改時(shí)，可以進(jìn)行消息推送，使用 subscription 類型（針對(duì)當(dāng)前的日趨流行的 real-time 應(yīng)用提出的）。

為了簡(jiǎn)單地解釋這一點(diǎn)，GraphQL 中的查詢是獲取數(shù)據(jù)的方式。關(guān)于 GraphQL 中的查詢，最吸引人的地方之一就是你將獲得所需的確切數(shù)據(jù)，不多不少。這對(duì)我們的 API 產(chǎn)生了巨大的積極影響——不再像 REST API 那樣獲取過多或不足的信息。

我們將在 GraphQL 中創(chuàng)建第一個(gè)類型的 Query。 我們所有的查詢都將以此類型結(jié)束。 首先，在文件 schema.graphql 編寫一個(gè)名為Query 的新類型：

type Query {
  users: [User!]!
}

這很簡(jiǎn)單：用戶查詢將返回給我們一個(gè)或多個(gè)用戶的數(shù)組。 它不會(huì)返回 null，因?yàn)槲覀兎湃肓?! ，這意味著它是一個(gè)不可為空的查詢, 它總會(huì)返回一些數(shù)據(jù)。

但我們也可以返回特定用戶。 為此，創(chuàng)建一個(gè)名為 user 的新查詢。 在我們的 Query 類型中，寫以下代碼：

user(id: ID!): User!

現(xiàn)在 Query 類型應(yīng)該是這樣的:

type Query {
  users: [User!]!
  user(id: ID!): User!
}

如上所見，使用 GraphQL 中的查詢，還可以傳遞參數(shù)。在本例中，要查詢特定用戶，所以要傳遞其用戶的 ID。

但是，你可能想知道: GraphQL 如何知道從哪里獲取數(shù)據(jù)? 這就是為什么我們應(yīng)該有一個(gè) resolvers.js 文件。該文件告訴 GraphQL 它將如何以及在何處獲取數(shù)據(jù)。

首先，看看我們的 resolvers.js 文件并里該文件里導(dǎo)入 db.js 文件。我們剛才創(chuàng)建的 resolvers.js 文件內(nèi)容如下：

import { users } from "./db";

const resolvers = {
  Query: {
    hello: () => "Hello World!"
  }
};

export default resolvers;

現(xiàn)在，我們將創(chuàng)建第一個(gè) Query，在 resolvers.js 文件并替換 hello 函數(shù)。 現(xiàn)在 resolvers.js 內(nèi)容如下 ：

import { users } from "./db";

const resolvers = {
  Query: {
    user: (parent, { id }, context, info) => {
      return users.find(user => user.id == id);
    },
    users: (parent, args, context, info) => {
      return users;
    }
  }
};

export default resolvers;

現(xiàn)在，解釋它是如何工作的：

每個(gè)查詢解析器都有四個(gè)參數(shù)。 在 user 函數(shù)中，我們將 id 作為參數(shù)傳遞，然后返回與傳遞的 id 匹配的特定 user，這很簡(jiǎn)單。

在 users 函數(shù)中，我們只是返回已存在的 users 數(shù)組，這個(gè)數(shù)組存放的是所有的用戶。

現(xiàn)在，我們將測(cè)試查詢是否工作正常，轉(zhuǎn)到 localhost:4000，輸入以下代碼:

query {
  users {
    id
    name
    email
    age
  }
}

它應(yīng)該返回給你我們所有的用戶。

如果想返回特定的用戶:

query {
  user(id: 1) {
    id
    name
    email
    age
  }
}

在 GraphQL 中，更改是修改服務(wù)器上的數(shù)據(jù)并獲取更新數(shù)據(jù)的方式， 你可以像 REST 的CUD（創(chuàng)建，更新，刪除）一樣思考。

在 GraphQL 中創(chuàng)建我們的第一個(gè)類型修改，這里所有的修改都將在這個(gè)類型中結(jié)束。 首先，在 schema.graphql文件中編寫一個(gè)名為mutation 的新類型：

type Mutation {
  createUser(id: ID!, name: String!, email: String!, age: Int): User!
  updateUser(id: ID!, name: String, email: String, age: Int): User!
  deleteUser(id: ID!): User!
}

這里主要定義三個(gè)修改數(shù)據(jù)的方法：

createUser：傳入需要?jiǎng)?chuàng)建用戶的 ID，name，email 和 age，它會(huì)返回一個(gè)新用戶給我們。

updateUser：傳入需要修改用戶的 ID，name，email 和 age(非必傳)，它會(huì)返回一個(gè)新用戶給我們。

deleteUser: 傳入需要?jiǎng)h除用戶的 ID，它會(huì)返回一個(gè)新用戶給我們。

現(xiàn)在，在 resolvers.js 文件并在 Query 對(duì)象下面，創(chuàng)建一個(gè)新的 mutation 對(duì)象，如下所示：

Mutation: {
    createUser: (parent, { id, name, email, age }, context, info) => {
      const newUser = { id, name, email, age };

      users.push(newUser);

      return newUser;
    },
    updateUser: (parent, { id, name, email, age }, context, info) => {
      let newUser = users.find(user => user.id === id);

      newUser.name = name;
      newUser.email = email;
      newUser.age = age;

      return newUser;
    },
    deleteUser: (parent, { id }, context, info) => {
      const userIndex = users.findIndex(user => user.id === id);

      if (userIndex === -1) throw new Error("User not found.");

      const deletedUsers = users.splice(userIndex, 1);

      return deletedUsers[0];
    }
  }

現(xiàn)在 resolvers.js 文件內(nèi)容如下：

import { users } from "./db";

const resolvers = {
  Query: {
    user: (parent, { id }, context, info) => {
      return users.find(user => user.id == id);
    },
    users: (parent, args, context, info) => {
      return users;
    }
  },
  Mutation: {
    createUser: (parent, { id, name, email, age }, context, info) => {
      const newUser = { id, name, email, age };

      users.push(newUser);

      return newUser;
    },
    updateUser: (parent, { id, name, email, age }, context, info) => {
      let newUser = users.find(user => user.id === id);

      newUser.name = name;
      newUser.email = email;
      newUser.age = age;

      return newUser;
    },
    deleteUser: (parent, { id }, context, info) => {
      const userIndex = users.findIndex(user => user.id === id);

      if (userIndex === -1) throw new Error("User not found.");

      const deletedUsers = users.splice(userIndex, 1);

      return deletedUsers[0];
    }
  }
};

export default resolvers;

現(xiàn)在，我們要測(cè)試我們的 mutations 是否正常。轉(zhuǎn)到localhost:4000，輸入以下代碼:

mutation {
  createUser(id: 3, name: "Robert", email: "[email protected]", age: 21) {
    id
    name
    email
    age
  }
}

如我之前所說，訂閱是你與服務(wù)器保持實(shí)時(shí)連接的方式。這意味著無論何時(shí)在服務(wù)器中發(fā)生事件，并且每當(dāng)調(diào)用該事件時(shí)，服務(wù)器都會(huì)將相應(yīng)的數(shù)據(jù)發(fā)送到客戶端。

通過訂閱，你可以讓你的應(yīng)用在不同的用戶之間保持更新。

基本訂閱是這樣的:（sample.graphql ）

subscription {
  users {
    id
    name
    email
    age
  }
}

你會(huì)說它非常類似于查詢，是的， 但它的工作方式不同。

當(dāng)服務(wù)器中發(fā)生更新時(shí)，服務(wù)器將運(yùn)行訂閱中指定的 GraphQL 查詢，并向客戶機(jī)發(fā)送一個(gè)新更新的結(jié)果。

在這篇文章中，我們不打算討論訂閱，但是如果你想閱讀更多關(guān)于訂閱的信息，請(qǐng)單擊這里。

如你所見，GraphQL 是一項(xiàng)非常強(qiáng)大的新技術(shù)。 它為我們提供了構(gòu)建更好和精心設(shè)計(jì)的API的真正能力。 這就是為什么作者建議你現(xiàn)在開始學(xué)習(xí)它，從本文本作者的角度來說，它最終將取代 REST。

原文：

https://medium.freecodecamp.o...

你的點(diǎn)贊是我持續(xù)分享好東西的動(dòng)力，歡迎點(diǎn)贊！

干貨系列文章匯總?cè)缦?，覺得不錯(cuò)點(diǎn)個(gè)Star，歡迎 加群 互相學(xué)習(xí)。

https://github.com/qq44924588...

我是小智，公眾號(hào)「大遷世界」作者，對(duì)前端技術(shù)保持學(xué)習(xí)愛好者。我會(huì)經(jīng)常分享自己所學(xué)所看的干貨，在進(jìn)階的路上，共勉！

關(guān)注公眾號(hào)，后臺(tái)回復(fù)福利，即可看到福利，你懂的。