実際のデータベースを使って、GraphQLサーバーを操作します。

今回は、Prismaを使って、PostgresSQLデータベースと接続します。

データベースのプラットフォームは、Herokuを使います。

コードは、前回のコードを使用します。

Herokuのセットアップをする

まずは、HerokuにPostgresのセットアップを行います。

Herokuのアカウントを作成していない場合、作成しておきます。

Herokuにログインできたら、ダッシュボード右上の点が9つあるアイコンをクリックして、『Data』をクリックします。

image2

Heroku Postgresの『Create one』をクリックします。

image3

画面右側にある、『Install Heroku Postgres』をクリックします。

image4

App to probision toに、Heroku Postgresのアプリ名を作成します。

アプリ名を作成後、『Submit Order Form』をクリックします。

image5

これで、Herokuのセッティングが完了しました。

GraphQLサーバーにPrismaをセットアップする

次は、GraphQLサーバーにPrismaをセットアップします。

Prismaは、GraphQLと Postgres間のデータベースの移行を合理化するために使用します。

ターミナルで、npm install prisma --save-devを実行します。

インストール完了後、ターミナルでnpx prisma initを実行します。

実行完了後、prismaフォルダの中に、shema.prismaファイルが出来上がりました。

image6

shema.prismaの中身は、こちらです。

// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

また、.envに、DATABASE_URLが追加されています。

DATABASE_URL="postgresql://johndoe:randompassword@localhost:5432/mydb?schema=public"

.envのDATABASE_URLにHerokuの URLを入れることにより、shema.prismaのdatasource dbにあるurlが反映されます。

再度、Herokuを開き、作成したアプリの『Settings』をクリックします。

image7

『View Credentials...』をクリックします。

image8

URIの中にある、postgresから始まるURIをコピーします。

image9

.envのDATABASE_URLのpostgresql://johndoe:randompassword@localhost:5432/mydb?schema=publicを削除し、先ほどコピーしたURIを貼り付けます。

これで、GraphQLサーバーとHerokuのpostgresを接続することができました。

次回は、GraphQLでPostgresデータを取得します。

ブログ一覧