mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 09:55:06 +03:00
Syed Osama Ali Shah
c11411e2c6
## What kind of change does this PR introduce? Bug fix (documentation) — fixes #43920. ## What is the current behavior? The Drizzle connection example (`db.ts`) at [`apps/docs/content/guides/database/drizzle.mdx`](https://github.com/supabase/supabase/blob/master/apps/docs/content/guides/database/drizzle.mdx) does not compile or run as written: ```ts let connectionString = process.env.DATABASE_URL if (connectionString.includes('postgres:postgres@supabase_db_')) { const url = URL.parse(connectionString)! url.hostname = url.hostname.split('_')[1] connectionString = url.href } // ... export const db = drizzle(client); ``` - `process.env.DATABASE_URL` is `string | undefined`, so `.includes(...)` errors with **"Object is possibly 'undefined'"** — copy-pasting the snippet fails to type-check (the core of #43920). - `URL.parse()` is a very recent static method (Node 22.1+/modern runtimes only) and isn't portable for a docs example. - The final line ends with a stray `;`, which violates this repo's prettier config (`semi: false`). ## What is the new behavior? Three surgical fixes to the snippet: ```ts let connectionString = process.env.DATABASE_URL! if (connectionString.includes('postgres:postgres@supabase_db_')) { const url = new URL(connectionString) url.hostname = url.hostname.split('_')[1] connectionString = url.href } // ... export const db = drizzle(client) ``` - `DATABASE_URL!` — the example assumes the env var is set (it's set in the step above), matching Drizzle's own docs. - `new URL(connectionString)` — standard and portable. - Dropped the trailing semicolon to satisfy `semi: false`. No prose changes; the docker hostname-rewrite logic is unchanged. ## Validation The corrected snippet is **prettier-clean** under this repo's config (`semi: false`, `singleQuote: true`, `printWidth: 100`) — verified idempotent with `prettier --parser typescript`. The change is a single code block in one MDX file. ## Additional context Fixes #43920. The undefined-variable / type-unsafe form was introduced in #40288. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Documentation** * Updated Drizzle database quickstart: added explicit validation for the DATABASE_URL environment variable and improved connection-string parsing to better handle Docker/Supabase hostnames, plus clarified client/DB initialization steps. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
103 lines
2.7 KiB
Plaintext
103 lines
2.7 KiB
Plaintext
---
|
|
id: 'drizzle'
|
|
title: 'Drizzle'
|
|
description: 'Drizzle Quickstart'
|
|
breadcrumb: 'ORM Quickstarts'
|
|
hideToc: true
|
|
---
|
|
|
|
### Connecting with Drizzle
|
|
|
|
[Drizzle ORM](https://github.com/drizzle-team/drizzle-orm) is a TypeScript ORM for SQL databases designed with maximum type safety in mind. You can use their ORM to connect to your database.
|
|
|
|
<Admonition type="note">
|
|
|
|
If you plan on solely using Drizzle instead of the Supabase Data API (PostgREST), you can turn off the latter in the [API Settings](/dashboard/project/_/settings/api).
|
|
|
|
</Admonition>
|
|
<StepHikeCompact>
|
|
|
|
<StepHikeCompact.Step step={1}>
|
|
|
|
<StepHikeCompact.Details title="Install">
|
|
|
|
Install Drizzle and related dependencies.
|
|
|
|
</StepHikeCompact.Details>
|
|
|
|
<StepHikeCompact.Code>
|
|
|
|
```shell
|
|
npm i drizzle-orm postgres
|
|
npm i -D drizzle-kit
|
|
```
|
|
|
|
</StepHikeCompact.Code>
|
|
|
|
</StepHikeCompact.Step>
|
|
|
|
<StepHikeCompact.Step step={2}>
|
|
|
|
<StepHikeCompact.Details title="Create your models">
|
|
|
|
Create a `schema.ts` file and define your models.
|
|
|
|
</StepHikeCompact.Details>
|
|
|
|
<StepHikeCompact.Code>
|
|
|
|
```ts schema.ts
|
|
import { pgTable, serial, text, varchar } from "drizzle-orm/pg-core";
|
|
|
|
export const users = pgTable('users', {
|
|
id: serial('id').primaryKey(),
|
|
fullName: text('full_name'),
|
|
phone: varchar('phone', { length: 256 }),
|
|
});
|
|
```
|
|
|
|
</StepHikeCompact.Code>
|
|
|
|
</StepHikeCompact.Step>
|
|
|
|
<StepHikeCompact.Step step={3}>
|
|
|
|
<StepHikeCompact.Details title="Connect">
|
|
|
|
Connect to your database using the Connection Pooler.
|
|
|
|
From the project [**Connect** panel](/dashboard/project/_?showConnect=true), copy the URI from the "Shared Pooler" option and save it as the `DATABASE_URL` environment variable. Remember to replace the password placeholder with your actual database password.
|
|
|
|
In local SUPABASE_DB_URL require to be adapted to work with Docker resolver
|
|
|
|
</StepHikeCompact.Details>
|
|
|
|
<StepHikeCompact.Code>
|
|
|
|
```ts db.ts
|
|
import 'dotenv/config'
|
|
|
|
import { drizzle } from 'drizzle-orm/postgres-js'
|
|
import postgres from 'postgres'
|
|
|
|
const databaseUrl = process.env.DATABASE_URL
|
|
if (!databaseUrl) throw new Error('DATABASE_URL is not set')
|
|
|
|
let connectionString = databaseUrl
|
|
if (connectionString.includes('postgres:postgres@supabase_db_')) {
|
|
const url = new URL(connectionString)
|
|
url.hostname = url.hostname.split('_')[1]
|
|
connectionString = url.href
|
|
}
|
|
|
|
// Disable prefetch as it is not supported for "Transaction" pool mode
|
|
export const client = postgres(connectionString, { prepare: false })
|
|
export const db = drizzle(client)
|
|
```
|
|
|
|
</StepHikeCompact.Code>
|
|
|
|
</StepHikeCompact.Step>
|
|
|
|
</StepHikeCompact>
|