Jak napojit aplikaci na databázi přes API.

Když začínáš stavět aplikaci, dřív nebo později narazíš na jednu otázku: kde data vlastně bydlí a jak se k nim dostanu? Ukážu ti, jak aplikace mluví s databází přes API, co se děje pod kapotou a jak to udělat tak, aby ti to za půl roku nevybuchlo. Vše z praxe, ne z učebnice.

Co je vlastně API mezi aplikací a databází

Aplikace nikdy nesahá do databáze přímo. Mezi nimi stojí vrstva, které se říká API (aplikační rozhraní). Je to prostředník, který přijímá požadavky typu "dej mi seznam objednávek" a vrací data zpátky v podobě, které aplikace rozumí, nejčastěji jako JSON.

Tahle vrstva má dva důvody existence. Za prvé bezpečnost: tvoje databáze nesmí být přímo vystavená na internet, jinak si do ní kdokoliv sáhne. Za druhé pořádek: API definuje, co se smí a co ne, takže se v datech neudělá nepořádek.

REST API: nejčastější způsob, jak data tečou

Drtivá většina aplikací používá REST. Funguje to tak, že každé akci odpovídá HTTP metoda:

• GET načte data (přečti seznam, načti detail).
• POST vytvoří nový záznam.
• PATCH nebo PUT upraví existující záznam.
• DELETE smaže záznam.

Když ve frontendu klikneš na tlačítko "Uložit", aplikace pošle POST požadavek na adresu typu /api/objednavky, server data zapíše do databáze a vrátí odpověď. Celý ten kolotoč proběhne za pár desítek milisekund.

První napojení: klíč, adresa, dotaz

Abys data získal, potřebuješ tři věci: adresu API, přístupový klíč a samotný dotaz. Pokud používáš hotovou databázovou službu jako Supabase, dostaneš API hotové rovnou nad svými tabulkami. Takhle vypadá načtení dat v JavaScriptu:

const res = await fetch(
  "https://tvuj-projekt.supabase.co/rest/v1/objednavky?select=*&stav=eq.nova",
  {
    headers: {
      apikey: process.env.SUPABASE_ANON_KEY,
      Authorization: `Bearer ${process.env.SUPABASE_ANON_KEY}`
    }
  }
);
const objednavky = await res.json();

Všimni si dvou věcí. Klíč nikdy nepiš natvrdo do kódu, vždy ho ber z proměnné prostředí (process.env). A dotaz "stav=eq.nova" filtruje rovnou v databázi, takže ti po síti nepoletí data, která stejně nepotřebuješ.

Klientská knihovna je často pohodlnější

Ruční skládání URL je rychle únavné. Většina služeb proto nabízí knihovnu, která za tebe API obalí. Stejný dotaz přes Supabase klienta vypadá čitelněji:

import { createClient } from "@supabase/supabase-js";

const db = createClient(url, anonKey);

const { data, error } = await db
  .from("objednavky")
  .select("id, castka, stav")
  .eq("stav", "nova")
  .order("created_at", { ascending: false })
  .limit(20);

Knihovna se postará o hlavičky, ošetří chyby a vrátí ti rovnou objekt s daty nebo chybou. Pokud teprve začínáš s databázemi a SQL, mrkni na úvod do SQL pro vibe codery, kde vysvětluji základní dotazy od nuly.

Zápis dat: vytvoření a úprava

Čtení je polovina příběhu, druhá je zápis. Když uživatel odešle formulář, pošleš data přes POST a databáze vrátí vytvořený záznam i s nově přiděleným id. Úprava existujícího záznamu funguje obdobně přes PATCH, jen musíš vždy říct, který řádek měníš:

// vytvoření nové objednávky
const { data, error } = await db
  .from("objednavky")
  .insert({ castka: 1290, stav: "nova" })
  .select()
  .single();

// úprava existující objednávky podle id
await db
  .from("objednavky")
  .update({ stav: "zaplaceno" })
  .eq("id", data.id);

U zápisu vždy ošetři chybu (proměnná error). Když databáze odmítne zápis, třeba kvůli pravidlu přístupu nebo neplatné hodnotě, chceš o tom vědět a dát uživateli srozumitelnou hlášku, ne tichý prázdný formulář. Pokud řešíš, jakou databázi vlastně zvolit, srovnávám možnosti v článku Postgres, SQLite a Supabase.

Bezpečnost: kde lidé nejčastěji chybují

Napojení na databázi je místo, kde se dělají nejdražší chyby. Pár pravidel, která dodržuju u každého projektu:

• Tajný klíč patří jen na server. Service role klíč, který obejde všechna pravidla, nikdy nesmí skončit ve frontendu ani v gitu.
• Zapni pravidla přístupu na úrovni databáze. V Postgresu se tomu říká row level security. Zajistí, že uživatel A nikdy nevidí data uživatele B. Detail rozebírám v článku row level security vysvětleno.
• Validuj vstupy. Než cokoliv zapíšeš, ověř, že přišla čísla tam, kde mají být čísla, a že nikdo neposlal pole, které měnit nesmí.
• Filtruj v databázi, ne v aplikaci. Načítat všechno a třídit až v prohlížeči je pomalé a nebezpečné.

Synchronní vs asynchronní: nezablokuj appku

Volání databáze trvá. Ne dlouho, ale dost na to, aby se aplikace neměla zaseknout a čekat. Proto je každý dotaz asynchronní (klíčové slovo await v ukázkách výše). Aplikace pošle požadavek, mezitím dělá jiné věci a zareaguje, až data dorazí. Vždy ošetři i situaci, kdy databáze neodpoví nebo vrátí chybu, jinak uživateli zamrzne obrazovka bez vysvětlení.

S tím souvisí stavy rozhraní. Dobře napojená aplikace ukazuje, že se data načítají (loading), že se povedla nebo nepovedla. Když uživatel klikne na uložit a nic se neděje, neví, jestli má kliknout znovu. Pár vteřin práce navíc na ošetření stavů dělá rozdíl mezi appkou, která působí spolehlivě, a tou, které lidé nevěří.

Srovnání tří přístupů k napojení

Časté dotazy

Můžu se připojit k databázi přímo z prohlížeče?

Ne, alespoň ne k té privilegované části. Z prohlížeče smí jít jen volání přes API s veřejným klíčem, který je omezený pravidly přístupu. Přímé připojení s plnými právy patří výhradně na server.

Jaký je rozdíl mezi REST a GraphQL?

REST má pro každý typ dat vlastní adresu a vrací předem dané pole sloupců. GraphQL má jednu adresu a ty si v dotazu řekneš přesně, co chceš. Pro většinu projektů je REST jednodušší a úplně stačí.

Co když je dotaz pomalý?

Nejčastější příčina je chybějící index na sloupci, podle kterého filtruješ nebo řadíš. Druhá je načítání příliš mnoha řádků najednou. Přidej index a stránkuj výsledky po dávkách.

Kde s tím začít

Napojení aplikace na databázi není magie, je to jen disciplinovaná práce s API, klíči a pravidly. Když chceš mít jistotu, že je vrstva mezi aplikací a daty bezpečná a rychlá od prvního dne, rád ti s návrhem pomůžu. Stavím aplikace na míru i bezpečné API a celé to umím nastavit tak, aby to zvládlo růst. Ozvi se přes kontakt a probereme tvůj projekt.