Prisma.ioでGraphQLスキーマからTypeScriptの型定義を取り出す

公開日: 2018年5月31日GitHub

追記(2019年1月23日)

以下の記載は、あくまでPrisma.ioを使ったときの設定です。 単純に、graphqlスキーマからTypeScriptの型定義を利用したい場合は

https://graphql-code-generator.com/

を利用したほうがいいと思います。

.graphqlconfig.yamlの設定例

1projects:
2 app:
3 schemaPath: src/schema.graphql
4 extensions:
5 endpoints:
6 default: 'http://localhost:4000'
7 prepare-bundle: src/generated/app.graphql
8 codegen:
9 - generator: prisma-binding
10 language: typescript
11 output:
12 binding: src/generated/app.ts
13 prisma:
14 schemaPath: src/generated/prisma.graphql
15 extensions:
16 prisma: prisma/prisma.yml
17 codegen:
18 - generator: prisma-binding
19 language: typescript
20 output:
21 binding: src/generated/prisma.ts
22

解説

上から順に見ていきます。

prepare-bundleについて

https://github.com/graphql-cli/graphql-cli-prepare

import文を利用している複数の.graphqlファイルを解決して、1つのgraphqlファイルを作成します。 今回は、appで利用している.graphqlファイルからも型を抽出したいので、上記のような設定をしています。

codegenについて

graphql codegenは、.graphqlファイルを使ってflowやtypescriptの型ファイルを生成するコマンドです。 上記yamlファイル内のcodegenは、これのprisma-binding用の設定をしています。

参考:

全体像

イメージ以下のような感じです。

1src/schema.graphql
2
3↓ prepare-bindingでファイルの依存関係を解決
4
5src/generated/app.graphql
6
7↓ graphql codegenで.tsファイルに変換
8
9src/generated/app.ts
10

使い方

リゾルバを書く

以下のような型定義をしてリゾルバで読み込む

1
2// src/utils.ts
3import { Query, Mutation } from "../generated/prisma"
4
5export interface Prisma {
6 query: Query;
7 mutation: Mutation;
8}
9
10export interface Context {
11 db: Prisma;
12 request: { user?: { sub: string } };
13}
14
15// src/resolvers/query.ts
16
17import { Context } from "./utils"
18import { UserCreateInput } from "../generated/app"
19
20export const Query = {
21 sampleQuery: async (_, args : UserCreateInput, context : Context, info) => {
22 ...
23 },
24}
25

これでresolverを書くときにコード補完が効くようになります。

reference: Make TypeScript type definitions from application schema work with Imports from Prisma

https://github.com/graphql-boilerplates/typescript-graphql-server/blob/master/basic/.graphqlconfig.yml

デプロイ時に型ファイルの更新をする

デプロイ時に型ファイルの更新をするためには、 prisma deploy時にgraphql get-schemagraphql prepareをする必要がある。

prismaはデプロイコマンドのフックも用意してくれています。

https://www.prisma.io/docs/reference/service-configuration/prisma.yml/yaml-structure-ufeshusai8#hooks-(optional)

以下設定例です。

1endpoint: ${env:PRISMA_ENDPOINT}
2datamodel: datamodel.graphql
3secret: ${env:PRISMA_JWT_SECRET}
4hooks:
5 post-deploy:
6 - graphql get-schema --project prisma
7 - graphql prepare
8 - graphql codegen
9
This site uses Google Analytics.
source code