Ebisu.rb #23 で 「RubyではじめるGraphQL」というタイトルで発表してきました

ebisurb.connpass.com

今日はこちらに参加してLTをしてきました。
初 Ebisu.rb 参加 🎉

LT では最近勉強している GraphQL の話をしてきました。

speakerdeck.com

この記事では資料には書いてなかったことを少し書こうと思います。

LT の中でもふれましたが Anket は今まで REST API で提供していましたが内向きで使用していたものを GraphQL にリプレイスしました。

例えば下の画像は Anket のダッシュボードですが、「公開 / 非公開」を toggle button ? で切り替えることができます。
buttonは React の コンポーネントになっていてクリックされたら PATCH /question/11111 にリクエストを送って、成功したら表示も切り替えるような動きをしていました。

これが次のようなクエリで更新されるようになりました。

mutation UpdateShared($questionId: ID!, $shared: Boolean) {
  updateQuestion(input: { questionId: $questionId, shared: $shared }) {
    question {
      id
      shared
    }
  }
}

Client 側は Apollo Client を使っています。
Apollo Client を使うとリクエストしてレスポンスをうけとってパースするなどの処理がライブラリ側で行われるので、使う側はクエリが成功した時の処理やリクエスト中の処理、失敗した時の処理を記載していく感じになります。

import gql from "graphql-tag";
import { Query } from "react-apollo";

const GET_DOGS = gql`
  {
    dogs {
      id
      breed
    }
  }
`;

const Dogs = ({ onDogSelected }) => (
  <Query query={GET_DOGS}>
    {({ loading, error, data }) => {
      if (loading) return "Loading...";
      if (error) return `Error! ${error.message}`;

      return (
        <select name="dog" onChange={onDogSelected}>
          {data.dogs.map(dog => (
            <option key={dog.id} value={dog.breed}>
              {dog.breed}
            </option>
          ))}
        </select>
      );
    }}
  </Query>
);

このクエリを見ていただくとわかるようにGraphQL に対するクエリは記載されていますがリクエストしたり、レスポンスうけとって JSON.parse したりしている箇所はありません。
これは Query component が担ってくれています。

最初は少し覚えることがあるので慣れが必要です。
ただ個人的には loading でリクエスト中かどうか返ってきたり refetch 用のメソッドを提供したり必要なものが揃っている感じなので慣れてくると楽しくかけます。

おわりに

今後 Anket は質問を Slack 経由でしか作成できませんがこれを API を通してどこからでも作成できるようにしようと思っています。
それが実現できた時に GprahQL API を外向けに公開しようと思っています。