サイト内検索
Translation here

2017/04/22(土)次世代データAPIのGraphQLとJavaScript実装のApollo 勉強会(終了後に懇親会) 2017年大ブレイクのGraphQLについて勉強しよう #

graphQL.png

長めのLTをいっぱい、というお話でした。
とはいえ、結構レベル高かったです。graphQL(Apollo)の魅力はたくさん伝わりました。

WebAPIデベロッパーの野村屋ごろう(@official_nomura)です。
本日2つめの勉強会は渋谷からおとなり恵比寿のギークオフィスさん。
実はReact.jsの勉強会でお世話になったMeteorFanさん主催です。
しばらく離れていましたが、この度ご縁があって再びお世話になりました。

いつもの

一発書き、無編集です。

本日の議題

対象者

  • GraphQLとはなにか
  • Apolloとはなにか
  • WebAPIの開発で思うところがある
  • フロントエンジニア

勉強会ページ

次世代データAPIのGraphQLとJavaScript実装のApollo 勉強会(終了後に懇親会)2017年大ブレイクのGraphQLについて勉強しよう

イントロダクション

主催さん(@dai_shi氏)のお話
MeteorFanのお話

GraphQLとは

GraphQL | A query language for your API
Facebook製、RESTの問題点を解消するためのもの
Query Language(クエリ仕様)。言語に依存しない。

APOLLOとは

Tools & products for GraphQL | Apollo Data
クライアント指向・サーバー指向で分かれている?
Reactっぽいやつかな。
apollo-serverGraphql-serverとも。

「GraphQLで出来ることをより詳しく探る」@Teymmt

Node-Reactでやっている方

APOLLOとは

  • GraphQLを使うためのツール・スタック
  • Meteorの開発元(MDG)製
  • Meteor:JSのFW/Node+MongoDB+(Angular or React or Blaze...etc)
  • Publish / Subscribe
  • Obtaining data at local as 【mini-mongo】
mongoDBに依存している問題があり、これを解決するものである。

アーキテクト

バックエンド側のデータレイヤー側に対応
SQL/NoSQL/RESTの前段で処理する(QL)

目的

  • エンドポイントを1つに集約してしまおう!
  • フロントエンド側はバックエンドの変更に影響を受けずにクエリーを書ける

使い方

Query
{
  geek {
    name
    age
  }
}

>|?|

JSON
{
  geek {
    name: "request"
    age: "30"
  }
}

queryとJSONでvalueがあるかないかぐらいの差。

**デモ
スターウォーズAPIを叩いてみる
[filter:https://github.com/
[filter:graphql.org/swapi-graphql/]

引数をつけてみる
>|?|
query{
  film(id: "hoge==") {
    title
  }
  allFilms{
    edges{
      ...
    }
  }
}
プログラマブルにやらなくても、欲しい(引数で指定した内容に合致した)データだけ拾って返します。

この辺は直接さわってもらえれば分かるかなと。
デモを記事書きながら手元で実施しながら確認できるぐらい簡単です、ヤバい!
更に勉強したい!
ハンズオンの方がいいんじゃないかと思ったぐらい!
starwars-(server)APIをgithubからcloneすればすぐできる!

値の編集もJSON(扱う変数がenum型)で出来るのはいいですね!
[(filter unkown) dev.apollodata.com]
  • ドキュメント可視化
  • テスト
  • モック
でトータルの開発効率を上げる事ができる!(はず)

「GraphQLチュートリアル」@dai_shi

3/8にハンズオンでやった通り。
そして、上記発表とほとんど同じだということで大分端折ります。

環境構築

Node.js(v6)
npm install -- save express body-parser graphql graphql-tools graphql-server-express

type objectについて

スキーマを設定する前に定義しておくと、GraphQLで呼べる
type objectで設定するプロパティにオブジェクトを設定できる
(別途type objectを作成する)

非常に直感的!

他、ハンズオン形式でどうやって実習しているのか、Vanilla.jsでWebページを作るまで。
Slack見てね!

「データ変更情報を受け取るsubscriptionでできること」@SilkAndTikit

スライドがすごくGhaphQLフレンズだった!
すごーい たのしー

更新!変化情報をclientにpushする

  • live queries
  • subscriptions
  • その他

LiveQuery

query
{
...
  likeCount @live
...
}

SubScriptions

ドキュメントあるよ!
実演
Graphcoolで使ってみる。
Instagram風アプリ

Schema
type Post{
  id: ID!
  imageUrl: String!
  description: String!
}

subscription
subscription {
  Post {
    mutation 【変化。おまじない】
    node { 【変化後のデータ】
      id
      imageUrl
      description
    }
--追加
  previousValues { 【変化前のデータ】
    ...
  }
--
  }
}
Apollo + react(イメージ)
this.subscription = newProps.data.subscribeToMove(){
...
`,
variables: null,
updateQuery: (previousState, {subscriptionData} => {
  const newEntry = subscriptionData.data.Post.node;(おまじない)
  return xxx{
    ...
  }
}

デモ

Graphcool consoleとブラウザを使って同じデータ(最新の状態)を表示させる。

課題

  • サーバー側の実装・負荷
  • ネットワークコネクションが切断された時

「GraphQLとReact」@brn0227

Reactを使った時のGraphQLの話

GraphQLについて

  • フロントエンド主導でAPIの設計が出来る
  • 複雑化していくSPA設計に向いている

Reactである理由(復習)

  • Viewを宣言的に書ける
  • Viewと状態を切り離せる

フレームワーク選定

Relay
Facebook製
npm install react-relay --save
...
  todos:()=>Relay.QL `(query)`
}
あとはReactDOM.renderで描画をしてあげる

問題が!

  • Relay.QLはBABELで作られている。
  • Schema.json
→人間が作るものじゃない(自動生成を前提にしてる)
  • APIが複雑すぎ
  • Documentがないし、Exampleが複雑
  • Babel前提
  • Reduxとも組み合わせにくい
  • relay-modernがあるらしいけど疑問

決定!

react-apolloにします!
npm install react-apollo --save

諸々作ってあげる

  • Client
  • Component
  • graphql(Query)...
→ここで色々便利に渡せる。
  • App
この辺はReactっぽい。
Reduxを合わせるとインターフェース面の問題もあるが、出来なくはない。

設定

  • エンドポイント
  • クライアント
  • サーバーサイドレンダリング(Reactへの要求)

「GraphQL + Vue.js でアプリを作ってみた(仮)」@nobutakaoshiro

元々PHPerさん。
GraphQLとApolloの話はダブるので割愛

Early Access(githubで試せる環境。申請制)

[(filter unkown) https//developer.github.com/early-access]

Vue.js

UI構築のためのprogressiveJavaScriptフレームワーク
HTMLファイルに対してJavaScriptを書くようなイメージ。
サーバー側JavaScriptなどには干渉しない。良さそう!

実例・デモ

vue-apollo(React-apolloのVue.js版)
あとはReact-apolloとだいたい一緒
Ajaxでも出来るよ版
curl -s -XPOST -H 'Content-Type application/json' -d 'query{(GraphQL queries...)}' (EndPoint)
めっちゃ簡単。queryの後にmutationとすると編集もできる。
注意
express-graphqlとApollo:graphql-serverの違いがある。
前者はexpressのみ、後者はConnect,Hapo,Koa等でも使用できる
Chrome拡張機能「Apollo Client Developer Tools」がある

私も入れてみたけど、結構重いみたいですね。

GraphQLを理解するためのコツ

  • エンドポイントは1つ
  • POSTリクエストのみ
    • RESTではない
  • CQRS(コマンドクエリ責務分離)
  • レスポンススピードはqueryの遅いものに引きずられる
    • 早く欲しいものと遅いものを分ける

LT

idobataで学ぶGraphQL(@mtsmfm氏)

  • 西日暮里.rb主催さん
  • Electron
出来ちゃった
Idobata
あとで共有しますね。

hyperapp – 1kbのビューライブラリ

hyperapp – 1kbのビューライブラリ(Qiita)

主催にごあいさつ、すばらし!

LT聞いてみて、これとんでもなくすごい!
これ以上分かりやすくて使いやすいのはない!
今日一日、どころかJS知らない人でも技術者なら1日で300行ぐらい理解できるんじゃないか?
Exampleもあるので使ってみよう。

リフレクション・懇親会準備へ

OK キャンセル 確認 その他