摘要：系列文章核心概念淺嘗本文常言道，實(shí)踐是檢驗(yàn)真理的唯一標(biāo)準(zhǔn)。遵循傳統(tǒng)，第一個(gè)例子必須是。官方提供這個(gè)中間件來支持基于的查詢，所以，這里選用作為服務(wù)器。首先是，這里對(duì)做了一點(diǎn)小修改，給幾個(gè)字段添加了不能為空的設(shè)計(jì)。

系列文章：

GraphQL 核心概念
graphql-js 淺嘗(本文)

常言道，實(shí)踐是檢驗(yàn)真理的唯一標(biāo)準(zhǔn)。

上一篇文章講了 GraphQL 的核心概念，所提到的一些例子都是理論化的，并沒有實(shí)際代碼做支撐，就好像在畫一個(gè)大餅，總是讓人不那么信服。

它真的有那么神奇嗎？那就同我一起看下去，用事實(shí)說話。

之前那篇文章一直有提到 GraphQL 是一個(gè)概念，每個(gè)語言可以有自己實(shí)現(xiàn)它的方式。因?yàn)椋沂歉闱岸说?，?duì) JavaScript 比較熟悉，所以，這里就用 graphql-js（GraphQL 的 JavaScript 實(shí)現(xiàn)）來舉例。

遵循傳統(tǒng)，第一個(gè)例子必須是 Hello World。

首先，安裝就不用多說了。

npm install graphql --save

那這個(gè)例子該怎么設(shè)計(jì)哪？假設(shè)，查詢一個(gè) hello 字符串，就返回一個(gè) world 字符串，很明顯 type 的結(jié)構(gòu)就該是這樣

type HelloWorld {
    hello: String
}

如何實(shí)現(xiàn)這個(gè) HelloWorld 類型哪？graphql-js 已經(jīng)定義好了基礎(chǔ)類，我們直接調(diào)用就行。那么，這個(gè) type 實(shí)現(xiàn)起來也就非常簡單了

import {
    GraphQLString,
    GraphQLObjectType,
} from "graphql";

const HelloWorldType = new GraphQLObjectType({
    name: "HelloWorldType",
    fields: () => ({
        hello: {
            type: GraphQLString,
        }
    })
});

簡單分析一下上面的代碼，可以看到 HelloWorldType 是一個(gè) GraphQLObjectType 的實(shí)例，它包含一個(gè) fields 是 hello，這個(gè) hello 所對(duì)應(yīng)的返回類型是字符串。

那如何返回 world 字符串？那就給它個(gè) resolve 方法

const HelloWorldType = new GraphQLObjectType({
    name: "HelloWorldType",
    fields: () => ({
        hello: {
            type: GraphQLString,
            resolve() {
                return "world";
            },
        }
    })
});

這樣類型就定義好了，還記不記得上篇文章提到的類型定義完成后該怎么辦？

對(duì)，創(chuàng)建查詢的 schema。

import {
    GraphQLString,
    GraphQLObjectType,
    GraphQLSchema,
} from "graphql";

const HelloWorldType = new GraphQLObjectType({
    name: "HelloWorldType",
    fields: {
        hello: {
            type: GraphQLString,
            resolve() {
                return "world";
            },
        }
    }
});

const schema = new GraphQLSchema({
    query: HelloWorldType
});

schema 設(shè)置好了，是不是想查詢看看哪？

東風(fēng)當(dāng)然是服務(wù)器啦。GraphQL 官方提供 express-graphql 這個(gè)中間件來支持基于 GraphQL 的查詢，所以，這里選用 Express 作為服務(wù)器。

安裝就不再重復(fù)了，只需將剛剛建立的 schema 添加到 express 的中間件中就可以了。

const app = express();

app
    .use("/graphql", graphqlHTTP({ schema, pretty: true }))
    .listen(3000, () => {
        console.log("GraphQL server running on http://localhost:3000/graphql");
    });

當(dāng)當(dāng)當(dāng)當(dāng)~完成，去 Postman 里查詢 http://localhost:3000/graphql?query={hello} 看看吧。

在上一篇文章里，我們?cè)O(shè)計(jì)了一個(gè)博客的查詢 schema，這次我們就來動(dòng)手實(shí)現(xiàn)它。（下面就開始講例子啦，不愿聽我嘮叨的可以直接看代碼）

前面 HelloWorld 的例子講的比較詳細(xì)，現(xiàn)在大家熟悉了語法，接下來的案例就會(huì)過得快一些。

首先是 PostType，這里對(duì) Posttype 做了一點(diǎn)小修改，給幾個(gè)字段添加了不能為空的設(shè)計(jì)。

/**
 * type Post {
 *   id: ID!,
 *   name: String!,
 *   createDate: String!,
 *   title: String!,
 *   subtitle: String,
 *   content: String,
 *   tags: [Tag]
 * }
 */
const Post = new GraphQLObjectType({
    name: "PostType",
    fields: () => ({
        id: {
            type: new GraphQLNonNull(GraphQLID)
        },
        name: {
            type: new GraphQLNonNull(GraphQLString)
        },
        createDate: {
            type: new GraphQLNonNull(GraphQLString)
        },
        title: {
            type: new GraphQLNonNull(GraphQLString)
        },
        subtitle: {
            type: GraphQLString
        },
        content: {
            type: GraphQLString
        },
        tags: {
            type: new GraphQLList(TagType),
            resolve: post => post.tags.map(tagName => getTagByName(tagName))
        }
    })
});

然后是另一個(gè)主要的 type: Tag type。

/**
 * type Tag {
 *   id: ID!,
 *   name: String!,
 *   label: String!,
 *   createDate: String!,
 *   posts: [Post]
 * }
 */
const Tag = new GraphQLObjectType({
    name: "TagType",
    fields: () => ({
        id: {
            type: new GraphQLNonNull(GraphQLID)
        },
        name: {
            type: new GraphQLNonNull(GraphQLString)
        },
        label: {
            type: new GraphQLNonNull(GraphQLString)
        },
        createDate: {
            type: new GraphQLNonNull(GraphQLString)
        },
        posts: {
            type: new GraphQLList(PostType),
            resolve: tag => getPostsList().filter(post => ~post.tags.indexOf(tag.name))
        }
    })
});

兩個(gè)主要的類型已經(jīng)定義好了，把它們倆整合起來就是博客類型了。

/**
 * type Blog {
 *   post: Post,    // 查詢一篇文章
 *   posts: [Post],    // 查詢一組文章，用于博客首頁
 *   tag: Tag,        // 查詢一個(gè)標(biāo)簽
 *   tags: [Tag],    // 查詢所有標(biāo)簽，用于博客標(biāo)簽頁
 * }
 */
const BlogType = new GraphQLObjectType({
    name: "BlogType",
    fields: () => ({
        post: {
            type: PostType,
            args: {
                name: {
                    type: GraphQLString
                }
            },
            resolve: (blog, { name }) => getPostByName(name),
        },
        posts: {
            type: new GraphQLList(PostType),
            resolve: () => getPostsList(),
        },
        tag: {
            type: TagType,
            args: {
                name: {
                    type: GraphQLString
                }
            },
            resolve: (blog, { name }) => getTagByName(name),
        },
        tags: {
            type: new GraphQLList(TagType),
            resolve: () => getTagsList(),
        }
    })
});

這里有一個(gè)新東西，就是 arg 字段，用來獲取查詢參數(shù)，如果在沒有設(shè)置過 arg 字段的屬性上添加變量進(jìn)行查詢，graphql-js 的驗(yàn)證系統(tǒng)會(huì)報(bào)錯(cuò)。

最后，將之前的 helloworld 類型稍微修飾一下，獨(dú)立出來，然后和 blog type 整合到一起成為根查詢類。

const queryType = new GraphQLObjectType({
    name: "RootQueryType",
    fields: () => ({
        hello: WorldType,
        blog: {
            type: BlogType,
            resolve: () => ({})
        },
    })
});

const schema = new GraphQLSchema({
    query: queryType
});

OK。這樣整個(gè) Demo 就完成了(查看源碼戳這里)，快去 Postman 試試各種查詢，體驗(yàn) GraphQL 的神奇吧。（不知道怎么寫查詢語句的就看上一篇吧）

如果，你不喜歡 GET 方法或查詢字符串過長，express-graphql 也支持 POST 方法，服務(wù)器會(huì)先查看請(qǐng)求的 URL 中是否包含查詢字符串，如果不包含就會(huì)去 request body 中獲取，只需在 request header 中將 Content-Type 設(shè)置為 application/graphql 就可以了。

全文一直在說查詢，或許你會(huì)疑惑，那我修改怎么做哪？graphql 中的修改稱之為 mutation。mutation 可以定義自己的接口解析類，它在 graphql 的 schema 中是一個(gè)可選項(xiàng)，其他的和查詢并無兩樣，只是最后在 resolve 方法中的處理方式不同而已。

const schema = new GraphQLSchema({
    query: queryType，
    mutation: mutationType
});

最后的最后提一句，nodemon 很好用，誰用誰知道。