TypeScript Patterns for Supabase Applications

Generated types workflow, type-safe database queries, discriminated unions for state, and generic CRUD helpers.

Explore more rules and knowledge

BeforeMerge offers hundreds of code review rules, guides, and detection patterns to help your team ship better code.

TypeScript Patterns for Supabase

Generated Types

Generate types from your Supabase schema:

npx supabase gen types typescript --project-id $PROJECT_ID > database.types.ts

Use in your client:

import { Database } from "./database.types"
 
const supabase = createServerClient<Database>(url, key, { cookies })

Now all queries are type-safe:

const { data } = await supabase.from("rules").select("title, slug, impact")
// data type: { title: string; slug: string; impact: string }[]

Helper Types

type Tables = Database["public"]["Tables"]
type Rule = Tables["rule"]["Row"]
type RuleInsert = Tables["rule"]["Insert"]
type RuleUpdate = Tables["rule"]["Update"]

Discriminated Unions for State

type ScanState =
  | { status: "idle" }
  | { status: "scanning"; progress: number }
  | { status: "complete"; findings: Finding[] }
  | { status: "error"; error: string }