用Apollo+Express开始学习GraphQL入门~草草理解GraphQL
首先
作為一位GraphQL的”超級新手”，我
“GraphQL 是一个类似 SQL 的 API 版本”
我只能提供一种选项来用中文转述以下内容：我只能提供一种充满小品味的解释。
我亲身接触过 GraphQL，而不仅仅是从外界了解。
“我完全了解GraphQL”
希望能够与您共享达到这一目标的流程。
※ 本人还是个初学者，请如果有错误的理解，请指正。
建立环境
安装
请安装以下的软件包。
请在各个链接中查看详细信息。
-
- express
-
- apollo-server-express
- graphql
$ npm i --save express apollo-server-express graphql
写代码
const express = require('express');
const { ApolloServer, gql } = require('apollo-server-express');
// Construct a schema, using GraphQL schema language
const typeDefs = gql`
type Query {
hello: String
}
`;
// Provide resolver functions for your schema fields
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}`)
);
执行
$ node app.js
如果成功执行，将会出现以下文本。
? Server ready at http://localhost:4000/graphql
让我们尝试访问 http://localhost:4000/graphql。
只要达到这个界面就可以了。
写GraphQL
你好世界
让我们在http://localhost:4000/graphql页面的左侧部分写下以下代码。
{
hello
}
我终于成功运行了GraphQL！
自己创建数据
让我们为GraphQL处理准备数据。只需要随便创建一个对象就好。
该对象的键是id、name、age和created_date。
exports.users = [
{
id: 1,
name: 'Zonomaa',
age: 25,
created_date: '2019-04-05 01:35:25.000'
},
{
id: 2,
name: 'Masa',
age: 28,
created_date: '2019-04-10 08:23:51.000'
},
{
id: 3,
name: 'Ms',
age: 30,
created_date: '2019-04-10 08:32:09.000'
}
// ... 適当にいくつか作ってみましょう
];
将代码写在名为users.js的另一个文件中并保存。
在app.js的开头进行加载。
const express = require('express');
const { ApolloServer, gql } = require('apollo-server-express');
+ const { users } = require('./users');
定义模式
在GraphQL中，我们会详细描述处理的数据结构。虽然不详细列举细节，但在参考时建议参考此处等相关资料。
既然已经创建了用户，现在我们来声明它的类型。
type User {
id: Int
name: String
age: Int
created_date: String
}
让我们在 app.js 的 typeDefs 中进行补充。
// Construct a schema, using GraphQL schema language
const typeDefs = gql`
+ type User {
+ id: Int
+ name: String
+ age: Int
+ created_date: String
+ }
type Query {
hello: String
}
`;
在这个阶段，只是定义了类型，所以无法获取。
为了使其可以获取，让我们也定义一个查询吧。
由于你不再需要，故我将删除“hello”。
const typeDefs = gql`
type User {
id: Int
name: String
age: Int
created_date: String
}
type Query {
- hello: String
+ users: [User]
}
`;
终于我能够定义一个查询了。
但是很抱歉，我无法获取用户了！
写下一个用于获得的逻辑
在学习GraphQL时我最惊讶的一点是，需要自己编写数据获取逻辑。
在 app.js 的中间层中，有一个名为 resolvers 的函数。
我们将根据在 Query 中定义的键创建一个函数在这里。
const resolvers = {
Query: {
- hello: () => 'Hello world!',
+ users: () => users
},
};
我编写了返回用户的逻辑。
只有在写到这一点时，才能够从 GraphQL 中获取 Users。
请在添加代码后重新启动node任务。
$ node app.js
获取用户
让我们写一个查询并执行一下。
{
users {
id
name
}
}
从用户那里获取ID和姓名的意思是。
我成功获得了！！！！
我大致理解了GraphQL的解释。
直到我实际去碰它之前，我以为GraphQL是一个带有搜索引擎和定义好类型即可轻松进行搜索的东西。
然而，当我尝试运行它时，我才发现自己完全误解了。
实在是太丢脸了…
我的对GraphQL的理解
GraphQL是一种可以方便地从搜索引擎获取数据的工具。
從… (conveys the meaning of “from”)
GraphQL是一个新的API框架，需要努力编写获取逻辑的工具。
这个解释发生了变化。
GraphQL… 原来比想象中更加复杂…
可以选择多种数据存储方式
你可以将MySQL和FireStore等数据存储作为GraphQL的连接，并进行获取。
这次我们将JavaScript对象作为数据存储，但只要编写获取逻辑，就可以获取任何数据。
当我在研究GraphQL的时候，我看到了一些介绍文说GraphQL可以链接各种数据存储方式。一下子明白了原来是这个意思…
总结
我对GraphQL的强大之处有了认识。它与REST API完全不同，我也能够理解其广泛适用性。
然而，GraphQL的模式语言有很多种类，要理解它需要相当多的学习感觉…
下一次我们将继续推进实际的数据获取操作等实施工作。
成为GraphQL大师的道路漫漫无尽。
下一步→ 使用Apollo+Express开始GraphQL入门之旅 ~ 数据获取等级1
