其實 GraphQL 沒那麼難！全網最簡潔的教程

以前請某個個人諮詢客戶的公司建議他們使用graphql，還專門作了一個培訓，而後過了一段時間一問，說還沒作，回覆緣由是一堆常見的你懂得。

我就說這個玩意有什麼難！結果看了官方文檔，以及相似這樣的：juejin.im/post/5c015a… ,

真是一堆繞着圈子的屁話啊。

不得已出馬，拍出一個入門文檔。請對比了解什麼叫作簡潔，什麼叫作不羅嗦不聒噪，艹。

有node基礎的，10分鐘學會。

Hello World！使用 GraphQL

如今咱們來寫咱們第一個基於express的 GraphQL 服務器。本教程中，咱們將使用 Apollo Server庫。爲此，咱們須要安裝三個包

npm install --save graphql apollo-server-express express
複製代碼

才能使用 Express 應用程序做爲中間件。

graphql 是一個支持庫，apollp-server-express 是相應的 HTTP 服務器支持包express 是 Nodejs 的 web 框架。

開始

複製代碼讓咱們簡要了解下這些依賴的做用。

新建一個名字爲 index.js，包含如下代碼的文件：

const express = require('express');
const { ApolloServer, gql } = require('apollo-server-express');
const typeDefs = gql`
	type Query {
		hello: String
	}
`;
const resolvers = {
	Query: {
		hello: () => 'Hello world!'
	}
};
const server = new ApolloServer({ typeDefs, resolvers });
const app = express();
server.applyMiddleware({ app });
app.listen({ port: 4000 }, () =>
	console.log(`🚀 Server ready at http://localhost:4000${server.graphqlPath}`)
);
複製代碼

gql 是一個模板文字標記，用於將 GraphQL schema 編寫爲類型。schema由類型定義組成,上面的例子中，咱們定義了 typeDefs 來編寫 graphQL 的 schema。

Resolver 用於從 schema 中返回字段的數據。在咱們的示例中，咱們定義了一個 resolver，它將函數 hello() 映射到咱們的 schema 上的實現。

要運行服務器，只須要打開 terminal 並運行命令 node index.js。

如今，從瀏覽器窗口訪問 url：

http://localhost:4000/graphql 
複製代碼

來看看它的操做。要運行一個 query，在左側編輯空白部分，輸入如下 query。

{hello}
複製代碼

而後按中間的 ▶ （play）按鈕。查看輸出：

{
  "data": {
    "hello": "Hello world!"
  }
}
複製代碼

瞧！你剛建立了第一個 GraphQL 服務器。

命令行驗證服務啓動

可以經過命令便可驗證的話，就沒必要急着寫代碼，由於前者飛快簡潔。

操做系統差別，關於單引號和雙引號，真tm的折騰人。

Linux | MAC

命令

curl -i -X POST -d'{query: "{hello}"}' http://localhost:4000/graphql
複製代碼

Windows

命令

curl  -X POST -H "Content-Type: application/json" -d"{\"query\":\"{hello}\"}"  http://localhost:4000/graphql
複製代碼

輸出

{"data":{"hello":"Hello world!"}}
複製代碼

使用 GraphQL 構建 API

接下來作一個看起來像是真的應用的案例，此次咱們添加一個像樣的Person對象和對它的查詢和修改。

添加 Schema。咱們須要一個 schema 來啓動咱們的 GraphQL API。讓咱們在 api 目錄下建立一個名字爲 api/schema.js 的新文件。添加如下 schema。

const typeDefs = gql`
type Person {
    id: Int
    name: String    
}
type Query {
    allPeople: [Person]
    person(id: Int!): Person
}
type Mutation {
    createPerson(id:String,name: String): Person
}
`;
const defaultData = [
    {
        id: 1,
        name: 'Reco'        
    },
    {
        id: 2,
        name: 'Tibe',        
    }
];
複製代碼

複製代碼咱們的 schema 一共包含兩個 query：

• 第一個是 allPeople，經過它咱們能夠列出到 API 中的全部的人
• 第二個查詢 person 是使用他們的 id檢索一我的
• 還有一個修改createPerson，必須放到type Mutation 內

這兩種查詢類型都依賴於一個名爲 Person 對象的自定義類型，該對象包含2個屬性。

添加 Resolver

咱們已經瞭解了 resolver 的重要性。它基於一種簡單的機制，去關聯 schema 和 data。Resolver 是包含 query 或者 mutation 背後的邏輯和函數。而後使用它們來檢索數據並在相關請求上返回。

若是在使用 Express 以前構建了服務器，則能夠將 resolver 視爲控制器，其中每個控制器都是針對特定路由構建。因爲咱們不在服務器後面使用數據庫，所以咱們必須提供一些虛擬數據來模擬咱們的 API。 建立一個名爲 resolvers.js 的新文件並添加下面的文件:

const defaultData = [
    {
        id: 1,
        name: 'Reco'        
    },
    {
        id: 2,
        name: 'Tibe',        
    }
];
const resolvers = {
    Query: {
        allPeople: () => {
            return defaultData;
        },
        person: (root, { id }) => {
            return defaultData.filter(character => {
                return (character.id = id);
            })[0];
        }
    },
    Mutation:{
        createPerson:(root,{id,name}) =>{
            defaultData.push({id,name})
            return defaultData[defaultData.length - 1 ]
        }
    }
};
複製代碼

首先，咱們定義 defaultData 數組，其中包含2我的物的詳細信息。person() 箭頭函數使用參數 id 來檢索具備請求 ID 的 person 對象。這個已經在咱們的查詢中定義了。

實現服務器

運行服務器。如今要測試咱們的 GraphQL API，在瀏覽器窗口中跳轉

http://localhost:4000/graphql 
複製代碼

並運行如下 query：

{allPeople{id,name}}

複製代碼點擊 play 按鈕，你將在右側部分看到熟悉的結果，以下所示。

{
  "data": {
    "allPeople": [
      {
        "id": 1,
        "name": "Reco"
      },
      {
        "id": 2,
        "name": "Tibe"
      }
    ]
  }
}
複製代碼

要獲取單我的物對象，請嘗試運行:

{person(id:1){id,name}}
複製代碼

要建立一個person：

mutation{createPerson(id:"4",name:"reco"){id,name}}
複製代碼

複製代碼運行上面的查詢，在結果中，你能夠得到獲得的每一個字段/屬性的值以進行查詢。你的結果將相似於如下內容。

結論

結論就是這就是一個很簡單的玩意兒，只是上個 ，哪裏須要那麼多屁話。