GraphQLの旅(2) Prismaで開発したGraphQL APIを公開

# Prismaからスキーマをgraphql-yogaにもっていく

[前回、PrismaでのAPI開発](https://qiita.com/Hiroyuki_OSAKI/items/ae15a3e276d27a0a2a12)を取り上げました。
必要なデータベースとスキーマ定義はそろったことになります。

今回はそれを本当にAPIとして公開するためのサーバ構築です。
Backend for Frontend (BFF)とも呼ばれるサーバです。

![graphql2.png](https://qiita-image-store.s3.amazonaws.com/0/96277/114352ce-dd0e-4f6a-8975-ca334faea849.png)


[Prisma本家ドキュメント](https://www.prisma.io/docs/tutorials/build-graphql-servers/development/build-a-graphql-server-with-prisma-ohdaiyoo6c)でも紹介されている[graphql-yoga](https://github.com/prismagraphql/graphql-yoga)を使用します。

## 前提：Prisma＋DB構築ずみ

[前回](https://qiita.com/Hiroyuki_OSAKI/items/ae15a3e276d27a0a2a12)作った`graphql-psql-k8s`フォルダにすでにPrismaで開発したAPIの各種ファイルがあるとします。
そして、Prismaサーバが`http://192.168.99.100:30432/`で起動しているとします。

```
graphql-psql-k8s/
├── datamodel.graphql
├── docker-compose.yml
├── k8s
│   ├── postgres-deployment.yaml
│   ├── postgres-persistentvolumeclaim.yaml
│   ├── postgres-service.yaml
│   ├── prisma-deployment.yaml
│   └── prisma-service.yaml
└── prisma.yml
```

(k8sフォルダはオプションです)

スキーマは、下記の通り単純なものです。

```datamodel.graphql
type User {
  id: ID! @unique
  name: String!
}
```

## graphql-yogaのフォルダを作る

graphql-psql-k8sフォルダと同じ階層（隣）に別のgraphql-yogaフォルダを作ります。

```
graphql-psql-k8s
graphql-yoga/
├── .graphqlconfig.yaml
└── src
    ├── index.js
    └── schema.graphql
```

各ファイルには下記をコピーします。

```.graphqlconfig.yaml
projects:
  app:
    schemPath: src/schema.graphql
    extensions:
      endpoints:
        default: http://localhost:4010
  prisma:
    schemaPath: src/generated/prisma.graphql
    extensions:
      prisma: ../graphql-psql-k8s/prisma.yml
```


```src/index.js
const { GraphQLServer } = require('graphql-yoga')
const { Prisma } = require('prisma-binding')

const resolvers = {
  Query: {
    user: (_, args, context, info) => {
      return context.prisma.query.user(
        {
          where: {
            id: args.id,
          },
        },
        info,
      )
    },
  },
}

const server = new GraphQLServer({
  typeDefs: 'src/schema.graphql',
  resolvers,
  context: req => ({
    ...req,
    prisma: new Prisma({
      typeDefs: 'src/generated/prisma.graphql',
      endpoint: 'http://192.168.99.100:30432',
    }),
  }),
})
server.start({ port: 4010,}, ({port}) => console.log(`GraphQL server is running on http://localhost:${port}`))
```

```src/schema.graphql
# import User from './generated/prisma.graphql'

type Query {
  user(id: ID!): User
}
```

注意: **schema.graphqlの最初の行をコメントだと思って外さないこと。 れっきとしたimport文です。**（ここではまった）


## ライブラリのダウンロード、そしてサーバ起動

もしgraphqlコマンドがインストールされていない場合はインストールします。

```
yarn global add graphql-cli
```

ライブラリをインストールします。

```
yarn add graphql-yoga prisma-binding
```

prismaからスキーマを抜いてきます。

```
graphql get-schema -p prisma
```

これで、下記のようなフォルダになります。

```
.
├── .graphqlconfig.yaml
├── package.json
├── node_modules
├── src
│   ├── generated
│   │   └── prisma.graphql
│   ├── index.js
│   └── schema.graphql
└── yarn.lock
```

さて起動です。

```
node src/index.js
```

## 起動後、アクセス

`http://localhost:4010`
で起動しているgraphql-yogaにアクセスします。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/96277/05c58d44-91e1-da84-9477-a8386550d367.png)

## 補足

ソースコードをGithubに置きました。

[onelittlenightmusic/graphql-psql-k8s](https://github.com/onelittlenightmusic/graphql-psql-k8s)