TypeScript ilə Supabase inteqrasiyası — tam tip təhlükəsizliyi

TypeScript ilə Supabase inteqrasiyası — tam tip təhlükəsizliyi

Salam, developer dostum. Əgər son 2 ildə Bakıda freelance iş görmüsənsə və ya startap layihəsində çalışmısansa, böyük ehtimalla Firebase ilə tanışsan. Amma 2025-26-da oyun dəyişir: Supabase — açıq mənbəli Firebase alternativi — artıq ciddi layihələrdə standart seçimə çevrilib. Xüsusilə TypeScript ilə birlikdə işlədəndə, ortaya möhtəşəm bir developer experience çıxır.

Bu məqalədə sənə Supabase + TypeScript inteqrasiyasını addım-addım göstərəcəm. Söhbət sadəcə npm install-dan getmir — database sxemindən avtomatik tip generasiyası, end-to-end type safety və real layihədə necə istifadə edəcəyindən danışacağıq.

---

Niyə Supabase? Niyə indi?

Supabase PostgreSQL üzərində qurulub. Yəni sən SQL bilirsənsə, artıq Supabase-i 70% bilirsən. Firebase-dən fərqli olaraq:

• Open-source — vendor lock-in yoxdur
• PostgreSQL — relational data, JOIN-lər, index-lər
• Row Level Security (RLS) — database səviyyəsində authorization
• Realtime subscriptions — WebSocket ilə canlı data
• Edge Functions — Deno runtime ilə serverless

Bakıda bir çox şirkət — ABB tech komandasından tutmuş Bravo supermarket-in digital komandasına qədər — PostgreSQL istifadə edir. Supabase bu bilikləri birbaşa frontend-ə gətirir.

Rəqəmlərə baxaq: Supabase-in 2025-ci il statistikasına görə, platformada 1 milyondan çox database yaradılıb. GitHub-da 75,000+ star var. Free tier-də 500 MB database, 5 GB bandwidth verirlər — MVP üçün kifayət edir.

---

Addım 1: Layihəni qur

Əvvəlcə Supabase layihəni supabase.com üzərindən yarat. Sonra lokal mühitdə:

bashKopyala
npm create vite@latest my-app -- --template react-ts
cd my-app
npm install @supabase/supabase-js

Supabase client-i initializasiya et:

typescriptKopyala
// src/lib/supabase.ts
import { createClient } from '@supabase/supabase-js'
import type { Database } from './database.types'

const supabaseUrl = import.meta.env.VITE_SUPABASE_URL
const supabaseKey = import.meta.env.VITE_SUPABASE_ANON_KEY

export const supabase = createClient<Database>(supabaseUrl, supabaseKey)

Diqqət et: createClient<Database> — bu generic type parameter bütün oynun açarıdır. Bu olmadan Supabase client sənə any qaytarır. Bu olanda isə hər sorğunun nəticəsi tiplidir.

---

Addım 2: Database tipləri generasiya et

Burada sehrli hissə gəlir. Supabase CLI sənin database sxemini oxuyub TypeScript tipləri yaradır:

bashKopyala
npm install -D supabase
npx supabase login
npx supabase gen types typescript --project-id YOUR_PROJECT_ID > src/lib/database.types.ts

Tutaq ki, sənin products cədvəlin var:

sqlKopyala
CREATE TABLE products (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  name TEXT NOT NULL,
  price_azn NUMERIC(10,2) NOT NULL,
  category TEXT NOT NULL,
  in_stock BOOLEAN DEFAULT true,
  created_at TIMESTAMPTZ DEFAULT now()
);

CLI bu cədvəldən avtomatik belə bir tip yaradır:

typescriptKopyala
// database.types.ts (avtomatik generasiya olunub)
export interface Database {
  public: {
    Tables: {
      products: {
        Row: {
          id: string
          name: string
          price_azn: number
          category: string
          in_stock: boolean
          created_at: string
        }
        Insert: {
          id?: string
          name: string
          price_azn: number
          category: string
          in_stock?: boolean
          created_at?: string
        }
        Update: {
          id?: string
          name?: string
          price_azn?: number
          category?: string
          in_stock?: boolean
          created_at?: string
        }
      }
    }
  }
}

Row, Insert, Update — üç fərqli tip. Insert-də id optional-dır çünki database özü yaradır. Update-də hamısı optional-dır çünki yalnız dəyişən sahələri göndərirsən. Bu detal runtime xətalarının qarşısını alır.

---

Addım 3: Tipli sorğular yaz

İndi əsl ləzzət başlayır. Sorğu yazanda IDE sənə hər şeyi göstərir:

typescriptKopyala
// Bütün məhsulları çək — nəticə tipli olur
const { data: products, error } = await supabase
  .from('products')        // IDE yalnız mövcud cədvəlləri təklif edir
  .select('name, price_azn, in_stock')  // yalnız mövcud sütunlar
  .eq('category', 'elektronika')        // sütun adı tiplidir
  .order('price_azn', { ascending: true })

// products tipi avtomatik:
// { name: string; price_azn: number; in_stock: boolean }[] | null

if (products) {
  products.forEach(p => {
    console.log(`${p.name}: ${p.price_azn} AZN`)  // ✅ tipli
    console.log(p.description)  // ❌ COMPILE XƏTASI! Bu sütun yoxdur
  })
}

Yeni məhsul əlavə etmək:

typescriptKopyala
const { data, error } = await supabase
  .from('products')
  .insert({
    name: 'Bluetooth qulaqlıq',
    price_azn: 45.99,
    category: 'elektronika'
    // id, in_stock, created_at — optional, göndərmirik
  })
  .select()
  .single()

// Əgər `name` sahəsini unutsan — compile xətası!
// Əgər `price_azn`-ə string yazsam — compile xətası!

Bu end-to-end type safety-dir. Database sxemi → TypeScript tipləri → IDE autocomplete → compile vaxtı yoxlama. Runtime-a xəta çatmır.

---

Addım 4: Custom helper tiplər

Real layihədə əlavə tiplər lazım olacaq:

typescriptKopyala
import type { Database } from './database.types'

// Cədvəl tiplərinə qısayol
type Product = Database['public']['Tables']['products']['Row']
type NewProduct = Database['public']['Tables']['products']['Insert']
type ProductUpdate = Database['public']['Tables']['products']['Update']

// Funksiyalarda istifadə
async function getAffordableProducts(maxPrice: number): Promise<Product[]> {
  const { data, error } = await supabase
    .from('products')
    .select('*')
    .lte('price_azn', maxPrice)
    .eq('in_stock', true)

  if (error) throw new Error(error.message)
  return data
}

// İstifadə
const ucuzMallar = await getAffordableProducts(50)
// ucuzMallar tipi: Product[] — tam tipli, autocomplete işləyir

---

CI/CD-yə inteqrasiya — tiplər həmişə aktual

Ən vacib hissə budur: database sxemini dəyişəndə tiplər köhnəlir. Bunu package.json-a əlavə et:

jsonKopyala
{
  "scripts": {
    "gen:types": "supabase gen types typescript --project-id $PROJECT_ID > src/lib/database.types.ts",
    "build": "npm run gen:types && tsc && vite build"
  }
}

Hər build-dən əvvəl tiplər yenilənir. Əgər database-dən sütun silmisənsə, amma kodda hələ istifadə edirsənsə — build uğursuz olur. Bu yaxşıdır. Production-da xəta olmasından min qat yaxşıdır.

---

Bakı reallığı — niyə bu sənə lazımdır?

Bakıda backend developer maaşı 1500-3500 AZN arasında dəyişir. Fullstack developer isə 2000-4500 AZN qazana bilir. Supabase bilən developer backend yazmadan authentication, database, storage, realtime — hamısını bir SDK ilə həll edir. Bu sənin dəyərini artırır.

Startap ekosistemində — INNOLAND, Barama, və ya SABAH qruplarında — MVP sürətlə çıxarmaq lazımdır. Supabase + TypeScript kombinasiyası buna ideal cavabdır: 2-3 həftəyə production-ready backend.

Freelance bazarda da (Upwork, Toptal) Supabase ilə layihələr artır. 2025-ci ildə Supabase-in axtarış həcmi Firebase-ə yaxınlaşıb. Bu trenddən geridə qalma.

---

Nəticə

TypeScript ilə Supabase inteqrasiyasının əsas üstünlükləri:

• ✅ Database sxemindən avtomatik tip generasiyası — əl ilə tip yazmaq lazım deyil
• ✅ Compile vaxtı xəta tutma — runtime sürprizləri minimuma enir
• ✅ IDE autocomplete — development sürəti artır
• ✅ Row, Insert, Update — hər əməliyyat üçün düzgün tip
• ✅ CI/CD inteqrasiyası — tiplər həmişə aktual qalır

Sualin varsa, şərhlərdə yaz. Növbəti məqalədə Supabase Row Level Security ilə multi-tenant app mövzusunu əhatə edəcəyik.

Kod yaz, tip yaz, xəta azalt. 🚀