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`

https://medium.com/apollo-stack/apollo-8b7215bcab1c#.qtofanms4

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`

https://www.meteor.com/articles/what-is-graphql

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
    }
}

http://graphql.org/

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

Query

Result

(from a app)

(from graphql sever)

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

StarWars API - GraphQL Ver.

http://graphql.org/swapi-graphql/
https://swapi.co/

丁度よい勉強用サンプル

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

https://github.com/apollographql/starwars-server

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

https://medium.com/apollo-stack/query-batching-in-apollo-63acfd859862#.ipsz2g8qg

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

Batching

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

Caching

https://github.com/facebook/dataloader

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