第一次接触GraphQL

1 年 ago

宇, 华

1 minute

这篇文章的目标对象

ちょっと触ってみたい

环境

graphql ^14.6.0

准备就绪

因为使用了Node.js，如果您手头没有安装，请进行安装。

$ brew install node

请准备好项目目录。因为需要从npm安装graphql等，所以先运行npm init。

$ mkdir gql-sample
$ cd gql-sample
$ npm init

3. 安装必要的软件包。
具体包括以下三个。

express-graphql

$ npm install graphql express express-graphql -save

实践

下準备已完成，我们立刻搭建GraphQL服务器吧。
首先，我们创建服务器端的JavaScript。

const express = require('express');
const express_graphql = require('express-graphql');
const { buildSchema } = require('graphql');
// GraphQL schema
const schema = buildSchema(`
 type Query {
    hello: String
 }
`);
// Root resolver
const root = {
    hello: () => 'world!'
};
// Create an express server and a GraphQL endpoint
const app = express();
app.use('/graphql', express_graphql({
 schema: schema,
 rootValue: root,
 graphiql: true
}));
app.listen(4000, () => console.log('GraphQL server running on localhost:4000/graphql'));

使用控制台来执行Node。

$ node server.js

如果一切顺利，通过在浏览器中打开以下内容，应该能够看到屏幕。

localhost:4000/graphql

让我们立即提交查询。
屏幕左侧是撰写查询的位置，右侧是显示结果的位置。

在左侧输入以下内容，然后点击屏幕左上角的播放按钮。

{
  hello
}

如果结果在右侧显示，那就表示成功了。

让我们简单地查看源代码吧。

在这里声明了GraphQL服务器接受的查询形式。
这次只接受字符串”hello”。
如果在查询中输入world而不是hello，应该会出现错误。

// GraphQL schema
const schema = buildSchema(`
 type Query {
    hello: String
 }
`);

当收到查询时，以下声明了返回什么。
这次，如果收到名为hello的查询，返回字符串’world!’，这是一个简单的例子。

// Root resolver
const root = {
    hello: () => 'world!'
};

让我们稍微改写一下。

function foo() {
    return 'hoge'
}
// Root resolver
const root = {
    hello: () => foo()
};

如果接收到 hello，则尝试执行 foo 函数。
响应仍然是字符串，但如果能够调用函数，那么可以实现更广泛的功能。

如果可以运行并获得hoge，则说明成功。