prisma + nexus + graphql-codegen + typescript で コードを自動生成して爆速開発（型情報おまけ付き）。 Prism + nexus + graphql-codegen + typescript to automatically generate a code for explosive development (with type information bonus)

https://rk-tech.hatenablog.jp/entry/2019/11/15/230644
シェアしました。

2019-11-15

はじめに

https://www.prisma.io/

prisma は 従来の ORM を置き換える graphql 形式の ORM で prisma 独自のスキーマを定義することにより RDBのスキーマと graphql 形式のタイプセーフな ORM api が自動生成されます。

フロントエンドの身としてはバックエンドは出来るだけ意識せずにプロダクトを作っていきたいと考えています。

今回はこの prisma 本体と nexus, nexus-prisma, graphql-codegen などの周辺のライブラリを利用して

「バックエンド -> graphql api -> フロントエンド まで完全にタイプセーフなコードを自動生成して爆速開発する環境」

を作ってみました。

ゴールは prisma スキーマを定義し、コマンド１つ投入するだけでコードが自動生成されるようにします。

前提事項

grqphql の知識がある方向けに書いています。

ソースコード

https://github.com/rk-tech0000/prisma-practice

prisma のバージョンについて

prisma は 1系と2系があり、1系は docker 上で動くことが前提のプロダクトになります。
2系はスタンドアローンに利用できるようですが、2019.11現在まだ preview 版です。
ここでは 1系を使います。

事前準備

prisma 実行クライアントの導入

まず prisma の各サービスを実行するための prisma cli を導入します。

$ npm install -g prisma

$ prisma -v
Prisma CLI version: prisma/1.34.8 (darwin-x64) node-v10.16.3

導入できました。

docker のインストール

prisma サーバを稼動させるため docker をイントールします。具体的な導入方法はここでは割愛します。

prisma ORM サーバ構築

公式の Get Started の記事を元に環境構築を行います。

docker-compose.yml の作成

prisma server と データベース(MySQL/PostgreSQL,MongoDB対応)環境を定義します。

以下は PostgreSQL の例です。

version: '3'
services:
  prisma:
    image: prismagraphql/prisma:1.34
    restart: always
    ports:
      - '4466:4466'
    environment:
      PRISMA_CONFIG: |
        port: 4466
        databases:
          default:
            connector: postgres
            host: postgres
            port: 5432
            user: prisma
            password: prisma
  postgres:
    image: postgres:10.3
    restart: always
    environment:
      POSTGRES_USER: prisma
      POSTGRES_PASSWORD: prisma
    volumes:
      - postgres:/var/lib/postgresql/data
volumes:
  postgres: ~

prisma server の起動

docker を起動します。

$ docker-compose up -d

http:localhost:4466 にアクセスすると prisma の playground 画面が見れるようになります。
簡単。api は未定義なので空っぽの状態です。

prisma cli で初期化を行います。

$ prisma init --endpoint http://localhost:4466
Created 2 new files:                                                                          

  prisma.yml           Prisma service definition
  datamodel.prisma    GraphQL SDL-based datamodel (foundation for database)

2ファイル作成されます。

• prisma.yml
  prisma の設定ファイルです。後でここに設定を追加していきます。
• datamodel.prisma
  prisma 独自のデータモデル定義ファイルになります。一番大事なやつです。
  中身を見ると User モデルが定義されています。

この状態ではまだデータベーススキーマは定義されていません。次のコマンドで行います。

$ prisma deploy
Creating stage default for service default ✔
Deploying service `default` to stage `default` to server `local` 575ms

Changes:

  User (Type)
  + Created type `User`
  + Created field `id` of type `ID!`
  + Created field `name` of type `String!`

Applying changes 1.1s

Your Prisma endpoint is live:

  HTTP:  http://localhost:4466
  WS:    ws://localhost:4466

You can view & edit your data here:

  Prisma Admin: http://localhost:4466/_admin

再度 http://localhost:4466 にアクセスします。 画面右端のタブの「DOCS」を開くと、graphql api が定義されているのが分かります。
おぉ、crud 処理が一通り出来上がっている！いい感じですね。

さらに prisma はもう一つcrud 操作が行える管理画面が用意されます。 http://localhost:4466/_admin 簡単な操作ならここで出来ます。

prisma client(ORM api) の作成

prisma は datamodel.prisma で定義された内容に従った ORM api の generate 機能を有しており prisma cli でコードを自動生成できます。
prisma init で生成された prisma.yml 設定ファイルに以下を追記します。

generate:
  - generator: typescript-client
    output: ./generated/prisma-client/

生成コマンドを実行します。

$ prisma generate
Generating schema 17ms
Saving Prisma Client (TypeScript) at /path/to/project/prisma-practice/generated/prisma-client/

output で指定した場所に２ファイル作成されます。

• index.ts
  ORM api ファイルです。prisma client として生成されますが prisma はあくまで ORM なので、 これはブラウザで実行するものではなく、バックエンドサーバ上で実行する ORM api の位置付けのものです。
• prisma-schema.ts
  graphql のスキーマ定義 dump です。

Graphql バックエンドサーバの構築

ここでエコシステムライブラリの nexus, nexus-prisma を利用して、バックエンドの graphql サーバ を超絶楽に実装していきます。

エコシステムライブラリ

https://nexus.js.org/
まず nexus の役割はソースコードでバックエンドサーバの graqphql タイプを定義するためのものです。 これを利用するとスキーマ定義だけでなく、合わせて TypeScript の型定義ファイルが自動生成されます。 nexus を単体で使う場合は、スキーマ定義のためのソースコードを自身で書く必要がありますが nexus-prisma ライブラリを利用することにより、その手間を軽減できます。

prisma の公式ページの nexus, nexus-prisma を使ったバックエンドサーバの構築手順を参考にやっていきます。

バックエンドサーバに必要なライブラリをインストールします。

npm init
npm install --save graphql-yoga nexus graphql nexus-prisma
npm install --save-dev ts-node-dev

nexus 向けのスキーマソースコードをnexus-prisma-generateコマンドで自動生成します。
生成元になるデータは prisma generate で生成された./generated/prisma-clientです。
prisma.ymlには prisma deploy コマンドのhooksプロパティがあるので、生成コマンドを一連の処理にしていきます。

hooks:
  post-deploy:
    - prisma generate
    - npx nexus-prisma-generate --client ./generated/prisma-client --output ./generated/nexus-prisma

この hooks 設定を行うことで処理の流れは以下のようになります。
datamodel.prisma ->
(prisma deploy) ->
(prisma generate) ->
./generated/prisma-client ->
(nexus-prisma-generate) ->
./generated/nexus-prisma

やってみます。

$ prisma deploy
Deploying service `default` to stage `default` to server `local` 139ms
Service is already up to date.

post-deploy:

Generating schema... 14ms
Saving Prisma Client (TypeScript) at /path/to/project/prisma-practice/generated/prisma-client/

Running prisma generate ✔
Running npx nexus-prisma-generate --client ./generated/prisma-client --output ./generated/nexus-prisma...
Types generated at ./generated/nexus-prisma
Running npx nexus-prisma-generate --client ./generated/prisma-client --output ./generated/nexus-prisma ✔

生成されたコードを使ってバックエンドサーバのスキーマを設定します。schema.ts

import * as path from 'path'
import { prismaObjectType, makePrismaSchema } from 'nexus-prisma'
import datamodelInfo from './generated/nexus-prisma'
import { prisma } from './generated/prisma-client'

const Query = prismaObjectType({
  name: 'Query',
  definition (t) {
    t.prismaFields(['*'])
  },
})

const Mutation = prismaObjectType({
  name: 'Mutation',
  definition (t) {
    t.prismaFields(['*'])
  },
})

const schema = makePrismaSchema({
  types: [Query, Mutation],

  prisma: {
    datamodelInfo,
    client: prisma,
  },

  outputs: {
    schema: path.join(__dirname, './generated/schema.graphql'),
    typegen: path.join(__dirname, './generated/nexus.ts'),
  },
})

export default schema

ポイントはこの部分です。

t.prismaFields(['*'])

prisma deploy で生成した ORM api は全ての CRUD 処理が実装されています。
実際の grqphql サーバを作るときはユーザ権限等を考慮して公開する api を制限したりすると思いますが、この prismaFields の引数に 公開したいものだけを指定することでその制限を行う仕組みになっています。

上の例では*になっているので全て公開するという意味になります。

公開設定の具体例については、公式の以下を参考にしてください。 https://www.prisma.io/docs/1.28/get-started/03-build-graphql-servers-with-prisma-TYPESCRIPT-t201/#implement-graphql-api-based-on-crud-building-blocks

最後に graphql サーバの起動スクリプトを用意します。index.ts

import { GraphQLServer } from 'graphql-yoga'
import { prisma } from './generated/prisma-client'
import schema from './schema'

const server = new GraphQLServer({
  schema, // １つ手前で作った schema.ts を食わせる
  context: { prisma }, // prisma orm api にアクセスするために context に追加
})
server.start(() => console.log('Server is running on http://localhost:4000'))

package.json に 開発サーバ起動スクリプト(dev)を追加し、サーバを起動します。

{
  "scripts": {
    ...
    "dev": "ts-node-dev --no-notify --respawn --transpileOnly ./index.ts"
  },
}

$ npm run dev
> prisma-practice@1.0.0 dev /path/to/project/prisma-practice
> ts-node-dev --no-notify --respawn --transpileOnly ./

Using ts-node version 7.0.1, typescript version 3.7.2
Server is running on http://localhost:4000

http://localhost:4000 にアクセスすると playground が表示され、 user crud が利用できるようになっているはずです。
ここまでで、ほぼソースコードを書かずに graphql api が構築できました。

Graphql クライアントの実装

残りはクライアント側です。graphql-codegenライブラリを使って クライアントコードを自動生成します。

ジェネレータの設定

https://graphql-code-generator.com/ https://graphql-code-generator.com/docs/getting-started/

$ npm install --save @graphql-codegen/cli

$ graphql-codegen init

対話形式で進めるとコード生成設定ファイル(codege.yml)が出力されます。

? What type of application are you building
今回は framework は利用しないので、Application built with other framework or vanilla JS を選択します。

? Where is your schema?
生成元になるスキーマファイルを選択します。
schema.ts内の outputs.schemaで指定されている./generated/schema.graphqlを指定します。

? Where are your operations and fragments?
graphql query ファイルを配置するディレクトリを指定します。client/gql/**/*.graphql

? Pick plugins: graphql-codegen 周辺のプラグインライブラリを一緒に導入します。
typescript 関連を選択します。

? Where to write the output:
生成先を指定します。 client/generated/graphql.ts

? Do you want to generate an introspection file?
Yes

? How to name the config file
デフォルトの codegen.ymlでOKです。

? What script in package.json should run the codegen?
コード生成を行う npm スクリプト名を指定します。ここではgql:genとします。

overwrite: true
schema: "generated/schema.graphql"
documents: "client/gql/**/*.graphql"
generates:
  client/generated/graphql.d.ts:
    plugins:
      - typescript
      - typescript-operations
      - typescript-document-nodes
      - fragment-matcher

関連する plugin library が package.json に追加されるので、インストールします。

$ npm install

初期化時に設定したコード生成 script を実行します。

$ npm run gql:gen
> prisma-practice@1.0.0 gql:gen /path/to/project/prisma-practice
> graphql-codegen --config codegen.yml

  ✔ Parse configuration
  ✔ Generate outputs

サンプルクライアントコードの実装

apollo 関連ライブラリをインストールします

$ npm install apollo-boost graphql-tag node-fetch --save

生成したコードを利用するサンプルクライアントを実装します。client/sample.ts
（かなり雑です）

import { createHttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'
import ApolloClient from 'apollo-client'

import fetch from 'node-fetch';
import gql from 'graphql-tag'

import { User } from './generated/graphql'

const client = new ApolloClient({
  link: createHttpLink({
    uri: 'http://localhost:4000',
    fetch: fetch,
  }),
  cache: new InMemoryCache(),
})

client.query({
  query: gql`
    query {
      users {
        id
        name
      }
    }
  `,
})
.then(result => {
  const { users } : { users: User[] } = result.data

  users.forEach(user => {
    console.log('user.id:', user.id)
    console.log('user.name:', user.name)
  })
})
.catch(error => console.error(error));

生成された型情報を利用します。 型補完が効いていることが確認できると思います。

import { User } from './generated/graphql'

...
const { users } : { users: User[] } = result.data

users.forEach(user => {
console.log('user.id:', user.id)
console.log('user.name:', user.name)
})

ここまでの操作を一連の処理にするためクライアントの自動生成処理を prisma hooks に追加します。

hooks:
  post-deploy:
    - prisma generate
    - npx nexus-prisma-generate --client ./generated/prisma-client --output ./generated/nexus-prisma
    # 以下を追加
    - ts-node schema.ts
    - yarn gql:gen

これで準備が整いました。

prisma schema 駆動の味見

user モデルに 年齢(age)を追加することにします。

1.datamodel.prismaの User type に追加します。

type User {
  id: ID! @id
  name: String!
  # 追加
  age: Int
}

2.マイグレーションを実行します。

$ prisma deploy
Deploying service `default` to stage `default` to server `local` 148ms

Changes:

  User (Type)
  + Created field `age` of type `Int`

Applying changes 1.1s

post-deploy:

Generating schema... 13ms
Saving Prisma Client (TypeScript) at /path/to/project/prisma-practice/generated/prisma-client/

Running prisma generate ✔
npx: installed 91 in 4.959s

Running npx nexus-prisma-generate --client ./generated/prisma-client --output ./generated/nexus-prisma...
Types generated at ./generated/nexus-prisma
Running npx nexus-prisma-generate --client ./generated/prisma-client --output ./generated/nexus-prisma ✔
Running ts-node schema.ts ✔
yarn run v1.17.3
$ graphql-codegen --config codegen.yml
[22:04:19] Parse configuration [started]
[22:04:19] Parse configuration [completed]
[22:04:19] Generate outputs [started]
[22:04:19] Generate client/generated/graphql.d.ts [started]
[22:04:19] Generate ./graphql.schema.json [started]
[22:04:19] Load GraphQL schemas [started]
[22:04:19] Load GraphQL schemas [started]
[22:04:19] Load GraphQL schemas [completed]
[22:04:19] Load GraphQL schemas [completed]
[22:04:19] Load GraphQL documents [started]
[22:04:19] Load GraphQL documents [started]
[22:04:19] Load GraphQL documents [completed]
[22:04:19] Load GraphQL documents [completed]
[22:04:19] Generate [started]
[22:04:19] Generate [started]
[22:04:19] Generate [completed]
[22:04:19] Generate [completed]
[22:04:19] Generate client/generated/graphql.d.ts [completed]
[22:04:19] Generate ./graphql.schema.json [completed]
[22:04:19] Generate outputs [completed]
Done in 0.70s.

Running yarn gql:gen ✔
Warning: The `prisma generate` command was executed twice. Since Prisma 1.31, the Prisma client is generated automatically after running `prisma deploy`. It is not necessary to generate it via a `post-deploy` hook any more, you can therefore remove the hook if you do not need it otherwise.
Generating schema 17ms
Saving Prisma Client (TypeScript) at /path/to/project/prisma-practice/generated/prisma-client/

Your Prisma endpoint is live:

  HTTP:  http://localhost:4466
  WS:    ws://localhost:4466

You can view & edit your data here:

  Prisma Admin: http://localhost:4466/_admin

2オペで database, orm, graphql api, client api 全てに age に関するコードが自動で追加されます。

所感

これまで自前で graphql api をゴリゴリ書いていた自分としてはめちゃくちゃ楽なので気に入りました。
個人開発やちょっとしたものを作るのにはぴったりな気がします。

github の star 数は 16.1k(2019.11現在)でまだ少し足りず、日本の記事も少ないため微妙な存在と言えると思います。 また、prisma との比較対象に hasra というものがあるようです。
firebase との比較ですが、「graphql大好き」「nosql が馴染めない」「やっぱり型が欲しい」って感じの人には良いと思います。
ただし、prisma 1系は docker が前提なので、サーバレスでは作れないという点とマイグレーション機能が弱いなーという感じがします。
ここら辺は prisma 2系で改善されていくんでしょうか。

個人的には認証周りは firebase、ビジネスロジックは prisma って感じで使おうと思っています。

rk-tech

Automatically generate code with prisma + nexus + graphql-codegen + typescript and develop explosive speed (with bonus of type information). Prism + nexus + graphql-codegen + typescript to automatically generate a code for explosive development (with type information bonus)

https://rk-tech.hatenablog.jp/entry/2019/11/15/230644 We
shared.

2019 - 11 - 15

Introduction

https://www.prisma.io/

prisma  is a graphql-type ORM that replaces the conventional ORM.  By defining a prisma-  specific schema ,  RDB 's schema and graphql-type type-safe ORM  api  are automatically generated.

As for the front end, I want to make a product with as little awareness as possible for the back end.

This time, this  prisma  body and  Nexus ,  Nexus - prisma , Graphql- Codegen  using the periphery of the library, such as

"Backend -> graphql  api  -> Front-end environment that automatically generates type-safe code and develops explosively"

I tried to make.

The goal defines the  prisma  schema so that code can be automatically generated by entering a single command.

Assumptions

It is written for those who have knowledge of grqphql.

Source code

https://github.com/rk-tech0000/prisma-practice

 About prisma version

There  are 1 system and 2 system in prisma , and 1 system is a product that is supposed to run on docker.
It seems that the 2 series can be used as a standalone , but as of November 11, 2019 it is still a  preview  version.
Here, we use the 1st system.

Advance preparation

 Introduction of prisma execution client

First  prisma  for executing the service of  prisma  Cli  introduces.

$ npm install -g prisma

$ prisma -v
Prisma CLI version: prisma/1.34.8 (darwin-x64) node-v10.16.3

I was able to introduce it.

docker installation

 Install docker to run the prisma server. The specific introduction method is omitted here.

prisma  ORM server construction

 We will build the environment based on the official  Get Started article.

Creating docker-compose.yml

Define the prisma  server and database (for MySQL / PostgreSQL , MongoDB) environment.

The following is a  PostgreSQL  example.

version :  '3' 
services : 
  prisma : 
    image : prism agraphql/prisma:1.34
     restart : always
     ports : 
      - '4466:4466' 
    environment : 
      PRISMA_CONFIG : |
         port :  4466 
        databases : 
          default : 
            connector : postgres
             host : postgres
             port :  5432 
            user : prisma
             password : prisma
  postgres : 
    image : postgres:10.3
     restart : always
     environment : 
      POSTGRES_USER : prisma
       POSTGRES_PASSWORD : prisma
     volumes : 
      - postgres :/var/lib/postgresql/data
 volumes : 
  postgres :  ~

 Start prisma server

Start docker.

$ docker-compose up -d

 You can see the playground screen of prisma by accessing http: localhost :4466  . Simple. The api  is undefined, so it is empty.

  Initialize with prisma cli .

$ prisma init --endpoint http://localhost:4466
Created 2 new files:                                                                          

  prisma.yml Prisma service definition
  datamodel.prisma GraphQL SDL-based datamodel (foundation for database)

Two files will be created.

• prisma .yml  A configuration file for
  prisma . We will add settings here later.
• datamodel. prisma This is  a data model definition file unique to
  prisma . The most important one.
  Looking inside, the User model is defined.

In this state, the database schema has not been defined yet . Use the following command.

$ prisma deploy
Creating stage default for service default ✔
Deploying service `default` to stage `default` to server `local` 575ms

Changes:

  User (Type)
  + Created type `User`
  + Created field `id` of type `ID!`
  + Created field `name` of type `String!`

Applying changes 1.1s

Your Prisma endpoint is live:

  HTTP: http://localhost:4466
  WS: ws://localhost:4466

You can view & edit your data here:

  Prisma Admin: http://localhost:4466/_admin

 Access http://localhost:4466 again  . If you open "DOCS" in the tab on the right side of the screen,  you can see that graphql  api is defined.
Oh, the crud  process is complete! it is a good feeling.

Furthermore, for  prisma  , another  management screen that allows you to perform crud operations will be prepared. http://localhost:4466/_admin  Simple operations can be done here.

Create prisma  client(ORM  api )

prisma  has  the ORM api  generate function  according to the contents defined in datamodel. prisma ,   and the code can be automatically generated by prisma cli . Add the following to  the prisma .yml configuration file generated by prisma init  . 

generate : 
  - generator : typescript-client output : ./ generated/ prisma -client
     /

Run the generate command.

$ prisma generate
Generating schema 17ms
Saving Prisma Client (TypeScript) at /path/to/project/prisma-practice/generated/prisma-client/

Two files will be created in the location specified by output.

• index.ts
  ORM  api  file. It  is generated as a prisma client, but since the  prisma  is an ORM, this is not the one executed by the browser, but  the positioning of the ORM api executed on the backend server  .
• prisma -schema.ts Schema definition dump for
  graphql .

Build Graphql backend server

Here, using the ecosystem libraries  nexus and  nexus - prisma,  we will implement the backend graphql server in a super easy way.

Ecosystem library

https://nexus.js.org/
First of all,   the role of nexus is to define the graqphql type of backend server in the source code . By using this , not only the schema definition but also the TypeScript type definition file is automatically generated. When  using nexus alone, you need to write the source code for the schema definition by yourself, but you   can reduce the trouble by using the nexus - prisma library.

prisma  of the official page of the  Nexus ,  Nexus - prisma  of the back-end server using the procedure build the will to do as a reference.

Install the required libraries on the backend server.

npm init
npm install --save graphql-yoga nexus graphql nexus-prisma
npm install --save-dev ts-node-dev

nexus  for the schema source code to nexus-prisma-generateautomatically generated by the command.
The source data is   generated by prisma generate ./generated/prisma-client.
prisma.ymlSince has  the property of the  prisma deploy command hooks, the generation command will be processed in a series.

hooks : 
  post-deploy : 
    -- prisma generate
     - npx nexus-prisma-generate --client ./generated/prisma-client --output ./generated/nexus-prisma

By setting this hooks, the processing flow is as follows.
datamodel.prisma ->
( prisma  deploy) ->
( prisma  generate) ->
./generated/prisma-client ->
( nexus - prisma -generate) ->
./generated/nexus-prisma

I'll try.

$ prisma deploy
Deploying service `default` to stage `default` to server `local` 139ms
Service is already up to date.

post-deploy:

Generating schema...14ms
Saving Prisma Client (TypeScript) at /path/to/project/prisma-practice/generated/prisma-client/

Running prisma generate ✔
Running npx nexus-prisma-generate --client ./generated/prisma-client --output ./generated/nexus-prisma...
Types generated at ./generated/nexus-prisma
Running npx nexus-prisma-generate --client ./generated/prisma-client --output ./generated/nexus-prisma ✔

Use the generated code to set the backend server schema .schema.ts

import * the as path from  'path' 
import  { PrismaObjectType , MakePrismaSchema }  from  'nexus-prisma' 
import DatamodelInfo from  './Generated/nexus-prisma' 
import  { prisma }  from  './Generated/prisma-client'

const Query = prismaObjectType ( { 
  name: 'Query' , 
  definition ( t )  ( 
    t.prismaFields ( [ '*' ] ) 
  } , 
} )

const Mutation = prismaObjectType ( { 
  name: 'Mutation' , 
  definition ( t )  { 
    t.prismaFields ( [ '*' ] ) 
  } , 
} )

const schema = makePrismaSchema ( { 
  types: [ Query , Mutation ] ,

  prisma: { 
    datamodelInfo , 
    client: prisma , 
  } ,

  outputs: ( 
    schema: path.join ( __dirname ,  './generated/schema.graphql' ), 
    typegen: path.join ( __dirname ,  './generated/nexus.ts' ), 
  } , 
} )

export  default schema

The point is this part.

t.prismaFields(['*'])

The  ORM api generated by prisma deploy   implements  all  CRUD processing.
When creating an actual grqphql server,  I think that we will limit the api to be published considering user authority etc.,  but this is a mechanism that limits it by specifying only what you want to publish in this argument of prismaFields ..

In the above example, *it means that all are made public.

For specific examples of public settings, please refer to the following officially. https://www.prisma.io/docs/1.28/get-started/03-build-graphql-servers-with-prisma-TYPESCRIPT-t201/#implement-graphql-api-based-on-crud-building-blocks

Finally, prepare a graphql server startup script .index.ts

import  { GraphQLServer }  from  'Graphql-yoga' 
import  { prisma }  from  './Generated/prisma-client' 
import schema from  './Schema'

const server =  new new GraphQLServer ( { 
  schema ,  Kuwaseru the schema.ts made from // one front 
  context: { prisma } ,  // prisma orm api add context to access 
} ) 
Server.Start (()  => console.log ( 'Server is running on http://localhost:4000' ))

Add the  development server start script (dev) to package. json and start the server.

{ 
  " scripts ": {
    ...
    " dev ": " ts-node-dev --no-notify --respawn --transpileOnly ./index.ts "
   } , 
}

$ npm run dev
> prisma-practice@1.0.0 dev /path/to/project/prisma-practice
> ts-node-dev --no-notify --respawn --transpileOnly ./

Using ts-node version 7.0.1, typescript version 3.7.2
Server is running on http://localhost:4000

When  you access http://localhost:4000 , you should see the playground and the user  crud  should be available.
Up to this point, graphql api  has been built with  almost no source code .

Graphql client implementation

The rest is on the client side. graphql-codegenAutomatically generate client code using the library.

Generator settings

https://graphql-code-generator.com/  https://graphql-code-generator.com/docs/getting-started/

$ npm install --save @graphql-codegen/cli

$ graphql-codegen init

If you proceed interactively, the code generation setting file ( codege.yml) will be output.

? What type of application are you building We
will not use framework at this time, so Application built with other framework or vanilla JS select.

? Where is your schema? Select the schema file to
generate from. Inside of  which is specified in the Specify the.
schema.tsoutputs.schema./generated/schema.graphql

? Where are your operations and fragments?
Placing a graphql query file directory to specify the directory.client/gql/**/*.graphql

? Pick plugins: Introduce  the plugin library around graphql- codegen together. Select typescript related.

? Where to write the output:
Specify the generation destination. client/generated/graphql.ts

? Do you want to generate an introspection file?
Yes

? How to name the config file
default of  codegen.ymlis OK.

? What script in package. json  should run the  codegen ? Specify the name of the
npm script that will generate the code  . Let's say here gql:gen.

overwrite :  true 
schema :  "generated/schema.graphql" 
documents :  "client/gql/**/*.graphql" 
generates : 
  client/generated/graphql.d.ts : 
    plugins : 
      - typescript
       - typescript-operations
       - typescript-document -nodes
       - fragment-matcher

The relevant plugin library will  be added to package.json , so install it.

$ npm install

Executes the code generation script set at initialization.

$ npm run gql:gen
> prisma-practice@1.0.0 gql:gen /path/to/project/prisma-practice
> graphql-codegen --config codegen.yml

  ✔ Parse configuration
  ✔ Generate outputs

Implementation of sample client code

 Install apollo related library

$ npm install apollo-boost graphql-tag node-fetch --save

Implement the sample client that uses the generated code. client/sample.ts
(Quite rough)

import  { CreateHttpLink }  from  'apollo-link-http' 
import  { InMemoryCache }  from  'apollo-cache-inmemory' 
import ApolloClient from  'apollo-client'

Import Fetch From  'Node-Fetch' ; 
Import Gql From  'Graphql-Tag'

import  { User }  from  './generated/graphql'

const client =  new new ApolloClient ( { 
  link: CreateHttpLink ( { 
    uri: 'http: // localhost: 4000' , 
    fetch: fetch , 
  } ), 
  cache: new new InMemoryCache (), 
} )

client.query ( { 
  query: gql ` 
    query { 
      users { 
        id 
        name 
      } 
    } 
  ` , 
} ) 
.then ( result =>  { 
  const  { users } : { users: User []  }  = result.data

  Users.ForEach ( user =>  { 
    console.log ( 'user.id:' , . user id ) 
    console.log ( 'user.name:' , user.name ) 
  } ) 
} ) 
. catch ( error => console. error ( error ));

Use the generated type information. You can see that type completion works.

import  { User }  from  './generated/graphql'

...
const  { users } : { users: User []  }  = result.data

users.forEach ( user =>  ( 
console.log ( 'user.id:' , user. id ) 
console.log ( 'user.name:' , user.name ) 
} )

To make the above operations into a series of processes  , add the client auto-generation process to  prisma hooks.

Hooks : 
  Post-Deploy : 
    - Prisma Generate
     - Npx Nexus-Prisma-Generate --Client ./Generated/prisma-client --Output ./Generated/nexus-prisma
    # add the following 
    - Ts-Node Schema.Ts
     - Yarn Gql :gen

Now you are ready.

prisma  schema driven tasting

ageWe decide to add an age ( ) to the user model .

datamodel.prismaAdd it to the User type of 1 .

type User {
  id: ID! @id
  name: String!
  # add to
  age: Int
}

2. Perform the migration .

$ prisma deploy
Deploying service `default` to stage `default` to server `local` 148ms

Changes:

  User (Type)
  + Created field `age` of type `Int`

Applying changes 1.1s

post-deploy:

Generating schema...13ms
Saving Prisma Client (TypeScript) at /path/to/project/prisma-practice/generated/prisma-client/

Running prisma generate ✔
npx: installed 91 in 4.959s

Running npx nexus-prisma-generate --client ./generated/prisma-client --output ./generated/nexus-prisma...
Types generated at ./generated/nexus-prisma
Running npx nexus-prisma-generate --client ./generated/prisma-client --output ./generated/nexus-prisma ✔
Running ts-node schema.ts ✔
yarn run v1.17.3
$ graphql-codegen --config codegen.yml
[22:04:19] Parse configuration [started]
[22:04:19] Parse configuration [completed]
[22:04:19] Generate outputs [started]
[22:04:19] Generate client/generated/graphql.d.ts [started]
[22:04:19] Generate ./graphql.schema.json [started]
[22:04:19] Load GraphQL schemas [started]
[22:04:19] Load GraphQL schemas [started]
[22:04:19] Load GraphQL schemas [completed]
[22:04:19] Load GraphQL schemas [completed]
[22:04:19] Load GraphQL documents [started]
[22:04:19] Load GraphQL documents [started]
[22:04:19] Load GraphQL documents [completed]
[22:04:19] Load GraphQL documents [completed]
[22:04:19] Generate [started]
[22:04:19] Generate [started]
[22:04:19] Generate [completed]
[22:04:19] Generate [completed]
[22:04:19] Generate client/generated/graphql.d.ts [completed]
[22:04:19] Generate ./graphql.schema.json [completed]
[22:04:19] Generate outputs [completed]
Done in 0.70s.

Running yarn gql:gen ✔
Warning: The `prisma generate` command was executed twice. Since Prisma 1.31, the Prisma client is generated automatically after running `prisma deploy`. It is not necessary to generate it via a `post-deploy` hook any more, you can therefore remove the hook if you do not need it otherwise.
Generating schema 17ms
Saving Prisma Client (TypeScript) at /path/to/project/prisma-practice/generated/prisma-client/

Your Prisma endpoint is live:

  HTTP: http://localhost:4466
  WS: ws://localhost:4466

You can view & edit your data here:

  Prisma Admin: http://localhost:4466/_admin

In 2 operations,  code about age is automatically added to all of database, orm, graphql  api , client  api .

Impression

I've  been writing graphql api by myself until  now, so I like it because it's so easy.
I feel that it is perfect for personal development and making small things.

 The number of stars on github is 16.1k (as of November 2019), which is a bit insufficient, and I think it's a subtle existence because there are few articles in Japan. Also,  it seems that hasra is a comparison target with prisma .
It's a comparison with firebase, but I think it's good for people who feel like "I love graphql" "I can't get used to nosql" "I want a pattern".
However, since the prisma  1 system is premised on docker , I feel that it can not be made without server and the migration function is weak.
Around here is  prisma  or would you go is improved by 2 system.

Personally, authentication around firebase, business logic is  prisma  I intend to use in the feeling.

rk-tech