摘要：允許創建零配置的服務器。這是一種人類可讀的模式語法，稱為規范與描述語言。類型是表示外觀的自定義對象。為此，創建一個名為的新查詢。這意味著無論何時在服務器中發生事件，并且每當調用該事件時，服務器都會將相應的數據發送到客戶端。

想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等著你！

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

你可以將 API 想象成一個酒保。你向酒保要一杯酒，他們會給你想要的。簡單，但是傳統的 REST API 有什么問題的呢？

自從現代 Web 出現以來，構建 Api 并不像聽起來那么困難，但是學習和理解 Api 才是比較難。開發人員是大多數據使用你的 API 來構建某些內容或僅使用數據。所以你的 API 應該盡可能的簡潔和直觀， 好的 API 是非常容易使用和學習的。直觀，在開始設計 API 時常要記住的一點。

我們已經使用 REST 構建 Api 很長時間了。隨之而來的也有一些問題，在使用 REST 設計構建 API 時，你會遇到以下問題:

涉及很多端

于開發人員來說，學習和理解你的 API 要困難得多

*　信息的獲取有多有少

為了解決這些問題，Facebook 創建了 GraphQL。現在，作者認為 GraphQL 是構建 Api 的最佳方式。這篇文章將告訴你為什么要學習了解一下 GraphQL。

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

GraphQL有很多特性，比如:

GraphQL查詢總是能準確獲得你想要的數據，不多不少，所以返回的結果是可預測的， 不再像你使用 REST 那樣過度獲取信息。

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

GraphQL是強類型的，通過它，可以在執行之前驗證 GraphQL 類型系統中的查詢， 它幫助我們構建更強大的 Api。

這是對 GraphQL 的基本介紹——為什么它這么強大，為什么它現在這么流行。如果你想了解更多關于它的信息，可以訪問 GraphQL網站 學習。

本文的主要目的不是學習如何設置 GraphQL服務器，所以我們現在還沒有深入研究。 文本的目標是了解 GraphQL 在實踐中的工作原理，因此這里使用簡約的零配置 GraphQL 服務器的 Graphpack。

開始項目前，首先我們創建一個新文件名為 graphql-server， 在 mac 終端執行

mkdir graphql-server

接著進入該文件，執行

npm init -y

或者執行

yarn init

npm 將創建一個包 package.json 文件，這個包是你安裝的所有依賴項和命令。

現在，我們要安裝唯一的依賴項。

Graphpack 允許創建零配置的 GraphQL 服務器。由于剛剛開始使用 GraphQL，這將幫助我們繼續學習GraphQL 更多的內容，而不必擔心服務器配置，執行以下命令：

npm install --save-dev graphpack

或者使用 yarn 安裝：

yarn add --dev graphpack

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

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

接著創建一個名為 src 的文件夾，它將是整個服務器中唯一的文件夾。

在 src 文件夾中創建一個名為 schema.graphql 的文件，并寫入以下代碼：

type Query {
  hello: String
}

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

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

import { users } from "./db";

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

export default resolvers;

這個 resolvers.js 文件是我們提供 GraphQL 操作轉換為數據的指令的方式。

接著在 src 下創建一個 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 }
];

在本教程中，不使用真實的數據庫，所以這個 db.js 文件將模擬一個數據庫，只是為了學習的目的。

現在 src 的結構如下：

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

接著運行 npm run dev 或者 yarn dev 啟動服務

在瀏覽器打開 localhost：4000。這里就實現我們在 GraphQL 中的第一個查詢，更改和訂閱，打開界面如下：

你可以看到 GraphQL Playground，這是一個功能強大的 GraphQL IDE，可用于更好的開發工作流程。 如果你想了解有關 GraphQL Playground的更多信息，請單擊此處。

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

這種模式語言非常有用，因為它更直觀的看出 API 具有哪些類型，一看到 API 就知道怎么使用。

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

類型具有字段，這些字段返回特定類型的數據。 例如，我們要創建一個 User 類型，我們應該有一些 name，email 和 age 字段。 類型字段可以是任何類型，并始終返回一種數據類型，如 Int，Float，String，Boolean，ID，對象類型列表或自定義對象類型。

現在編寫的第一個 Type，在 schema.graphql 文件中用以下內容替換已存在的 Query 類型：

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

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

但是，在每一行的結尾的 ！呢？ 感嘆號表示字段不可為空，這意味著每個字段必須在每個查詢中返回一些數據。 User 中唯一可以為空的字段是 age。

在GraphQL中，有三個主要概念:

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

mutation (更改) — 修改服務器上的數據并獲取更新數據的方法(創建、更新、刪除)。

subscription (訂閱) — 當希望數據更改時，可以進行消息推送，使用 subscription 類型（針對當前的日趨流行的 real-time 應用提出的）。

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

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

type Query {
  users: [User!]!
}

這很簡單：用戶查詢將返回給我們一個或多個用戶的數組。 它不會返回 null，因為我們放入了 ! ，這意味著它是一個不可為空的查詢, 它總會返回一些數據。

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

user(id: ID!): User!

現在 Query 類型應該是這樣的:

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

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

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

首先，看看我們的 resolvers.js 文件并里該文件里導入 db.js 文件。我們剛才創建的 resolvers.js 文件內容如下：

import { users } from "./db";

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

export default resolvers;

現在，我們將創建第一個 Query，在 resolvers.js 文件并替換 hello 函數。 現在 resolvers.js 內容如下 ：

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;

現在，解釋它是如何工作的：

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

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

現在，我們將測試查詢是否工作正常，轉到 localhost:4000，輸入以下代碼:

query {
  users {
    id
    name
    email
    age
  }
}

它應該返回給你我們所有的用戶。

如果想返回特定的用戶:

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

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

在 GraphQL 中創建我們的第一個類型修改，這里所有的修改都將在這個類型中結束。 首先，在 schema.graphql文件中編寫一個名為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!
}

這里主要定義三個修改數據的方法：

createUser：傳入需要創建用戶的 ID，name，email 和 age，它會返回一個新用戶給我們。

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

deleteUser: 傳入需要刪除用戶的 ID，它會返回一個新用戶給我們。

現在，在 resolvers.js 文件并在 Query 對象下面，創建一個新的 mutation 對象，如下所示：

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

現在 resolvers.js 文件內容如下：

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;

現在，我們要測試我們的 mutations 是否正常。轉到localhost:4000，輸入以下代碼:

mutation {
  createUser(id: 3, name: "Robert", email: "robert@gmail.com", age: 21) {
    id
    name
    email
    age
  }
}

如我之前所說，訂閱是你與服務器保持實時連接的方式。這意味著無論何時在服務器中發生事件，并且每當調用該事件時，服務器都會將相應的數據發送到客戶端。

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

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

subscription {
  users {
    id
    name
    email
    age
  }
}

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

當服務器中發生更新時，服務器將運行訂閱中指定的 GraphQL 查詢，并向客戶機發送一個新更新的結果。

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

如你所見，GraphQL 是一項非常強大的新技術。 它為我們提供了構建更好和精心設計的API的真正能力。 這就是為什么作者建議你現在開始學習它，從本文本作者的角度來說，它最終將取代 REST。

原文：

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

你的點贊是我持續分享好東西的動力，歡迎點贊！

干貨系列文章匯總如下，覺得不錯點個Star，歡迎 加群 互相學習。

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

我是小智，公眾號「大遷世界」作者，對前端技術保持學習愛好者。我會經常分享自己所學所看的干貨，在進階的路上，共勉！

關注公眾號，后臺回復福利，即可看到福利，你懂的。