其实 GraphQL 没那么难!全网最简洁的教程

4,194 阅读4分钟

之前请某个我的咨询客户的公司建议他们使用graphql,还专门做了一个培训,然后过了一段时间一问,说还没做,回复原因是一堆常见的你懂得。

我就说这个玩意有什么难!结果看了官方文档,以及类似这样的:juejin.cn/post/684490… ,

真是一堆绕着圈子的屁话啊。

不得已出马,拍出一个入门文档。请对比了解什么叫做简洁,什么叫做不罗嗦不聒噪,艹。

有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}}

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

结论

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