Upgrade to Pro — share decks privately, control downloads, hide ads and more …

そろそろGraphQLの話をしよう

tt
December 20, 2018

 そろそろGraphQLの話をしよう

GraphQL と Apollo のお話

tt

December 20, 2018
Tweet

More Decks by tt

Other Decks in Programming

Transcript

  1. Apollo Engine • 実行状況を監視したり、エラートラッキング、キャッシュの利 用状況の監視などを行うツールとクラウドサービス Apollo Server • GraphQLサーバを構築できるライブラリ Apollo

    Client • フロントエンドでGraphQLをシンプルに扱うためのライブラリ Apollo CLI • 開発時に $ apollo *** でいろいろできるツール
  2. スキーマ定義 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! }
  3. モックサーバ実装 • resolvers がサーバとしての実装の本体 • GetTodo の場合、 type Todo を満たす値もしくは

    Promise<Todo> を返却すれば良い • $ node server.js で対話型のプレイグラウンドでクエリ を実行できる
  4. フロントエンド実装 • create react app —typescript で type safe な環境

    • Apollo client • 一応 lint や code formatter も
  5. Apollo Server の mock 便利 const server = new ApolloServer({

    typeDefs: fs .readFileSync(path.join(!__dirname, "!../schema.graphql")) .toString(), mocks: true, !// resolvers: resolvers, }); ↑スキーマ定義をしておけば、定義した型で適当な値を返してくれる
  6. 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相当を内部でやってくれている
  7. 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サーバから型を生成してくれる
  8. 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の引数まで型推論が効く