そろそろGraphQLの話をしよう

GraphQL と Apollo のお話

1. そろそろGraphQLの話をしよう 2018/12/20 Mix Leap Study #30 Webフロントエンド 平成最後の冬の陣 @tatsushitoji
2. Hello mix Leap ! • 田路 竜士 @tatsushitoji • 社内スタートアップおじさん • Frontend Engineer • Functional Programming
3. GraphQLとは？
4. GraphQLとは？ • FacebookによるOSSで、2015年に発表 • 柔軟にデータを取得できるように設計されたAPI用のクエリ言語 • データの形式のみの定義のため言語やデータI/Oの方法に依存しない
5. GraphQLとは？ • FacebookによるOSSで、2015年に発表 • 柔軟にデータを取得できるように設計されたAPI用のクエリ言語 • データの形式のみの定義のため言語やデータI/Oの方法に依存しない 手っ取り早く試すならGitHub GraphQLAPI v4
6. Rest API + Redux user post DB API DB
7. GraphQL + Apollo DB API DB GraphQLサーバ
8. • リクエストエンドポイントの選択 • リクエストの組み立て(パラメータ、ヘッダなど) • 状態管理 フロントエンドで持っていた ロジック
9. • リクエストエンドポイントの選択 • リクエストの組み立て(パラメータ、ヘッダなど) • 状態管理 フロントエンドで持っていた ロジック GraphQL + Apollo(Client) で吸収できる
10. Apollo
11. Apollo Engine • 実行状況を監視したり、エラートラッキング、キャッシュの利 用状況の監視などを行うツールとクラウドサービス Apollo Server • GraphQLサーバを構築できるライブラリ Apollo Client • フロントエンドでGraphQLをシンプルに扱うためのライブラリ Apollo CLI • 開発時に $ apollo *** でいろいろできるツール
12. Apollo Client supports …
13. ベーシックワークフロー 1. スキーマ定義 2. モックサーバ実装 3. フロントエンド実装
14. スキーマ定義 type Todo { id: ID! title: String! completed: Boolean! createdAt: String! } type Query { todo(id: ID!): Todo! todos: [Todo!] } input CreateTodoInput { id: ID! title: String! completed: Boolean! createdAt: String! }
15. モックサーバ実装 • resolvers がサーバとしての実装の本体 • GetTodo の場合、 type Todo を満たす値もしくは Promise<Todo> を返却すれば良い • $ node server.js で対話型のプレイグラウンドでクエリ を実行できる
16. フロントエンド実装 • create react app —typescript で type safe な環境 • Apollo client • 一応 lint や code formatter も
17. 所感
18. Apollo Server の mock 便利 const server = new ApolloServer({ typeDefs: fs .readFileSync(path.join(!__dirname, "!../schema.graphql")) .toString(), mocks: true, !// resolvers: resolvers, }); ↑スキーマ定義をしておけば、定義した型で適当な値を返してくれる
19. Function as child Components <Query query={GET_TODOS} fetchPolicy="cache-and-network"> {({ data, loading, error }) !=> { if (error !|| loading) { return <p>{error ? `Error! ${error}` : 'loading!!...'}!</p>; } if (data) { return data.todos.map((todo: any, index: number) !=> ( <List>{todo.title}!</List> )); } }} !</Query> ↑を実現するためにReduxでのaction, reducer, connect相当を内部でやってくれている
20. Code generator !/* tslint:disable !*/ !// This file was automatically generated and should not be edited. !// ==================================================== !// GraphQL query operation: GetTodos !// ==================================================== export interface GetTodos_todos { id: string; title: string; completed: boolean; createdAt: string; } ↑schemaとGraphQLサーバから型を生成してくれる
21. Function as child Components <Query<GetTodos, {}> query={GET_TODOS} fetchPolicy="cache-and- network"> {({ data, loading, error }) !=> { if (error !|| loading) { return <p>{error ? `Error! ${error}` : 'loading!!...'}!</p>; } if (data !&& data.todos) { return data.todos.map((todo: any, index: number) !=> ( <List key={index}>{todo.title}!</List> )); } }} !</Query> ↑生成された型をGenericsで渡すだけでchildのfunctionの引数まで型推論が効く
22. 年末年始はGraphQL どうですか？