Je eerste edge function in Lovable Cloud — zonder pijn
Edge functions klinken enger dan ze zijn. In tien minuten heb je er één draaien die iets nuttigs doet, inclusief error handling en veilige API-keys.
Maarten Vermeulen
Bijdrager · lvbl.nl
Waarom edge en niet gewoon client-side? Simpel: als je API-key in de browser staat, kan iedereen 'm zien via de developer tools. Edge functions draaien serverside met environment variables die de client nooit ziet. Dat is de reden dat elk serieus product z'n externe API-calls via een backend routeert, en niet direct vanuit de React-component.
Stap één: de function aanmaken
In een TanStack Start Lovable-project maak je een server function met `createServerFn` uit `@tanstack/react-start`. Vraag Lovable: "Maak een server function 'summarize' die een tekst ontvangt, deze naar Google Gemini via de AI Gateway stuurt, en de samenvatting teruggeeft." De agent zet het bestand op in `src/lib/summarize.functions.ts`, inclusief input-validatie met Zod.
Stap twee: de AI-key
Lovable's AI Gateway is standaard beschikbaar in elke Cloud-project — je hoeft geen eigen API-key toe te voegen. De env-variabele `LOVABLE_API_KEY` staat er automatisch. Voor externe providers (OpenAI direct, Anthropic direct) voeg je de key toe via de secrets-manager, nooit in code.
Stap drie: aanroepen vanuit de UI
In je component gebruik je `useServerFn(summarize)` en roept 'm aan met de input. TanStack Query erbij voor loading- en errorstates. Vijf regels, klaar. De agent kan die glue-code in één prompt genereren.
Stap vier: error handling
Het onderdeel dat mensen vaak vergeten. Wat als de AI-gateway een 429 (rate limit) teruggeeft? Wat als de input te lang is? Wat als de netwerkverbinding wegvalt? Vraag Lovable expliciet: "voeg try/catch toe en geef betekenisvolle foutmeldingen terug". De gateway geeft nette status-codes; jij vertaalt ze naar Nederlandse tekst voor de gebruiker.
Stap vijf: rate-limiting
Standaard heeft Cloud geen ingebouwde rate-limits per gebruiker. Als je een publieke endpoint bouwt (bijv. een demo), voeg je zelf een simpele limiter toe — bijvoorbeeld met een tabel `rate_limits` waar je per user_id of IP-adres de laatste calls telt. Voor een intern MVP kun je dit overslaan.
Aan het einde heb je een minipatroon dat je in élk project hergebruikt. Dezelfde structuur past voor: OCR op geüploade documenten, embeddings genereren, Stripe-calls doen die niet via de connector gaan, of een cron-job die dagelijks je database opschoont. Edge functions zijn het lijmwerk van serieuze apps.
Vond je dit fijn?
Geef een hartje en deel het met een andere Lovable-fan.