🛠️

Prisma Cloud（Data Proxy）+ Next.js のセットアップ

2021/11/22に公開

GraphQL

この記事でやること

0の状態から、Prisma Cloud （Prisma Data Platform）で作成したUserを取ってきて、Next.jsのgetServerSidePropsで取得、ブラウザに情報を表示するまで。

Prisma Cloud （Prisma Data Platform）とは？

Prisma Cloudは、DB上に保存されたデータのオンラインブラウザや、GraphQLのクエリコンソール、データプロキシなどを備えた主にPrisma用のクラウド環境です。
既存のPrismaプロジェクトをインポートしたり、クラウドコンソールの権限※を付与（Githubアカウント経由）してコラボレーションすることができます。

用意されているコンソールの権限

Admin: 全ての可能なアクションの実行、プロジェクトの設定が可能
Developer: データブラウザへのアクセス、データの読み取りと書き込み、スキーマの確認
Collaborator: データブラウザへのアクセス、データの読み取りと書き込み
Viewer: データブラウザへのアクセス、データの読み取り

↓DBのデータをこんな感じでブラウジングできます。

そのほかの機能

データベースのIP制限に対応するために静的IPアドレスも提供しています。

また、データベースコネクションプールを維持し、サーバーレス環境でも確実にデータベースを利用できる「Prisma Data Proxy」もベータ版として提供されています。

今回はPrisma Data ProxyのURLに接続し、作成したサンプルデータをNext.js経由で取得します。（もちろんPrismaのORMが動く状態になるので、作成・削除などもできます）

Connection Stringsの作成

管理画面の「Data Proxy」から、Create a new connection stringsをクリックし、新しいConnection Stringsを作成します。

以下のような文字列が表示されたら、コピーしてどこかに保存しておきます。（非表示後は再度確認できません）

prisma://aws-us-east-1.prisma-data.com/?api_key=*********....

クライアント環境

雛形の作成

$ git clone https://github.com/wktq/myapp Githubに生成されたアプリ
$ cd myapp
$ npm install @prisma/client@latest --save
$ npm install prisma@latest --save-dev

Schemaをコピー

schema.prismaを作成し、スキーマをコピーします。

$ code prisma/schema.prisma

prisma generateを実行

PRISMA_CLIENT_ENGINE_TYPE='dataproxy' npx prisma generate

index.jsを編集

サンプルコード

import { PrismaClient } from '@prisma/client'
import { useEffect, useState } from 'react';

export const getServerSideProps = async ({ req }) => {
  const prisma = new PrismaClient()

  const uniqueUser = await prisma.user.findUnique({
    where: {
      email: 'elsa@prisma.io',
    },
  })
  // Date型でエラーが起きるので、一度stringifyしてからparse
  const user = JSON.parse(JSON.stringify(uniqueUser));

  return { props: { user } }
}

export default ({ user }) => {
  useEffect(() => {
    console.info(user);
  }, [])

  return (
    <div> 
      {JSON.stringify(user)}
    </div>
  )
}

起動

$ DATABASE_URL="prisma://aws-us-east-1.prisma-data.com/?api_key=***" npm run dev

Prisma cloudから取得したuserが表示されていればok.

まとめ

環境のセットアップまで終わったら、あとはprismaをゴリゴリ書くだけです。

prisma ORMを初めて使う方は公式ドキュメントが分かりやすいのでオススメです。