跳至主要内容

嵌入 Studio

在您自己的应用程序中嵌入 Prisma Studio​

Prisma Studio 可以通过 @prisma/studio-core 包嵌入到您自己的应用程序中。

它提供了 Studio，一个 React 组件，用于渲染您的数据库的 Prisma Studio。Studio 组件接受一个执行器，该执行器调用后端中的 /studio 端点。后端使用您的 DATABASE_URL（连接字符串）连接到正确的 Prisma Postgres 实例并执行 SQL 查询。

提示

如果您想了解嵌入式 Studio 的外观，请查看 GitHub 上的演示！

用例​

您可以在各种场景中将 Prisma Studio 嵌入到您自己的应用程序中

  • 创建一个快速管理仪表板来编辑数据
  • 每个用户都有自己的数据库的多租户应用程序
  • 为您的用户提供一种简单的方式来查看和编辑数据

先决条件​

  • 前端：一个 React 应用程序
  • 后端
    • 一个服务器端应用程序，用于公开 /studio 端点（例如，使用 Express 或 Hono）
    • 一个 Prisma Postgres 实例（您可以使用 npx prisma init --db 创建一个）
注意

Prisma Studio 的可嵌入版本将很快与其他数据库结合 Prisma ORM 提供。

安装​

安装 npm 包

npm install @prisma/studio-core

前端设置​

在您的 React 应用程序中，您可以使用 Studio 组件通过 Prisma Studio 渲染数据库中的表。它接收一个执行器，该执行器负责将当前的 SQL 查询打包到 HTTP 请求中（也允许自定义标头/有效负载）并将其发送到后端中的 /studio 端点。

查看 GitHub 上的 演示，获取完整的参考实现。

最小实现​

以下是最小实现的示例

import { Studio } from "@prisma/studio-core/ui";
import { createPostgresAdapter } from "@prisma/studio-core/data/postgres-core";
import { createStudioBFFClient } from "@prisma/studio-core/data/bff";
import "@prisma/studio-core/ui/index.css"

function App() {
  const adapter = useMemo(() => {
    // 1. Create a client that points to your backend endpoint
    const executor = createStudioBFFClient({
      url: "https://:4242/studio",
    });

    // 2. Create a Postgres adapter with the executor
    const adapter = createPostgresAdapter({ executor });
    return adapter;
  }, []);

  return (
    <Layout>
      <Studio adapter={adapter} />
    </Layout>
  );
}

自定义标头/有效负载实现​

以下是带有自定义标头/有效负载的实现的示例

import { Studio } from "@prisma/studio-core/ui";
import { createPostgresAdapter } from "@prisma/studio-core/data/postgres-core";
import { createStudioBFFClient } from "@prisma/studio-core/data/bff";
import "@prisma/studio-core/ui/index.css"

function App() {
  const adapter = useMemo(() => {
    // 1. Create a client that points to your backend endpoint
    const executor = createStudioBFFClient({
      url: "https://:4242/studio",
      customHeaders: {
        "X-Custom-Header": "example-value", // Pass any custom headers
      },
      customPayload: {
        customValue: "example-value" // Pass any custom data
      }
    });

    // 2. Create a Postgres adapter with the executor
    const adapter = createPostgresAdapter({ executor });
    return adapter;
  }, []);

  return (
    <Layout>
      <Studio adapter={adapter} />
    </Layout>
  );
}

自定义样式​

您可以自定义 Prisma Studio 的外观和感觉，使其与您的应用程序设计相匹配。这可以通过将自定义主题传递给 Studio 组件来完成。主题只是一组 CSS 变量，用于定义亮模式和暗模式的颜色、间距和其他样式属性。

以下是应用自定义主题的示例

import { Studio } from "@prisma/studio-core/ui";
import { createPostgresAdapter } from "@prisma/studio-core/data/postgres-core";
import { createStudioBFFClient } from "@prisma/studio-core/data/bff";
import "@prisma/studio-core/ui/index.css";

const customTheme = `
@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 20 14.3% 4.1%;
    --primary: 47.9 95.8% 53.1%;
    --primary-foreground: 26 83.3% 14.1%;
    --border: 20 5.9% 90%;
    --input: 20 5.9% 90%;
    --ring: 20 14.3% 4.1%;
    --radius: 0rem;
  }

  .dark {
    --background: 20 14.3% 4.1%;
    --foreground: 60 9.1% 97.8%;
    --primary: 47.9 95.8% 53.1%;
    --primary-foreground: 26 83.3% 14.1%;
    --border: 12 6.5% 15.1%;
    --input: 12 6.5% 15.1%;
    --ring: 35.5 91.7% 32.9%;
  }
}
`;

function App() {
  const adapter = useMemo(() => {
    const executor = createStudioBFFClient({
      url: "https://:4242/studio",
    });
    return createPostgresAdapter({ executor });
  }, []);

  return (
    <Layout>
      <Studio theme={customTheme} adapter={adapter} />
    </Layout>
  );
}

通过此设置，Studio 将继承您的自定义颜色、边框和排版规则，使其感觉像是您应用程序的自然组成部分，而不是一个独立的工具。您可以根据所需的自定义程度定义任意数量的变量。

概念​

以下是前端中的关键概念概述

  • 执行器：Studio 和后端之间的桥梁，使用 createStudioBFFClient 函数创建
  • 适配器：处理 Postgres 特定的查询格式
  • 自定义标头：传递身份验证令牌、用户信息等。
  • 自定义有效负载：随每个请求发送额外的上下文/数据

后端设置​

您的后端需要公开一个 /studio 端点，前端将请求发送到该端点。下面的实现使用 @prisma/studio-core 中的 createPrismaPostgresHttpClient。

后端还需要访问 Prisma Postgres API 密钥，我们建议将其设置为环境变量作为最佳实践。

查看 GitHub 上的 演示，获取完整的参考实现。

最小实现​

以下是使用 Hono 的 /studio 端点的最小实现的示例。这假设您的连接 URL 可通过 DATABASE_URL 环境变量获取

import { Hono } from "hono";
import { createPrismaPostgresHttpClient } from "@prisma/studio-core/data/ppg";
import { serializeError } from "@prisma/studio-core/data/bff";

const app = new Hono().use("*", cors());

app.post("/studio", async (c) => {
  // 1. Extract the query and custom data from the request
  const { query } = await c.req.json();
  
  // 2. Read DB URL from env vars
  const url = process.env.DATABASE_URL;
  
  // 3. Execute the query against Prisma Postgres
  const [error, results] = await createPrismaPostgresHttpClient({ url }).execute(query);
  
  // 6. Return results or errors
  if (error) {
    return c.json([serializeError(error)]);
  }
  
  return c.json([null, results]);
});

自定义标头/有效负载实现​

以下是使用 Hono 的 /studio 端点的一个稍微高级的实现的示例。在这种情况下，假设是一个多租户场景，前端发送用户 ID 和身份验证令牌，后端使用这些信息通过假设的 determineUrlFromContext 函数确定属于该用户的 Prisma Postgres 实例

// server/index.ts
import { Hono } from "hono";
import { createPrismaPostgresHttpClient } from "@prisma/studio-core/data/ppg";
import { serializeError } from "@prisma/studio-core/data/bff";

const app = new Hono().use("*", cors());

app.post("/studio", async (c) => {
  // 1. Extract the query and custom data from the request
  const { query, customPayload } = await c.req.json();
  
  // 2. Access custom headers (great for auth!)
  const customHeader = c.req.header("X-Custom-Header");
  console.log("Received headers:", { customHeader });
  
  // 3. Use custom payload data
  console.log("Received value:", customPayload.customValue);
  
  // 4. Determine the URL (this is where you'd implement your auth logic)
  const url = determineUrlFromContext(customHeader, customPayload);
  
  // 5. Execute the query using Prisma Postgres or Prisma Accelerate
  const [error, results] = await createPrismaPostgresHttpClient({ url }).execute(query);
  
  // 6. Return results or errors
  if (error) {
    return c.json([serializeError(error)]);
  }
  
  return c.json([null, results]);
});

概念​

  • 查询对象：包含 Studio 的 SQL 查询和参数
  • 自定义有效负载：随每个请求发送的额外数据
  • Prisma Postgres 客户端：对数据库执行查询
  • 错误处理：正确序列化错误以供 Studio 显示

执行流程​

以下是嵌入式 Prisma Studio 版本的执行流程概述

添加用户认证​

当您想对应用程序的用户进行 Prisma Studio 认证时，您可以通过在嵌入式 Prisma Studio 版本周围添加自定义逻辑来实现。

在前端，您可以在创建执行器时确保传递 Authorization 标头和其他数据（例如用户 ID）

const executor = createStudioBFFClient({
  url: "https://:4242/studio",
  customHeaders: {
    "X-User-ID": currentUser.id,
    "Authorization": `Bearer ${userToken}`,
  },
});

在您的服务器端实现中，您可以从传入请求中检索这些值，并提取此用户查询所需的 Prisma Postgres API 密钥

const userId = c.req.header("X-User-ID");
const token = c.req.header("Authorization");

const userApiKey = await getUserApiKey(userId, token);

许可​

可嵌入的 Prisma Studio (免费) 根据 Apache 2.0 许可。

✔️ 免费用于生产环境
⚠️ Prisma 品牌必须保持可见且不变
🔐 要删除我们的品牌或咨询即将推出的仅限合作伙伴的功能，请联系我们：partnerships@prisma.io

遥测​

此包包含匿名遥测数据，以帮助我们改进 Prisma Studio。
使用即表示同意。在我们的 隐私政策 中了解更多信息。

打开方式
复制为 Markdown
在 Claude 中打开
在 ChatGPT 中打开
在 T3.chat 中打开
在 GitHub 中编辑
© . This site is unofficial and not affiliated with Prisma Data, Inc.