摘要：允許創(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ì)給你想要的。簡單，但是傳統(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)該盡可能的簡潔和直觀， 好的 API 是非常容易使用和學(xué)習(xí)的。直觀，在開始設(shè)計(jì) API 時(shí)常要記住的一點(diǎn)。

我們已經(jīng)使用 REST 構(gòu)建 Api 很長時(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í)踐中的工作原理，因此這里使用簡約的零配置 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: "john@gmail.com", age: 22 },
  { id: 2, name: "Jane Doe", email: "jane@gmail.com", 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)用提出的）。

為了簡單地解釋這一點(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!]!
}

這很簡單：用戶查詢將返回給我們一個(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，這很簡單。

在 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: "robert@gmail.com", 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ù)福利，即可看到福利，你懂的。