GraphQLを使ったアプリケーションで、サーバでのデータの変化をクライアントに通知するメカニズムであるsubscriptionsについて概要を述べる

1. データ変更情報を受け取る
subscription
で出来ること
次世代データAPIのGraphQLとJavaScript実装のApollo 勉強会
2017-4-22
福井眞吾

2. ❖ 福井 眞吾（ふくい しんご） ＠SilkAndTiki
❖ コンピュータ＆通信機器メーカー勤務
❖ 昨年、役職定年になり、週休３日制を選択
毎週、金・土・日が休日
❖ IoTを勉強し始めました
❖ ギークオフィス恵比寿メンバー

3. 「すごーい たーのしー」の次へ

4. query データを取得できる
mutation データを変更できる
よし、アプリ作るぞ！

5. query データを取得できる
mutation データを変更できる
よし、アプリ作るぞ！
graphQL
Server
graphQL
Client
graphQL
Client
太郎
？花子
mutation

6. graphQL
Server
graphQL
Client
変化
ここの仕組み

7. live queries
subscriptions
？他にもあるらしい

8. Live queries

9. queryで取得したデータに変更があったら通知してもらえる
live directive
更新される

10. あまり実装が進んでいないかも？
更新情報

11. Subscriptions

12. https://github.com/facebook/graphql/pull/267

13. http://dev.apollodata.com/react/subscriptions.html

14. https://dev-blog.apollodata.com/how-to-use-subscriptions-in-graphiql-1d6ab8dbd74b

15. https://www.graph.cool/blog/2017-02-28-introducing-graphql-subscriptions-in4ohtae4e/

16. Graphcoolでの
Subscriptions

17. https://github.com/graphcool-examples/react-apollo-instagram-subscriptions-example

20. どの変化が起こったか
変化後のデータ
CREATED
UPDATED
DELETED

21. subscription宣言
callback関数
subscribeToMore関数

22. 変化前のデータ

23. 条件の指定
CREATED
UPDATED
DELETED

24. 新規に作成されたPostで
descriptionが”cat”なら通知
参考： graphcoolサーバでは、Strig型の
descriptionに対して下記の条件が
使えるようである

25. graphcoolでのデモ

26. graphQL
Server
graphQL
Client
graphcoolapollo + react+browser
graphcool console

27. Post

28. 受信したデータsubscription定義

29. Server側の実装
挙動
ネットワークコネクションが切れた時
Server側の負荷