如何在 Shopify 中使用 Prisma Postgres

25 分鐘

簡介

Shopify 是一個熱門的電子商務開店平台。本指南將向您展示如何將 Shopify 應用程式連接至 Prisma Postgres 資料庫，以便為商品建立內部筆記。

先決條件

1. 設定您的專案

注意

如果您尚未安裝 Shopify CLI，可以使用 npm install -g @shopify/cli 進行安裝。

首先，使用 Shopify CLI 初始化一個新的 Shopify 應用程式：

shopify app init

在設定過程中，系統會提示您自訂應用程式。別擔心，只需遵循以下建議選項即可快速上手，並確保您的應用程式設定順利：

資訊

開始建立您的應用程式： Build a Remix app (推薦)
對於您的 Remix 模板，您想要使用哪種語言： JavaScript
應用程式名稱： prisma-store (名稱不能包含 shopify)

導覽至 prisma-store 目錄

cd prisma-store

2. 設定 Prisma

Prisma 已預先安裝在您的專案中，但我們先花點時間將其更新至最新版本。這能確保您在建構應用程式時，能夠使用最新的功能、改進項目並獲得最佳體驗。

由於您將切換至 Prisma Postgres 資料庫，請刪除 prisma 目錄中的 migrations 資料夾以及 dev.sqlite 檔案。

您需要更新 schema.prisma 檔案中的幾項內容，以便使其與 Remix 和 Prisma Postgres 配合運作。

切換至新的 prisma-client 產生器。
將 provider 更新為 postgresql。
將 url 更新為新的資料庫連結。

prisma/schema.prisma

generator client {
  provider = "prisma-client-js"
  provider = "prisma-client"
  output   = "../app/generated/prisma"
}

datasource db {
  provider = "sqlite"
  provider = "postgresql"
  url      = "file:../dev.db"
}

model Session {
  // ... existing model
}

建立 prisma.config.ts 檔案以設定 Prisma：

prisma.config.ts

import 'dotenv/config'
import { defineConfig, env } from 'prisma/config';

export default defineConfig({
  schema: 'prisma/schema.prisma',
  migrations: {
    path: 'prisma/migrations',
  },
  datasource: {
    url: env('DATABASE_URL'),
  },
});

注意

由於 Shopify 應用程式通常預先安裝了 dotenv，因此您應該已經可以存取它。如果沒有，請使用以下指令安裝：

npm install dotenv

為了讓您的應用程式能夠儲存每個商品的筆記，讓我們在 Prisma schema 中新增一個 ProductNote 模型。

此模型將允許您透過 productGid 欄位，在資料庫中儲存並整理連結至特定商品的筆記。

prisma/schema.prisma

generator client {
  provider = "prisma-client"
  output   = "../app/generated/prisma"
}

datasource db {
  provider = "postgresql"
}

model Session {
  // ... existing model
}

model ProductNote {
  id         String   @id @default(uuid())
  productGid String
  body       String?
  createdAt  DateTime @default(now())
  updatedAt  DateTime @updatedAt
}

接下來，需要將 Prisma 更新至最新版本。執行：

npm install prisma @types/pg --save-dev
npm install @prisma/client @prisma/adapter-pg pg

資訊

如果您使用的是不同的資料庫提供者（MySQL、SQL Server、SQLite），請安裝相應的驅動程式適配器套件，而不是 @prisma/adapter-pg。如需更多資訊，請參閱資料庫驅動程式。

Prisma Postgres 允許您即時建立新的資料庫，您可以在初始化專案時加入 --db 旗標來同時建立新的資料庫。

npx prisma init --db

完成提示後，是時候存取您的新資料庫了。

開啟:
- 登入並選擇您剛建立的資料庫專案。
取得您的資料庫連線字串。
- 點擊 Connect 按鈕。
- 複製出現的連線字串。它看起來應該像這樣：
```
DATABASE_URL="postgresql://user:password@host:5432/database?sslmode=require"
```
設定您的環境
- 在專案根目錄中建立一個新的 .env 檔案。
- 將您剛剛複製的 DATABASE_URL 貼到此檔案中。
套用您的資料庫 schema
- 執行以下指令來建立資料表並準備好您的資料庫：
```
npx prisma migrate dev --name init
```
接著生成 Prisma Client
```
npx prisma generate
```

現在，在繼續之前，讓我們更新 db.server.ts 檔案，以使用帶有驅動程式轉接器 (driver adapter) 的新產生 Prisma 客戶端。

app/db.server.ts

import { PrismaClient } from "@prisma/client";
import { PrismaClient } from "./generated/prisma/client.js";
import { PrismaPg } from "@prisma/adapter-pg";

const adapter = new PrismaPg({
  connectionString: process.env.DATABASE_URL,
});

if (process.env.NODE_ENV !== "production") {
  if (!global.prismaGlobal) {
    global.prismaGlobal = new PrismaClient();
    global.prismaGlobal = new PrismaClient({ adapter });
  }
}

const prisma = global.prismaGlobal ?? new PrismaClient();
const prisma = global.prismaGlobal ?? new PrismaClient({ adapter });

export default prisma;

警告

建議將 app/generated/prisma 加入到您的 .gitignore 檔案中。

3. 建立您的 Remix 模型

為了保持專案結構整潔，讓我們建立一個新的 models/ 資料夾。在此資料夾內，新增一個名為 notes.server.js 的檔案。這將是您所有筆記相關邏輯的存放處，隨著應用程式擴展，這會使您的程式碼庫更易於管理。

notes.server.js 檔案將包含兩個函式：

getNotes - 用於取得特定商品的所有筆記。
createNote - 用於為特定商品建立新筆記。

首先，從 db.server.ts 匯入 Prisma 客戶端，並建立 getNotes 函式：

models/notes.server.js

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

export const getNotes = async (productGid) => {
  const notes = await prisma.productNote.findMany({
    where: { productGid: productGid.toString() },
    orderBy: { createdAt: "desc" },
  });
  return notes;
};

為了讓使用者能夠新增筆記到您的資料庫，讓我們在 notes.server.js 中建立一個使用 prisma.productNote.create 的函式。

models/notes.server.js

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

export const getNotes = async (productGid) => {
  const notes = await prisma.productNote.findMany({
    where: { productGid: productGid.toString() },
    orderBy: { createdAt: "desc" },
  });
  return notes;
};

export const createNote = async (note) => {
  const newNote = await prisma.productNote.create({
    data: {
      body: note.body,
      productGid: note.productGid,
    },
  });
  return newNote;
};

4. 建立您的版面配置路由 (Layout Route)

在呼叫這些函式之前，我們的路由需要一個版面配置來承載。此版面配置路由將包含一個用於選擇商品的按鈕，並作為 ProductNotes 路由的父層，保持應用程式結構清晰且便於使用。

4.1. 建立 ProductNotesLayout 元件

首先建立 routes/app.product-notes.jsx 資料夾，並在其中新增 ProductNotesLayout 元件。

app/routes/app.product-notes.jsx

import { Page, Layout } from "@shopify/polaris";

export default function ProductNotesLayout() {
  return (
    <Page title="Product Notes">
      <Layout>
        <Layout.Section></Layout.Section>
      </Layout>
    </Page>
  );
}

接下來，建立 selectProduct 函式以及一個 Button，讓使用者可以挑選商品。

app/routes/app.product-notes.jsx

import { useNavigate } from "@remix-run/react";
import { Page, Layout } from "@shopify/polaris";
import { Button, Page, Layout } from "@shopify/polaris";

export default function ProductNotesLayout() {
  const navigate = useNavigate();

  async function selectProduct() {
    const products = await window.shopify.resourcePicker({
      type: "product",
      action: "select",
    });
    const selectedGid = products[0].id;
    navigate(`/app/product-notes/${encodeURIComponent(selectedGid)}`);
  }

  return (
    <Page title="Product Notes">
      <Layout>
        <Layout.Section>
          <Button onClick={selectProduct} fullWidth size="large">
            Select Product
          </Button>
        </Layout.Section>
      </Layout>
    </Page>
  );
}

Remix 提供了渲染巢狀路由的能力。在 routes/app.product-notes.jsx 檔案中新增一個 <Outlet />，這裡將會渲染 ProductNotes 路由。

app/routes/app.product-notes.jsx

import { useNavigate } from "@remix-run/react";
import { Outlet, useNavigate } from "@remix-run/react";
import { Page, Button, Layout } from "@shopify/polaris";

export default function ProductNotesLayout() {
  const navigate = useNavigate();

  async function selectProduct() {
    const products = await window.shopify.resourcePicker({
      type: "product",
      action: "select",
    });
    const selectedGid = products[0].id;
    navigate(`/app/product-notes/${encodeURIComponent(selectedGid)}`);
  }

  return (
    <Page title="Product Notes">
      <Layout>
        <Layout.Section>
          <Button onClick={selectProduct} fullWidth size="large">
            Select Product
          </Button>
        </Layout.Section>
        <Outlet />
      </Layout>
    </Page>
  );
}

如果您執行 npm run dev，您將無法看到 Product Notes 路由。為了解決此問題，您需要將 ProductNotesLayout 加入到 app.jsx 檔案中，使其顯示在側邊欄。

app/routes/app.jsx

import { Link, Outlet, useLoaderData, useRouteError } from "@remix-run/react";
import { boundary } from "@shopify/shopify-app-remix/server";
import { AppProvider } from "@shopify/shopify-app-remix/react";
import { NavMenu } from "@shopify/app-bridge-react";
import polarisStyles from "@shopify/polaris/build/esm/styles.css?url";
import { authenticate } from "../shopify.server";

export const links = () => [{ rel: "stylesheet", href: polarisStyles }];

export const loader = async ({ request }) => {
  await authenticate.admin(request);

  return { apiKey: process.env.SHOPIFY_API_KEY || "" };
};

export default function App() {
  const { apiKey } = useLoaderData();

  return (
    <AppProvider isEmbeddedApp apiKey={apiKey}>
      <NavMenu>
        <Link to="/app" rel="home">
          Home
        </Link>
        <Link to="/app/product-notes">Product Notes</Link>
      </NavMenu>
      <Outlet />
    </AppProvider>
  );
}

// Shopify needs Remix to catch some thrown responses, so that their headers are included in the response.
export function ErrorBoundary() {
  return boundary.error(useRouteError());
}

export const headers = (headersArgs) => {
  return boundary.headers(headersArgs);
};

5. 建立您的商品筆記路由

目前，如果您執行 npm run dev 並前往 Product Notes 路由，選擇商品後會看到一片空白。

請按照以下步驟建立商品筆記路由：

建立一個新的 routes/app/app.notes.$productGid.jsx 檔案，該檔案將接收 productGid 作為參數，並傳回與該商品相關聯的商品筆記，以及一個用於建立新筆記的表單。