其实 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}}
复制代码

复制代码运行上面的查询，在结果中，你能够得到获得的每一个字段/属性的值以进行查询。你的结果将相似于如下内容。

结论

结论就是这就是一个很简单的玩意儿，只是上个 ，哪里须要那么多屁话。