More than 3 years have passed since last update.

graphql-codegenでフロントエンドをGraphQLスキーマファースト

Last updated at 2020-11-16Posted at 2019-12-28

お題

前回、GraphQLを使ったフロントエンド（ライブラリとしてApolloを採用）実装したのだけど、せっかくバックエンド（Goで実装）側がgqlgenというライブラリでスキーマファーストにしているのに、フロントエンド側ではそのスキーマで使う要素に対して自前で型を付けるやり方だった。
せっかくならフロントエンドもスキーマファーストでやりたいので、graphql-codegenを使って、GraphQLスキーマに定義した要素の型を自動生成するようにした。

開発環境

# OS - Linux(Ubuntu)

$ cat /etc/os-release
NAME="Ubuntu"
VERSION="18.04.2 LTS (Bionic Beaver)"

# フロントエンド

Nuxt.js

$ cat yarn.lock | grep "@nuxt/vue-app"
    "@nuxt/vue-app" "2.11.0"
"@nuxt/vue-app@2.11.0":
  resolved "https://registry.yarnpkg.com/@nuxt/vue-app/-/vue-app-2.11.0.tgz#05aa5fd7cc69bcf6a763b89c51df3bd27b58869e"

パッケージマネージャ - Yarn

$ yarn -v
1.19.2

IDE - WebStorm

WebStorm 2019.3
Build #WS-193.5233.80, built on November 25, 2019

実践

今回のソース一式は下記。
https://github.com/sky0621/study-graphql/tree/v0.4.0

導入

以下を参考に。
https://graphql-code-generator.com/docs/getting-started/

$ pwd
/home/sky0621/src/github.com/sky0621/study-graphql/frontend
$
$ ll package.json 
-rw-rw-r-- 1 sky0621 sky0621 906 Dec 22 00:49 package.json
$
$ yarn add graphql
yarn add v1.19.2
　　・
　　・
　　・
Done in 7.70s.
$
$ yarn add -D @graphql-codegen/cli
yarn add v1.19.2
　　・
　　・
　　・
Done in 16.59s.
$
$ yarn add -D @graphql-codegen/typescript
yarn add v1.19.2
　　・
　　・
　　・
Done in 12.19s.
$
$ yarn add -D @graphql-codegen/typescript-operations
yarn add v1.19.2
　　・
　　・
　　・
Done in 8.53s.

コード自動生成はgraphql-codegenというコマンドで行う。
上記コマンドはcodegen.ymlというファイルを設定ファイルとして使用するようなので用意。

$ cat codegen.yml 
overwrite: true
schema: http://localhost:5050/query
generates:
  ./gql-types.d.ts:
    plugins:
      - typescript
      - typescript-operations

schemaという項目にはGraphQLスキーマを参照できるサーバを指定。要するにGraphQLサーバ。
今回はローカルでGoで実装したGraphQLサーバを立てていて、そのポートが5050なのでそこを指定。

あとは、package.jsonにコード自動生成コマンドを登録
yarn addも含めた最終的なpackage.jsonの差分は下記。

$ git diff package.json
diff --git a/frontend/package.json b/frontend/package.json
index b0b174f..6afbdea 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -9,16 +9,21 @@
     "build": "nuxt build",
     "start": "nuxt start",
     "generate": "nuxt generate",
-    "lint": "eslint --ext .js,.vue --ignore-path .gitignore ."
+    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
+    "codegen": "graphql-codegen"
   },
   "dependencies": {
     "@nuxtjs/apollo": "^4.0.0-rc17",
     "@typescript-eslint/parser": "^2.12.0",
+    "graphql": "^14.5.8",
     "nuxt": "^2.0.0",
     "nuxt-property-decorator": "^2.5.0",
     "vue-apollo": "^3.0.2"
   },
   "devDependencies": {
+    "@graphql-codegen/cli": "^1.9.1",
+    "@graphql-codegen/typescript": "^1.9.1",
+    "@graphql-codegen/typescript-operations": "^1.9.1",
     "@nuxt/typescript-build": "^0.5.2",

コード自動生成

あ、npm使ってしまった。

$ npm run codegen

> frontend@1.0.0 codegen /home/sky0621/src/github.com/sky0621/study-graphql/frontend
> graphql-codegen

  ✔ Parse configuration
  ✔ Generate outputs
$
$ ll gql-types.d.ts 
-rw-r--r-- 1 sky0621 sky0621 1.1K Dec 28 23:51 gql-types.d.ts

自動生成コードの中身

[frontend/gql-types.d.ts]

export type Maybe<T> = T | null;
/** All built-in and custom scalars, mapped to their actual values */
export type Scalars = {
  ID: string,
  String: string,
  Boolean: boolean,
  Int: number,
  Float: number,
};

export type Mutation = {
   __typename?: 'Mutation',
  createTodo: Scalars['ID'],
  createUser: Scalars['ID'],
};


export type MutationCreateTodoArgs = {
  input: NewTodo
};


export type MutationCreateUserArgs = {
  input: NewUser
};

export type NewTodo = {
  text: Scalars['String'],
  userId: Scalars['String'],
};

export type NewUser = {
  name: Scalars['String'],
};

export type Query = {
   __typename?: 'Query',
  todos: Array<Todo>,
  todo: Todo,
  users: Array<User>,
  user: User,
};


export type QueryTodoArgs = {
  id: Scalars['ID']
};


export type QueryUserArgs = {
  id: Scalars['ID']
};

export type Todo = {
   __typename?: 'Todo',
  id: Scalars['ID'],
  text: Scalars['String'],
  done: Scalars['Boolean'],
  user: User,
};

export type User = {
   __typename?: 'User',
  id: Scalars['ID'],
  name: Scalars['String'],
  todos: Array<Todo>,
};

生成元であるGraphQLスキーマ自体は下記。

[schema/schema.graphql]

# GraphQL schema example
#
# https://gqlgen.com/getting-started/

type Todo {
  id: ID!
  text: String!
  done: Boolean!
  user: User!
}

type User {
  id: ID!
  name: String!
  todos: [Todo!]!
}

type Query {
  todos: [Todo!]!
  todo(id: ID!): Todo!

  users: [User!]!
  user(id: ID!): User!
}

input NewTodo {
  text: String!
  userId: String!
}

input NewUser {
  name: String!
}

type Mutation {
  createTodo(input: NewTodo!): ID!
  createUser(input: NewUser!): ID!
}

これで、機能追加、変更を行う時には、まず、GraphQLスキーマを修正する。
で、バックエンド側もフロントエンド側も各自動生成コマンドによってスキーマ定義に依存する部分は手動メンテが不要になった。

自動生成コードの適用

前回は同じコンポーネント内に自前で定義していたGraphQLスキーマに適合した型を自動生成したものに変更する。

前回までの分

[frontend/components/TodoCard.vue]

<template>
  <div>
    <v-row>
      <v-col cols="12" sm="6" offset-sm="3">
        <v-card>
          <v-list two-line subheader>
            <v-list-item v-for="todo in todos" :key="todo.id" link>
              <v-list-item-avatar>
                <v-icon>mdi-gift-outline</v-icon>
              </v-list-item-avatar>
              <v-list-item-content>
                <v-list-item-title>{{ todo.text }}</v-list-item-title>
                <v-list-item-subtitle>{{ todo.done }}</v-list-item-subtitle>
              </v-list-item-content>
              <v-list-item-content>
                <v-list-item-title>
                  {{ todo.user.name }}
                </v-list-item-title>
              </v-list-item-content>
            </v-list-item>
          </v-list>
        </v-card>
      </v-col>
    </v-row>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'nuxt-property-decorator'
import 'vue-apollo'
import todos from '~/apollo/queries/todos.gql'

// 自前で定義
interface User {
  id: String
  name: String
}

// 自前で定義
interface Todo {
  id: String
  text: String
  done: Boolean
  user: User
}

@Component({
  apollo: {
    todos: {
      prefetch: true,
      query: todos
    }
  }
})
export default class TodoCard extends Vue {
  todos: Todo[] = []
}
</script>

今回の修正後