Zenn
☕

Supabase(postgres) + Prisma , pgadmin等の使用

2022/03/17に公開
Node.js
PostgreSQL
Prisma
Supabase
tech

概要:

postgresで、無料枠がありそうなsupabaseの開始等のメモになります。

  • API等ありそうでしたが、今回はORMで接続や、pgadminツール等の接続です

構成

  • supabase / postgres
  • node 14
  • pgadmin4 v6.7 / windows

参考

supabase の開始

  • supabase.com を開き、今回は githubアカウントでログインしました。

  • [new project] で、プロジェクト名等の入力

  • 2,3分 でdbが作成されたようでした。

  • リージョンは、 us-east　にしました。

接続等の準備

  • database > Setting > Database

  • 下の、Connection string > URI , PSQL等コピー

  • psqlで、接続し。DB作成、table作成、INSERT

  • table Editorに、データ表示できました。

prismaで接続

  • .env 作成、　Connection string を設定
  • DB追加した場合、適宣修正下さい
DATABASE_URL="postgresql://postgres:__PASS__@__HOST__.supabase.co:5432/dbname"
  • prisma/schema.prisma, Task モデル追加

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

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

model Post {
  id        Int      @id @default(autoincrement())
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
  title     String   @db.VarChar(255)
  content   String?
  published Boolean  @default(false)
  user    User       @relation(fields: [userId], references: [id])
  userId  Int
}

model Profile {
  id     Int     @id @default(autoincrement())
  bio    String?
  user   User    @relation(fields: [userId], references: [id])
  userId Int     @unique
}

model User {
  id      Int      @id @default(autoincrement())
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
  password  String
  email   String   @unique
  name    String?
  posts   Post[]
  profile Profile?  
}

model Task {
  id        Int      @id @default(autoincrement())
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
  title     String   @db.VarChar(255)
  content   String?  @db.Text
  userId    Int?
}
  • npm add, migrate
npm install --save-dev prisma
npm install --save @prisma/client
npx prisma migrate dev --name init
  • prisma 実行テスト, 追加、検索の例
test.js
//
const { PrismaClient } = require('@prisma/client')

//
async function test1(){
  console.log("tasks");
  const prisma = new PrismaClient()
  const items = await prisma.task.findMany()
  await prisma.$disconnect();
  console.log(items);
}
//
async function addTask(){
  const prisma = new PrismaClient();
  const result = await prisma.task.create({
    data: {
      title: "t1",
      userId: 0
    }
  }) 
  await prisma.$disconnect()
}

// main
async function main(){
  await addTask();
  await test1();
}
main();

pgadmin の表示

  • win 版,下記URL
    https://www.postgresql.org/

  • download > file browser > pgadmin > pgadmin4 > v6.7 > windows を開く

  • pgadmin4-6.7-x64.exeを、DL

  • インストール

  • 初回は、master password を入力
    (supabaseの、接続パスワードでは無いようです)

  • 接続設定は、supabaseの、メモしたURIを参考に、Host, password等入力

追加したレコードの、表示

  • db選択 > Schemas > public > Tables
    (nodeで、追加したレコードが表示できました)

....

Discussion