先日、某勉強会で、GraphQLとRelay 関連のネタについてLTをしたのですが、時間切れで最後の方まで語れませんでした。
GraphQL, Relayを学ぶ上で役だったツールやリソースの紹介をしようと思っていたのですが、折角なのでQiitaの方で書いてみようと思います。

Web Service

Learn GraphQL

GraphQLの基本をonline で1から学べるworkshopです。GraphQLのクエリの記法や、Relayを学ぶ上で必要不可欠となるFragment, Mutationの概念についても step by stepで学習できます。

取りあえずGraphQLを触ってみたい、という人は一通り叩いてみることをオススメします。

GraphQL Hub

GraphQL Hub
GithubやReddit, Giphyなど、いくつかのWebサービスのAPIをGraphQLでラップしたエンドポイントです。

Reindex

ReindexはGraphQLのBaaS(Backend as a Service)です。

GraphQLのObject Typeを定義したSchemaのJsonファイルをpushするだけで、そのSchemaに対応したGraphQLのエンドポイントが利用可能になります。

また、自分で定義したTypeに対応したConnectionやEdge等が自動で定義されたり、最初からトップレベルのクエリにviewerが用意されている等、Relayフレンドリーです。
もし貴方がGraphQL/Relayのクライアント部分を手軽に作ってみたい、と思っているのであればうってつけのサービスです。

Graph.cool

GRAPHCOOL

Graph.coolもGraphQL/RelayのBaaSです。Reindexは、手元のエディタでSchemaのJSONを編集してpushしますが、Dashboard上でModel定義を編集します。

Tools

graphiql-app

GraphQLの対話コンソール, graphiql(ぐらふぃくる、と発音するようです)をElectronでラップしたアプリ。

複数のクエリを保存しておけるので、特にServer Sideの開発中に便利です。

GraphQL Network

Chromeの開発者ツールにGraphQLの通信内容の詳細が表示されるようになります。

vim-graphql

GraphQLのsyntax highlight用プラギンです。

以前、JSのTemplate Stringsに任意のsyntax highlightを当てるプラギン vim-js-pretty-template を作っているので、Relayのコード中のGraphQLをvimで綺麗に表示できて便利です。

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

勉強する上で注意した方が良いこと

僕はてっきり、「GraphQLに対応したServerを用意すればRelayから接続できるようになる！」と思っていましたが、これには若干の勘違いがありました。

Relayのドキュメントに GraphQL Relay Specification という章があり、ここを読むと詳細が書いてあるのですが、RelayはGraphQLのEndpointに対して、Schemaに幾つかの約束事を強制します。例えば、「1対多のリレーションを表現するときはConnectionというTypeを使うこと」といった具合です。

これはRelayが効率的にMutationやPagingを処理するため必要とされているのですが、GraphQL関連の資料だけを読み込んでいてもこの話は触れられないことが多いです。

もし、RelayからGraphQLを使ってみたい、と考えているのであれば、早めに上記RelayのGuideに目を通しておくことをお勧めします。