SvelteKit Remote Functions: Teil 1

SvelteKit testet eine neue Art der Datenverarbeitung. Sie heißt Remote Functions. Dieses Feature ermöglicht es Client und Server, einfach miteinander zu kommunizieren.

Was sind Remote Functions?

Remote Functions ermöglichen es Ihnen, serverseitige Logik aus jedem beliebigen Teil Ihrer SvelteKit-App aufzurufen. Obwohl Sie diese vom Client aus aufrufen, wird der Code auf dem Server ausgeführt. Das bedeutet, dass Sie sicher auf Datenbanken oder private Umgebungsvariablen zugreifen können.

So aktivieren Sie es

Sie müssen den experimentellen Modus in Ihrer svelte.config.js-Datei aktivieren:

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

export default config;

Arbeiten mit Queries

Sie können Remote Functions erstellen, indem Sie Dateien mit der Endung .remote.js oder .remote.ts verwenden. Es gibt vier Typen:

  • query (wird zum Abrufen von Daten verwendet)
  • form
  • command
  • prerender

Die query-Funktion arbeitet wie eine HTTP-GET-Anfrage. Sie können sie in Ihre Svelte-Komponenten importieren und await verwenden, um Ihre Daten abzurufen.

Beispiel für eine 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 Ihrer Komponente verwenden Sie sie so:

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

  • {title}
    • {/each}

    State Management

    Die query-Funktion bietet drei hilfreiche Eigenschaften zur Verwaltung Ihrer UI:

    • loading: True, während Daten abgerufen werden.
    • error: True, wenn die Anfrage fehlschlägt.
    • current: Enthält die erfolgreich abgerufenen Daten.

    Intelligente Funktionen

    1. Validierung: Sie können Bibliotheken wie Zod oder Valibot verwenden, um die an Ihre Query übergebenen Argumente zu validieren. Dies hält Ihren Server sicher.

    2. Datenverarbeitung: SvelteKit verwendet devalue, um Daten zu senden. Dies unterstützt komplexe Typen wie Date und Map, was mit Standard-JSON nicht ohne Weiteres möglich ist.

    3. Deduplizierung: Wenn Sie dieselbe Query mehrmals mit denselben Argumenten aufrufen, führt SvelteKit sie nur einmal aus. Dies verhindert eine unnötige Datenbanklast.

    4. Aktualisierung: Sie können .refresh() auf einer Query aufrufen, um sofort die neuesten Daten vom Server abzurufen.

    Hinweis: Diese Funktionen sind experimentell. Die Syntax kann sich in zukünftigen Updates ändern.

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