GraphQLで出来ることをより詳しく探る
~そしてApolloとは~

Whois

  • TeYmmt (Teruhisa Yamamoto) or Tell-y
  • A Software Developer
  • Now Working by Node.js+React+Redux

Agenda

  • Apolloとは
  • GraphQLとは
  • まとめ

※発表者は趣味で触ってる?程度です。仕事でつかいたい。。。細かなツッコミで答えられないことが多々あるので識者の方の胸をお借りします。盛大に。

Apolloとは

`Apollo, the data stack for modern apps`

Meteor Development Group

  • MDGとは:Meteorの開発元
  • Meteorとは:JavaScript フレームワーク(Node.js + MongoDB + (Angular or React or Blaze, etc.)、RubyでいうところのRails。https://www.meteor.com/
  • Meteorって人気なの?:えぇ、日本以外で。

Meteor's Data System

  • Publish / Subscribe
  • Obtaining data at local as mini-mongo
  • 感動と驚きを与えてくれる、が、"マジック"
  • 素晴らしい機能を与えてくれるMongodb、だが、依存し他を組み込めない

Apolloの目指すこと

  • 既存のバックエンドで動作するGraphQLレイヤー
  • どんなクライアントにも追加可能であること

Apollodata(Apollo stack)

  • GraphQLをベースにしたデータアーキテクチャを実現するためのツール群
  • Not only for Meteor, for any application framework

GraphQLとは

`GraphQL is an application layer query language`

GraphQL??

Web Application

Android

iOS

Desk top Application

Application Layer

SQL

NoSQL

REST

Data Layer

GraphQL

GraphQLの目的

意訳:開発者(バックエンド・フロントエンドともに)がお互いにハッピーになれるように

エンドポイントを1つにすることで、
バックエンドは、

  • Data sourceとしてのSQL, NoSQL, RESTや開発環境に縛られたAPIを書かなくて良くなる
  • Data sourceが複数ある場合や変更に柔軟に対応できるようになる
  • フロントエンドは、バックエンドの変更に影響を受けること無くクエリーを書くことが出来る

GraphQLのQuery

{
    geek {
        name
        age
    }
}
{
    "geek": [{
        "name" : "teymmt",
        "age" : "unknown"
    }]
}

Query

Result

(from a app)

(from graphql sever)

Shemaを定義したり、Data sourceとの紐付けを定義したりする必要がある

StarWars API - GraphQL Ver.

丁度よい勉強用サンプル

  • 超シンプルな実装
  • 程よくコードを追っかけたい
  • 比較したいから題材はStarWars API

starwars-serverの全体像を把握

  • GraphQLサーバーの立ち上げ方
  • /graphiql ?
  • Schemaの定義、型、ドキュメント
  • 取得(query)
  • データリソースとリゾルバー
  • 編集(mutation)

デモへ

Do you like a lot of ENDPOINTS?

肥大化するエンドポイント、
融通の聞かないバックエンド

  • /hero/5/partner, /episode/4/characters など、もううんざり
  • POST /hero {
      "id": 5,
      "shurui": "partner",
      "action": "add"
    }
    BE dev「すまんな、shuruiじゃなくて、kindで」
    FE dev 「コロコロ変えるなよ・・・」
  • 似たようなエンドポイントの量産はうんざり

Query Batching
Query Caching
By DataLoader

  • データ取得の往復の削減、
    もし複数のクエリーを一度のリクエストでなげるなら、
    DataLoaderを使うことが出来る(バックエンドから一括でデータを受け取れる)

Batching

  • (Backendは)同じクエリーはその都度キャッシュしておいてリクエストを減らしたい
  • クリア、機能オフは任意に可能

Caching

  • バッチしたいリクエストを配列で渡す
  • リクエスト: ['A', 'B', 'C']
    →結果 : [' RES A', null, 'RES C'] (同じ配列長で返る)

Batching

  • デフォルトでON、キャッシュする処理は自分で書く。
  • リクエスト内容が比較されるのでそれによってキャッシュを返すかどうかを決める

Caching

What Clients Can We Use? 

http://dev.apollodata.com/

  • React, React Native
  • Angular
  • iOS (Swift)
  • Android (Java)
  • Vanilla JS

まとめ

  • GraphQLはアプリケーションレイヤーの為のクエリー言語(NoSQL等のたぐいではない)
  • ApolloはGraphQLを用いた、データシステムを構成するツール群
  • Reactivityさも目指している。Meteorと比較して。
  • 一見仕事が増えるだけのように見えるが、開発効率の向上(ドキュメント可視化、テスト、モック)
  • 恐れず導入したい(英語怖くないアルよ)
  • 昨今のめまぐるしい開発スタイルやツールの移り変わりに惑わされたくないながらも、使えるもの、GraphQL

Thank you

GraphQLで出来ること

By Teruhisa Yamamoto

GraphQLで出来ること

  • 154