SvelteKit Remote Functions: Deel 1

SvelteKit test een nieuwe manier om met data om te gaan. Dit wordt Remote Functions genoemd. Deze functie zorgt ervoor dat de client en de server gemakkelijk met elkaar kunnen communiceren.

Wat zijn Remote Functions?

Met Remote Functions kun je server-side logica aanroepen vanuit elk deel van je SvelteKit-app. Hoewel je ze vanuit de client aanroept, wordt de code op de server uitgevoerd. Dit betekent dat je veilig toegang hebt tot databases of privé-omgevingsvariabelen.

Hoe je het inschakelt

Je moet de experimentele modus inschakelen in je svelte.config.js-bestand:

const config = { kit: { experimental: { remoteFunctions: true } }, compilerOptions: { experimental: { async: true } } };

export default config;

Werken met Queries

Je kunt remote functions maken door bestanden te gebruiken met de extensie .remote.js of .remote.ts. Er zijn vier types:

  • query (gebruikt voor het ophalen van data)
  • form
  • command
  • prerender

De query-functie werkt als een HTTP GET-verzoek. Je kunt deze importeren in je Svelte-componenten en await gebruiken om je data op te halen.

Voorbeeld van een remote query:

import { query } from '$app/server'; import * as db from '$lib/server/database';

export const getPosts = query(async () => { const posts = await db.sqlSELECT title, slug FROM post; return posts; });

In je component gebruik je het als volgt:

{#each await getPosts() as { title, slug }}

  • {title}
    • {/each}

    State beheren

    De query-functie biedt drie handige eigenschappen om je UI te beheren:

    • loading: True terwijl de data wordt opgehaald.
    • error: True als het verzoek mislukt.
    • current: Bevat de succesvol opgehaalde data.

    Slimme functies

    1. Validatie: Je kunt bibliotheken zoals Zod of Valibot gebruiken om de argumenten die aan je query worden doorgegeven te valideren. Dit houdt je server veilig.

    2. Dataverwerking: SvelteKit gebruikt devalue om data te verzenden. Dit ondersteunt complexe types zoals Date en Map, wat met standaard JSON niet gemakkelijk kan.

    3. Deduplicatie: Als je dezelfde query meerdere keren aanroept met dezelfde argumenten, voert SvelteKit deze slechts één keer uit. Dit voorkomt extra belasting van de database.

    4. Vernieuwen: Je kunt .refresh() aanroepen op een query om onmiddellijk de nieuwste data van de server op te halen.

    Let op: Deze functies zijn experimenteel. De syntaxis kan veranderen in toekomstige updates.

    Bron: https://dev.to/nnutnonn/sveltekit-kaarthamngaankab-remote-function-part-1-4hg4