后续的elm

2 年 ago
韵, 科
3 minutes

这是Nextremer Advent Calendar 2016第18天的文章。

我在 Node.js Festival 2016 上听了 BarakChamo 先生关于 GraphQL 的演讲，引起了我的兴趣。

精灵宝可梦的GraphQL

http://graph.pokeql.win/ – 可以通过此链接访问 http://graph.pokeql.win/ 网站。
https://github.com/BarakChamo/PokeQL – 可以通过此链接访问 https://github.com/BarakChamo/PokeQL 的GitHub页面。

GraphQL是一种查询语言。

从公式中引用

GraphQL是用于API的查询语言，它是执行这些查询的运行时，利用现有数据进行操作。
GraphQL可以对API的数据进行完整且可理解的描述，赋予客户端询问任何所需内容的能力，并使得API能够轻松进化随时间推移，并实现强大的开发工具。

为什么选择使用GraphQL

    • GraphQLスキーマを用意するだけでドキュメントが用意される。

Swggerほどインタラクティブなことはできないが・・・

クライアントからQueryをなげて、高度な検索などができるらしい？追ってない。
(GraphQLの実態はPOST/GETリクエストにqueryや、variableというJSON文字列を渡すことで動作している)

你好，世界 (Nǐ ,

暂时尝试使用Node.js和Express实现的Hello World。
您可以从http://graphql.org/graphql-js/running-an-express-graphql-server/获取。

var express = require('express');
var graphqlHTTP = require('express-graphql');
var { buildSchema } = require('graphql');

// Construct a schema, using GraphQL schema language
var schema = buildSchema(`
  type Query {
    hello: String
  }
`);

// The root provides a resolver function for each API endpoint
var root = {
  hello: () => {
    return 'Hello world!';
  },
};

var app = express();
app.use('/graphql', graphqlHTTP({
  schema: schema,
  rootValue: root,
  graphiql: true,
}));
app.listen(4000);
console.log('Running a GraphQL API server at localhost:4000/graphql');

只需一个选择，请参考以下中文释义：
需要理解的是，当调用模式的hello时，将调用根目录下的hello。请查看官方文档以了解更多详细信息。

另外补充一点，这种写法是使用 GraphQL模式 来编写的。

如果不使用GraphQL模式，则写法可能如下。
可能在GitHub或其他地方经常见到这种写法。

var express = require('express');
var graphqlHTTP = require('express-graphql');
var { 
  GraphQLSchema,
  GraphQLString,
} = require('graphql');

var schema = new GraphQLSchema({
  query: new GraphQLObjectType({
    name: 'Query',
    fields: {
      hello: {
        type: GraphQLString,
        resolve: function(source, args) {
          return 'Hello world!';
        }
      }
    }    
  })
});

var app = express();
app.use('/graphql', graphqlHTTP({
  schema: schema,
  graphiql: true,
}));
app.listen(4000);
console.log('Running a GraphQL API server at localhost:4000/graphql');
スクリーンショット 2016-12-07 12.45.01.png

以前的GraphQL模式中存在不支持的部分（例如描述等），但最近似乎已经得到了支持。顺便提一下，描述的编写方式是

# Query description here
type Query {
  # hello endpoint description here
  hello: String
}

是的。

我们将使用GraphQL模式进行实现。

用GraphQL进行CRUD操作

如果想要尝试的话，请使用make start运行我们本次实现的源代码。当您确认启动后，应该可以访问以下的GraphiQL。

我的开发环境

    Macbook pro

Docker Compose: Docker组合

    • node.js (v6.5.0)/ express + express-graphql + sequelize / babel (ES2015)

 

    • MySQL

 

    elm … orz(後述)

创建用户模式

假设在Sequelize中有这样一个模型，

sequelize.define('user', {
    id  : {type: dataType.BIGINT(11), primaryKey: true, autoIncrement: true},
    name: {type: dataType.STRING},
    email: {type: dataType.STRING},
  },{
    underscored: true,
    charset: 'utf8',
    timestamps: true,
    paranoid: false,
  })

首先，我们用GraphQL模式撰写这个模型。

type User {
  id: Int!
  name: String!
  email: String!
}

用户获取

我将添加一个根据id获取用户的查询。

type Query {
  user(id: Int) : User
}

我会添加一个通过ID获取用户的处理。

const rootValue = {
  user: ({id}) => {
    return models.User.findOne({where:{id: id}});
  }
};

我們現在可以通過這樣來達到取得，但由於缺少數據，我們需要創建一個用於創建用戶的mutation。

突变

突变是用于创建和更新数据的工具。

添加创建用户的 Mutation

input UserData {
  name: String!
  email: String!
}
type Mutation {
  createUser(data: UserData) : User
}

我們在創建時添加了用於創建UserData的功能。createUser函數接收UserData作為輸入，創建User後返回該User。

将创建的处理添加到rootValue中。

const rootValue = {
  user: ({id}) => {
    return models.User.findOne({where:{id}});
  },
  createUser: ({data}) => {
    return models.User.create(data);
  }
};

我试着确认一下

我将在 http://localhost:3000/graphql 进行确认。
请按照以下方式进行输入。

上方左侧的查询

mutation ($data: UserData){
  createUser(data: $data) {
    id
    name
    email
  }
}

左下方的查询变量

{
  "data": {
    "name": "test",
    "email": "test@example.com"
  }
}

当我尝试运行时，我认为会返回这样的数据。

{
  "data": {
    "createUser": {
      "id": 1,
      "name": "test",
      "email": "test@example.com"
    }
  }
}
スクリーンショット 2016-12-07 15.28.34.png

更新/删除就是这种感觉。

  updateUser: ({id, data}) => {
    return models
      .User
      .findOne({where: {id}})
      .then((user) => {
        if (user) {
          return user.update(data).then((updated) => updated);
        } else {
          return null;
        }
      }
    );
  },
  deleteUser: ({id}) => {
    return models.User.destroy({where: {id}});
  }
スクリーンショット 2016-12-17 13.29.10.png

目前为止，我已经用GraphQL创建了CRUD机制。

顺便说一下，如果不使用GraphQL架构，写法会变成这样。

以上就是。

补充记录

我本来想用Elm创建一个前端界面来操作用户，但是时间不够……orz

只需要一个选择，请用中文转述以下内容：
稍微介绍一下Elm…
Elm是一种AltJS，它是基于Haskell的静态类型函数式编程语言。
据说Elm的HTML渲染引擎要比React和Angular快。
http://elm-lang.org/blog/blazing-fast-html-round-two

实际上我只准备好了环境。

一旦开始并使用”make logs”检查启动，我认为您将能够访问以下内容。

由于elm正在运行webpack-dev-server，因此可以进行热部署。
此外，生成的elm-make的成果物将存放在/server/public中，可以通过http://localhost:3000查看elm。
现在有elm的示例代码，但还有很多工作要完成。

请提供以下内容的中文本地化释义：

参考

https://learngraphql.com/ – 学习GraphQL的网站。
http://qiita.com/Jxck_/items/545e67c556e815620692 – Jxck的Qiita页面上的文章。

✖
广告
将在 10 秒后关闭
bannerAds