# 初期プロジェクトを生成する $ mkdir app $ npm init graphqlgen app # GraphQL サーバーをスタートする $ cd app $ yarn start # API を叩いてみる $ curl -XPOST -H "Content-Type:application/graphql" -d '{ feed { id } }' http://localhost:4000/ {"data":{"feed":[{"id":"3"}]}}%

# インストール $ npm install --save-dev graphql-code-generator graphql # テンプレートから自動生成 $ npm install --save-dev <テンプレート名> $ gql-gen --schema <GraphQLスキーマ> --template <テンプレート名> --out <出力先>

$ npm install --save-dev graphql-codegen-typescript-template $ node_modules/graphql-code-generator/dist/cli.js --schema schema.graphql --template graphql-codegen-typescript-template --out ./typings/ ✔ Generated file written to /Users/tasuku_tozawa/workspace/graphql/graphql-code-generator/typings/types.ts

$ npm install --save-dev graphql-codegen-typescript-resolvers-template $ node_modules/graphql-code-generator/dist/cli.js --schema schema.graphql --template graphql-codegen-typescript-resolvers-template --out ./resolvers/ ✔ Generated file written to /Users/tasuku_tozawa/workspace/graphql/graphql-code-generator/resolvers/resolvers-types.ts

import { QueryResolvers } from './resolvers-types'; import { MyContext } from './context'; export const resolvers: QueryResolvers.Resolvers<MyContext> = { myQuery: (root, args, context) => {} };

$ npm install -g apollo

# 既存の GraphQL サーバに型定義のメタデータを要求する $ apollo schema:download --endpoint=http://localhost:4000 ✔ Loading Apollo config ✔ Fetching current schema ✔ Saving schema to schema.json # サーバに対するクエリ定義の SDL を用意しておくと、そのクエリの型が生成される $ apollo codegen:generate --target=typescript --schema=schema.json --queries="./getUser.graphql" ✔ Loading Apollo config ✔ Scanning for GraphQL queries (1 found) ✔ Generating query files with 'typescript' target - wrote 2 files

$ mkdir sample $ cd sample $ yarn add apollo-client apollo-cache-inmemory graphql graphql-tag node-fetch ts-node typescript $ yarn add -D apollo # スキーマ定義をサーバから DL $ yarn apollo schema:download --endpoint=http://localhost:4000 $ ls $ ls node_modules package.json schema.json yarn.lock # クエリを準備する $ mkdir query $ vim query/getCollection.ts

import gql from "graphql-tag"; export const query = gql` query getCollection { collection(id: 1) { id modified_user } } `

$ yarn apollo codegen:generate --target=typescript --schema=schema.json --tagName=gql --queries="./query/*.ts" yarn run v1.12.1 ✔ Loading Apollo config ✔ Scanning for GraphQL queries (1 found) ✔ Generating query files with 'typescript' target - wrote 1 files ✨ Done in 1.66s. $ tree -I node_modules . ├── __generated__ │   └── globalTypes.ts ├── package.json ├── query │   ├── __generated__ │   │   └── getCollection.ts │   └── getCollection.ts ├── schema.json └── yarn.lock 3 directories, 6 files

import { ApolloClient } from 'apollo-client'; import { HttpLink } from 'apollo-link-http'; import { InMemoryCache } from 'apollo-cache-inmemory'; import fetch from 'node-fetch'; const client = new ApolloClient({ ssrMode: true, link: new HttpLink({ uri: 'http://localhost:4000', fetch, }), cache: new InMemoryCache(), }); // ここはわざわざ事前定義していたクエリから引っ張って来ずとも良い // ここで独自に gql でクエリを定義し、戻り値に getCollection 型をあてはめるだけでも型の恩恵を得られる import { query } from './query/getCollection'; import { getCollection } from './query/__generated__/getCollection'; client .query({ query }) .then(result => { // 戻り値に型をつけることができる const data: getCollection = result.data as getCollection; console.log(data); });

$ node_modules/.bin/ts-node index.ts { collection: { modified_user: 'tasuwo', __typename: 'Collection' } }

GraphQLError: Cannot query field "collection" on type "Query" at Compiler.compileSelection (~/workspace/graphql/apollo-cli2/node_modules/apollo-codegen-core/lib/compiler/index.js:120:27) at selections.selectionSetNode.selections.map.selectionNode (~/workspace/graphql/apollo-cli2/node_modules/apollo-codegen-core/lib/compiler/index.js:106:76) at Array.map (<anonymous>) at Compiler.compileSelectionSet (~/workspace/graphql/apollo-cli2/node_modules/apollo-codegen-core/lib/compiler/index.js:106:18) at Compiler.compileOperation (~/workspace/graphql/apollo-cli2/node_modules/apollo-codegen-core/lib/compiler/index.js:86:32) at Object.compileToIR (~/workspace/graphql/apollo-cli2/node_modules/apollo-codegen-core/lib/compiler/index.js:15:44) at Object.generate [as default] (~/workspace/graphql/apollo-cli2/node_modules/apollo/lib/generate.js:74:36) at Task.task (~/workspace/graphql/apollo-cli2/node_modules/apollo/lib/commands/codegen/generate.js:98:64) at Promise.resolve.then.then.skipped (~/workspace/graphql/apollo-cli2/node_modules/listr/lib/task.js:167:30) at <anonymous> error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

$ yarn remove graphql

npm install graphql join-monster

import { GraphQLSchema } from 'graphql' import { GraphQLObjectType, GraphQLList, GraphQLString, GraphQLInt } from 'graphql' const User = new GraphQLObjectType({ name: 'User', // SQL テーブルの情報を追加 // テーブルを示す SQL クエリでも良い (VIEW や derived table のように振る舞う) slqTable: 'accounts', // ユニークキーの設定 // 実際のデータベースが unique 制約を持っている必要はない // unique の制約を保つことは join-monster は担保しない // 複合キーを指定したい場合は、配列で指定する uniqueKey: 'id', fields: () => ({ id: { type: GraphQLInt // カラム名とフィールド名が一致する場合は、`sqlColumn` は指定の必要がない }, email: { type: GraphQLString, // カラム名とフィールド名が一致しない場合は、明示的に指定する sqlColumn: 'email_address' }, idEncoded: { description: 'The ID base-64 encoded', type: GraphQLString, // 値に resolver を適用する場合、`sqlColumn` は必ず指定する必要がある // 全てのスキーマに resolver を追加するような Optics や graphql-tools といったライブラリ // を利用する場合にも、毎回指定する必要がある sqlColumn: 'id', resolve: user => toBase64(user.idEncoded) }, fullName: { description: 'A user\'s first and last name', type: GraphQLString, // 複数の SQL カラムを組み合わせた Compulted Column を定義できる // 複数の SQL カラムを配列で渡すと、それらが resolver に expose される sqlDeps: [ 'first_name', 'last_name' ], resolve: user => `${user.first_name} ${user.last_name}` // `sqlDeps` と `resolve` を組み合わせなくとも、SQL をベタがきすることもできる // その場合は `sqlExpr` を利用する // table のエイリアスが joinMonster によって自動生成され、渡される // また、context オブジェクトも渡される (https://join-monster.readthedocs.io/en/latest/where/#adding-context) // sqlExpr: table => `${table}.first_name || ' ' || ${table}.last_name` } }) }) import joinMonster from 'join-monster' const QueryRoot = new GraphQLObjectType({ name: 'Query', fields: () => ({ users: { type: new GraphQLList(User), resolve: (parent, args, context, resolveInfo) => { // resolveInfo はスキーマ定義とパースされたクエリが含まれるので、それを第一引数として渡す // 第二引数には context、第三引数には SQL クエリを引数に取り、 "データを返す Promise" を返すコールバック関数を渡す return joinMonster(resolveInfo, {}, sql => { return knex.raw(sql) }) } }, user: { type: User, args: { id: { type: new GraphQLNonNull(GraphQLInt) } }, // Where 条件を追加するには、以下を引数に取る関数を where フィールドに定義する // // usersTable: JoinMonster によって自動生成されるテーブルエイリアス // args: args カラムで指定された値群 // context; コンテキストオブジェクト // // 注意: ここでの返り値がそのまま SQL に埋め込まれるので、ユーザの入力はエスケープすることを忘れないこと // SQL インジェクション等の脆弱性を生む可能性があるので where: (usersTable, args, context) => { return `${usersTable}.id = ${args.id}` }, resolve: (parent, args, context, resolveInfo) => { return joinMonster(resolveInfo, {}, sql => { return knex.raw(sql) }) } } } }) }) export default new GraphQLSchema({ description: 'a test schema', query: QueryRoot })