Nuxt Prisma モジュールの使用

Nuxt Prisma モジュールは、Prisma ORM の Nuxt アプリケーションへの統合を簡素化します。

Prisma ORM は、データベーススキーマをモデル化し、自動生成されたマイグレーションを提供し、直感的で型安全な方法でデータベースにクエリを実行できるデータベースライブラリです。

このモジュールは、Nuxt アプリケーションでの Prisma ORM のセットアップと使用を効率化するためのいくつかの機能を提供し、データベースとの対話を容易にします。

機能

プロジェクトの初期化: Nuxt プロジェクト内に SQLite データベースを使用して Prisma ORM プロジェクトを自動的にセットアップします。
コンポーザブル: Vue ファイルで使用するための自動インポートされた usePrismaClient() コンポーザブルを提供します。
API ルートの統合: DB にクエリを実行するために API ルートで使用する PrismaClient のインスタンスを自動的にインポートします。
Prisma Studio アクセス: データの表示と手動編集のために Nuxt Devtools を介した Prisma Studio へのアクセスを有効にします。

はじめに

新しい Nuxt プロジェクトを作成します
```
npm create nuxt test-nuxt-app
```
プロジェクトディレクトリに移動し、Nuxt CLI を使用して @prisma/nuxt をインストールします
```
cd test-nuxt-app
npx nuxi@latest module add @prisma/nuxt
```
警告
pnpm を使用している場合は、Prisma の依存関係をホイストするようにしてください。詳細な手順については、Prisma Studio の手順に従ってください。
開発サーバーを起動します
```
npm run dev
```
開発サーバーを起動すると、
1. Prisma CLI が自動的にインストールされます
2. SQLite を使用して Prisma プロジェクトを初期化します
3. Prisma スキーマファイルに User および Post の例のモデルを作成します
  prisma/schema.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 = "sqlite"
   url      = env("DATABASE_URL")
 }

 model User {
   id    Int     @id @default(autoincrement())
   email String  @unique
   name  String?
   posts Post[]
 }

 model Post {
   id        Int     @id @default(autoincrement())
   title     String
   content   String?
   published Boolean @default(false)
   author    User    @relation(fields: [authorId], references: [id])
   authorId  Int
 }
```
4. Prisma Migrate を使用してデータベーステーブルを作成するためのマイグレーションを実行するように促します
  注
  migrations フォルダがない場合、モジュールを最初に起動したときにデータベースが自動的に移行されます。その後、スキーマの変更を適用するには、CLI で npx prisma migrate dev を手動で実行する必要があります。npx prisma migrate dev コマンドを手動で実行すると、移行の管理が容易かつ安全になり、移行関連のエラーのトラブルシューティングも容易になります。
5. Prisma Client をインストールして生成します。これにより、DB にクエリを実行できます
6. Prisma Studio を自動的に起動します
これで、プロジェクトで Prisma ORM を使用できます。Prisma Studio を追加するプロンプトを受け入れた場合は、Nuxt Devtools を介して Prisma Studio にアクセスできます。アプリで Prisma Client を使用する方法については、使用方法セクションを参照してください。

別のデータベースプロバイダーの使用

@prisma/nuxt モジュールは、Prisma ORM がサポートするデータベースプロバイダーであればどれでも動作します。はじめにの例を構成して、選択したデータベースを使用できます。手順は、既存のデータがないデータベースと既存のデータがあるデータベースで異なります。

既存のデータがないデータベースの使用

はじめにの例を構成して、既存のデータがない PostgreSQL データベースを使用するには

Nuxt 開発サーバーと Prisma Studio (まだ実行中の場合) を停止します

npx kill-port 3000  # Stops Nuxt dev server (default port)
npx kill-port 5555  # Stops Prisma Studio (default port)

schema.prisma ファイルに移動し、datasource ブロックを更新して postgresql プロバイダーを指定します

prisma/schema.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")
}

model User {
  id    Int     @id @default(autoincrement())
  email String  @unique
  name  String?
  posts Post[]
}

model Post {
  id        Int     @id @default(autoincrement())
  title     String
  content   String?
  published Boolean @default(false)
  author    User    @relation(fields: [authorId], references: [id])
  authorId  Int
}

.env ファイルの DATABASE_URL 環境変数を PostgreSQL データベース URL で更新します

.env

## This is a sample database URL, please use a valid URL
DATABASE_URL="postgresql://janedoe:mypassword@localhost:5432/mydb?schema=sample"

SQLite データベースファイルと migrations フォルダを削除します

rm prisma/dev.db # Delete SQLite database file
rm -r prisma/migrations # Delete the pre-existing migrations folder

開発サーバーを実行します
```
npm run dev
```
開発サーバーを起動すると、スキーマの変更をデータベースに移行するように求められます。これに同意する必要があります。次に、Nuxt Devtools から Prisma Studio をインストールしてアクセスするプロンプトに同意します。
@prisma/nuxt モジュールは、PostgreSQL データベースで使用する準備ができました。アプリで Prisma Client を使用する方法については、使用方法セクションを参照してください。

既存のデータがあるデータベースの使用

はじめにの例を構成して、すでにデータが含まれている PostgreSQL データベースを使用するには

開発サーバーと Prisma Studio (まだ実行中の場合) を停止します

// stops Nuxt dev server from running incase it's still running
npx kill-port 3000
// stops Prisma Studio instance incase it's still running
npx kill-port 5555

Prisma フォルダを削除します
```
rm -r prisma/
```

.env ファイルの DATABASE_URL 環境変数を PostgreSQL データベース URL で更新します

.env

## This is a sample database URL, please use a valid URL
DATABASE_URL="postgresql://janedoe:mypassword@localhost:5432/mydb?schema=sample"

既存のデータベースから Prisma スキーマと migrations フォルダを生成するには、データベースをイントロスペクトする必要があります。イントロスペクションガイドのステップ 1 から ステップ 4 を完了し、続行します。
開発サーバーを起動すると、migrations フォルダがすでに存在するため、スキーマの変更をデータベースに移行するように求めるプロンプトはスキップされます。Nuxt Devtools から Prisma Studio をインストールしてアクセスするプロンプトに同意します。
@prisma/nuxt モジュールは、PostgreSQL データベースで使用する準備ができました。アプリで Prisma Client を使用する方法については、使用方法セクションを参照してください。

使用方法

オプション A: `usePrismaClient` コンポーザブル

Nuxt サーバーコンポーネントでのコンポーザブルの使用

Nuxt サーバーコンポーネントを使用している場合は、.server.vue ファイルで Prisma Client のグローバルインスタンスを使用できます

<script setup>
  const prisma = usePrismaClient()
  const user = await prisma.user.findFirst()
</script>

<template>
  <p>{{ user.name }}</p>
</template>

オプション B: `lib/prisma.ts`

最初のセットアッププロンプトを実行すると、このモジュールは Prisma Client のグローバルインスタンスを含む lib/prisma.ts ファイルを作成します。

lib/prisma.ts

import { PrismaClient } from '@prisma/client'

const prismaClientSingleton = () => {
  return new PrismaClient()
}

declare const globalThis: {
  prismaGlobal: ReturnType<typeof prismaClientSingleton>;
} & typeof global;

const prisma = globalThis.prismaGlobal ?? prismaClientSingleton()

export default prisma

if (process.env.NODE_ENV !== 'production') globalThis.prismaGlobal = prisma

lib/prisma.ts ファイルでクライアント拡張機能を使用することで、Prisma Client の機能をカスタマイズできます。以下は、Accelerate クライアント拡張機能を使用した例です

lib/prisma.ts

import { PrismaClient } from '@prisma/client'
import { withAccelerate } from '@prisma/extension-accelerate'

const prismaClientSingleton = () => {
  return new PrismaClient().$extends(withAccelerate())
}

declare const globalThis: {
  prismaGlobal: ReturnType<typeof prismaClientSingleton>;
} & typeof global;

const prisma = globalThis.prismaGlobal ?? prismaClientSingleton()

export default prisma

if (process.env.NODE_ENV !== 'production') globalThis.prismaGlobal = prisma

情報

Prisma Client 拡張機能を使用するクライアントを活用する場合は、lib フォルダの prisma インスタンスを使用してください。

API ルートでのグローバル Prisma Client インスタンスの使用

Nuxt API ルートで Prisma Client のグローバルインスタンスを次のように使用できます

import prisma from "~/lib/prisma";

export default defineEventHandler(async (event) => {
  return {
    user: await prisma.user.findFirst(),
  };
});

Nuxt サーバーコンポーネントでのグローバル Prisma Client インスタンスの使用

Nuxt サーバーコンポーネントを使用している場合は、Prisma Client のグローバルインスタンス .server.vue ファイルを使用できます

<script setup>
  import prisma from '~/lib/prisma';
  const user = await prisma.user.findFirst()
</script>

<template>
  <p>{{ user.name }}</p>
</template>

構成

nuxt.config.ts の prisma キーを使用して @prisma/nuxt モジュールを構成できます

nuxt.config.ts

export default defineNuxtConfig({
  // ...
  prisma: {
    // Options
  }
})

注

prisma キーは、npm run dev を実行してモジュールを正常にセットアップした後、nuxt.config.ts で使用できます

オプション	型	デフォルト	説明
installCLI	`boolean`	true	Prisma CLI をインストールするかどうか。
installClient	`boolean`	true	プロジェクトにPrisma Client ライブラリをインストールするかどうか。
generateClient	`boolean`	true	`PrismaClient` インスタンスを生成するかどうか。スキーマの変更に基づいてクライアントを更新するために、実行ごとに `npx prisma generate` を実行します。
formatSchema	`boolean`	true	Prisma スキーマファイルをフォーマットするかどうか。
installStudio	`boolean`	true	Nuxt Devtools でPrisma Studio をインストールして起動するかどうか。
autoSetupPrisma	`boolean`	false	セットアップ中のすべてのプロンプトをスキップするかどうか。このオプションは、スクリプトまたは CI/CD パイプラインで Prisma のセットアップを自動化する場合に役立ちます。
skipPrompts	`false`	false	すべてのプロンプトをスキップします
prismaRoot	`string`	false	Nuxt レイヤーを使用する場合に必須です。たとえば、`database` という名前の Nuxt レイヤーがある場合、ベースの nuxt 設定での `prismaRoot` は `./database` になります。これは、Prisma が初期化またはチェックされるフォルダを指します。
prismaSchemaPath	`string`	`未定義`	Nuxt レイヤーを使用する場合に必須です。たとえば、`database` という名前の Nuxt レイヤーがある場合、ベースの nuxt 設定での `prismaSchemaPath` は `./database/prisma/schema.prisma` になります。
runMigration	`boolean`	true	Prisma Migration を自動的に実行するかどうか。MongoDB または PlanetScale を使用している場合は、`npx prisma db push` コマンドを使用してください。マイグレーションはこれらのデータベースではサポートされていないため、このコマンドはスキーマが適切に更新されるようにします。

制限事項

`PrismaClient` コンストラクタオプションは `usePrismaClient` コンポーザブルでは構成できません

usePrismaClient モジュールでは、現在 PrismaClient コンストラクタオプションの構成を許可していません。

`usePrismaClient` コンポーザブルはエッジランタイムではサポートされていません

usePrismaClient コンポーザブルは現在、エッジランタイムでは動作しない PrismaClient インスタンスに依存しています。コンポーザブルのエッジサポートが必要な場合は、Discord または GitHub でお知らせください。

トラブルシューティング

`pnpm` で Prisma Studio が開かない

pnpm を使用していて、Prisma Studio が開かない場合に次のエラーが発生した場合

Uncaught SyntaxError: The requested module '/_nuxt/node_modules/.pnpm/*@*/node_modules/@prisma/client/index-browser.js?v=' does not provide an export named 'PrismaClient' (at plugin.mjs?v=*)

この問題を解決するには、プロジェクトルートに .npmrc ファイルを作成し、次の構成を追加して Prisma の依存関係をホイストします

.npmrc

hoist-pattern[]=*prisma*

これにより、Prisma の依存関係が pnpm によって適切に解決されるようになります。

`TypeError: Failed to resolve module specifier ".prisma/client/index-browser"` の解決

アプリケーションをビルドしてプレビューした後、ブラウザコンソールで次のエラーメッセージが発生した場合

TypeError: Failed to resolve module specifier ".prisma/client/index-browser"

この問題を解決するには、次の構成を nuxt.config.ts ファイルに追加します

nuxt.config.ts

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  modules: [
    '@prisma/nuxt',
  ],
  // additional config
  vite: {
    resolve: {
      alias: {
        '.prisma/client/index-browser': './node_modules/.prisma/client/index-browser.js',
      },
    },
  },
})

この構成により、モジュール指定子が適切なファイルに正しくマッピングされるようになります。

パッケージマネージャーのサポートの制限事項

このモジュールは、npm、Yarn、pnpm などの一般的なパッケージマネージャーで動作するように設計されています。ただし、v0.2 の時点では、Bun と完全に互換性がありません。これは、無期限のインストールループを引き起こす問題が原因です。

さらに、このパッケージは Deno ではテストされていないため、公式にはサポートされていません。

Prisma とのつながりを維持する

以下とつながることで、Prisma の旅を続けましょうアクティブなコミュニティ。情報を入手し、参加し、他の開発者と協力しましょう

X でフォローしてくださいお知らせ、ライブイベント、役立つヒント。
Discord に参加しましょう質問をしたり、コミュニティと話したり、会話を通じてアクティブなサポートを受けたりできます。
YouTube で購読しましょうチュートリアル、デモ、ストリーム。
GitHub で交流しましょうリポジトリにスターを付けたり、問題を報告したり、問題に貢献したりします。

私たちは皆様のご参加を心から大切にしており、コミュニティの一員として皆様をお迎えできることを楽しみにしています！

機能​

はじめに​

別のデータベースプロバイダーの使用​

既存のデータがないデータベースの使用​

既存のデータがあるデータベースの使用​

使用方法​

オプション A: usePrismaClient コンポーザブル​

Nuxt サーバーコンポーネントでのコンポーザブルの使用​

オプション B: lib/prisma.ts​

API ルートでのグローバル Prisma Client インスタンスの使用​

Nuxt サーバーコンポーネントでのグローバル Prisma Client インスタンスの使用​

構成​

制限事項​

PrismaClient コンストラクタオプションは usePrismaClient コンポーザブルでは構成できません​

usePrismaClient コンポーザブルはエッジランタイムではサポートされていません​

トラブルシューティング​

pnpm で Prisma Studio が開かない​

TypeError: Failed to resolve module specifier ".prisma/client/index-browser" の解決​

パッケージマネージャーのサポートの制限事項​