Prisma•5mo ago

need help with prisma studio core & react-router v7

how can i use prisma studio core with react-router v7 ( framework mode ) ?

6 Replies

You selected the bot's instantaneous insights. Let me compile your answer right away!

To use Prisma Studio Core with a React Router v7 app (framework mode), you can embed Prisma Studio as a React component in your frontend and expose a backend endpoint for Studio queries. Here’s how you can approach this, based on the available documentation: 1. Backend: Expose a /studio endpoint You need a backend route (e.g., using Express or Hono) that handles requests from Prisma Studio Core. This endpoint should connect to your Prisma Postgres instance and execute SQL queries sent from the frontend Studio component. The backend must use your API key to identify the correct database instance. (See Embed Studio) 2. Frontend: Use the Studio React component In your React Router v7 app, install @prisma/studio-core:

npm install @prisma/studio-core

npm install @prisma/studio-core

Then, in your React component (e.g., a route like /admin/studio), use the Studio component:

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 { useMemo } from "react";

export default function StudioPage() {
  const adapter = useMemo(() => {
    const executor = createStudioBFFClient({
      url: "<http://localhost:4242/studio",> // Your backend endpoint
    });
    return createPostgresAdapter({ executor });
  }, []);

  return <Studio adapter={adapter} />;
}

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 { useMemo } from "react";

export default function StudioPage() {
  const adapter = useMemo(() => {
    const executor = createStudioBFFClient({
      url: "<http://localhost:4242/studio",> // Your backend endpoint
    });
    return createPostgresAdapter({ executor });
  }, []);

  return <Studio adapter={adapter} />;
}

You can add this component to a route in your React Router v7 config, just like any other page. 3. Route Integration Add a route in your routes.ts (or equivalent) for the Studio page, e.g.:

route("admin/studio", "routes/admin/studio.tsx")

route("admin/studio", "routes/admin/studio.tsx")

Notes - You must have a working backend endpoint for Studio queries. - The embeddable Studio currently supports Prisma Postgres only. - For full reference implementations, see the [official demo](<https://github.com/prisma/

GitHub

Prisma

Prisma makes working with databases easy. Prisma has 161 repositories available. Follow their code on GitHub.

Prisma AI Help•5mo ago

studio-core-demo>) and embedding docs. If you need more backend code examples or integration details, the knowledge sources do not provide a full backend implementation, but the frontend integration is as shown above.

Nurul•5mo ago

Hi! Was the bot response helpful?

Prisma AI Help•5mo ago

✅ Great, thanks for letting us know that this solved your question!

Nurul•5mo ago

Thanks for confirming that the response was helpful 🙂

Gaming

Programming

need help with prisma studio core & react-router v7

Did you find this page helpful?