[ShopifyApp]Prismaでデータベース作ってみる（基本的な使い方確認）・Remixでアプリ作ってみる #day3

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。

前回下記で作ったSettingsページを使って、Prismaでデータベース作って追加&更新できるようにしてみます！

🔸前回の続き

✔️今日のゴール

↓Prismaと連携させる

Prismaのデータ

✔️作成手順

Step1　まずはPrismaでデータベースを作る

前回作った基本設定のフォーム画面のデータベースを作るので、

・ID
・姓 (lastName)
・名 (firstName)

が必要。

Prima＞schema.prismaを開いて、

model Settings {
  id          Int    @id
  firstName   String
  lastName    String
}

書き方は公式ドキュに載ってる。

Quickstart with TypeScript & SQLite | Prisma Documentation

Settingsのテーブルを追加して、マイグレーション。下記をコマンドラインで実行。

npx prisma migrate dev --name お好みのファイル名

add_db_settingsというファイル名にしました！無事、migrationsフォルダ内に作成できてます。

あとは、Prismaスタジオを開く。

npm run prisma studio

Prismaスタジオをプレビューすると下記のテーブルができてます🎵

Prisma Studio

次はShopifyアプリの管理画面からデータベースに設定を保存＆更新できるようにしていきます。

Step2　データベースと管理画面を紐付け

app.day1.jsxのファイルを開いて、db.serverをインポート。

import db from "../db.server";

Loarder内をfindFirst()でデータベースの値を取得するコードに書き換え。さっきSettingsというテーブルを作ったのでdb内のSettingsを見るように記載。

export async function loader() {
    let settings = await db.settings.findFirst();
    return json(settings);
}

Action内にはupsert()でcreate()とupdate()を書いていきます。upsert()だとデータが存在してない時には新規データを登録できて、すでに存在データの更新もできちゃうので便利。

🔸こちらの公式Doc内をそのまま書くだけ

Prisma Client API | Prisma Documentation

await db.settings.upsert({
      where: {
        id: 1,
      },
      create: {
        id: 1,
        lastName: settings.lastName,
        firstName: settings.firstName
      },
      update: {
        id: 1,
        lastName: settings.lastName,
        firstName: settings.firstName
      }
    })

最後にNullの時にエラーが出るのでForm内のInput入力のバリューを変更しておきます。formStateの後ろに「?」をつける。

（前）{formState.lastName}　→ （後）{formState?.lastName}

（前）{formState.firstName}　→ （後）{formState?.firstName}

<Form method='POST'>
                <BlockStack gap="400">
                <TextField label="姓" name='lastName' value={formState?.lastName} onChange={(value) => setFormState({...formState, lastName: value})} />
                <TextField label="名" name='firstName' value={formState?.firstName} onChange={(value) => setFormState({...formState, firstName: value})} />
                <Button submit={true}>更新</Button>
                </BlockStack>
            </Form>

これで、管理画面から更新できるかチェック！

デフォルトだと空欄

氏名を入力して更新ボタンをクリック

データベースに反映されました🎵

リロードしてもショッピファイ管理画面がわでデータが表示されたままになってますね。

以上で完成です！

これで一通り基本的なRemix、Prismaの使い方がわかったので、これを応用して今後はアプリを作成していきます！