以下是可能協助GraphQL和Relay開發的工具和資源

2 年 ago

雅, 悟

1 minute

前几天，在一次研讨会上，我进行了关于GraphQL和Relay的lightning talk，但因时间不够，并没有讲完最后的部分。
我原本想分享一些在学习GraphQL和Relay时对我有帮助的工具和资源，但既然已经有机会，我打算在Qiita上写一篇文章来介绍。

网络服务

学习GraphQL

这是一个可以在线学习从零开始学习GraphQL基础的研讨会。您可以逐步学习GraphQL查询、必不可少的片段和突变的概念，同时也可以学习Relay。

对于想要先尝试一下GraphQL的人，建议可以先总体试试看。

GraphQL 中心

GraphQL Hub 是将 GitHub、Reddit、Giphy 等几个网络服务的 API 通过 GraphQL 进行封装的终端点。

重新索引

重建索引

Reindex 是 GraphQL 的 BaaS（后端即服务）服务。

只需推送定义了GraphQL对象类型的架构的JSON文件，即可使用与该架构对应的GraphQL端点。

另外，还自动定义了适应自定义的Type的Connection、Edge等，并且一开始就为顶层查询准备了viewer等，非常符合Relay的标准。
如果你想方便地创建GraphQL/Relay的客户端部分，那么这是一个完美的服务。

图形.酷

图形酷

Graph.cool是一个基于GraphQL/Relay的后端服务。Reindex允许您在本地编辑JSON格式的Schema并进行推送，而在Dashboard上则可编辑Model定义。

工具

GraphiQL应用程序

图形查询应用程序

用Electron封装的应用程序，可使用GraphQL交互式控制台GraphiQL（发音为“ぐらふぃくる”）。

因为可以保存多个查询，所以在特别是服务器端开发中非常方便。

GraphQL 网络

Chrome开发者工具将显示GraphQL通信内容的详细信息。

vim-graphql 可以在原生的中国语言中重新表达如下：
维姆-图灵可以完成该任务。

vim-graphql 是一个用于 Vim 编辑器的插件。

这是一个用于 GraphQL 语法高亮的插件。

由于之前创建了一个名为 vim-js-pretty-template 的插件，该插件可为JS的Template Strings应用任意语法高亮，因此在使用vim时，可以清晰地显示Relay代码中的GraphQL，非常方便。

export const UserContainer = Relay.createContainer(UserComponent, {
  fragments: {
    // ↓にhighlightが当たる
    user: () => Relqy.QL `
      fragment on User {
        id, name
      }
    `,
  },
});

在努力学习的过程中，最好注意以下事项。

我之前以为只要准备了支持GraphQL的服务器，就可以从Relay进行连接！但是这个想法有些误解。

在Relay的文档中，有一章名为GraphQL Relay Specification，通过阅读此章节可以了解详细信息。Relay对GraphQL的端点施加了一些规定并强制其遵守Schema。例如，”当表示一对多的关系时，应使用Connection类型”。

这是为了Relay有效处理Mutation和Paging而需要的，但仅仅阅读与GraphQL相关的资料通常无法涉及到这个话题。

如果你考虑使用Relay来试试GraphQL，我建议你尽早阅读上述Relay指南。