SvelteKit Remote Functions: Część 1

SvelteKit testuje nowy sposób obsługi danych. Nazywa się on Remote Functions. Funkcja ta umożliwia łatwą komunikację między klientem a serwerem.

Czym są Remote Functions?

Remote Functions pozwalają wywoływać logikę po stronie serwera z dowolnej części aplikacji SvelteKit. Mimo że wywołujesz je z poziomu klienta, kod jest wykonywany na serwerze. Oznacza to, że możesz bezpiecznie uzyskać dostęp do baz danych lub prywatnych zmiennych środowiskowych.

Jak je włączyć

Musisz włączyć tryb eksperymentalny w pliku svelte.config.js:

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

export default config;

Praca z zapytaniami

Funkcje zdalne możesz tworzyć, używając plików z rozszerzeniem .remote.js lub .remote.ts. Istnieją cztery typy:

  • query (używane do pobierania danych)
  • form
  • command
  • prerender

Funkcja query działa jak żądanie HTTP GET. Możesz ją zaimportować do swoich komponentów Svelte i użyć await, aby pobrać dane.

Przykład zdalnego zapytania:

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; });

W swoim komponencie używasz jej w następujący sposób:

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

  • {title}
    • {/each}

    Zarządzanie stanem

    Funkcja query udostępnia trzy przydatne właściwości do zarządzania interfejsem użytkownika:

    • loading: true podczas pobierania danych.
    • error: true, jeśli żądanie zakończy się niepowodzeniem.
    • current: przechowuje pomyślnie pobrane dane.

    Inteligentne funkcje

    1. Walidacja: Możesz używać bibliotek takich jak Zod lub Valibot do walidacji argumentów przekazywanych do zapytania. Dzięki temu Twój serwer pozostaje bezpieczny.

    2. Obsługa danych: SvelteKit używa devalue do przesyłania danych. Obsługuje to złożone typy, takie jak Date i Map, czego standardowy JSON nie potrafi zrobić w łatwy sposób.

    3. Deduplikacja: Jeśli wywołasz to samo zapytanie wielokrotnie z tymi samymi argumentami, SvelteKit wykona je tylko raz. Zapobiega to dodatkowemu obciążeniu bazy danych.

    4. Odświeżanie: Możesz wywołać .refresh() na zapytaniu, aby natychmiast pobrać najnowsze dane z serwera.

    Uwaga: Funkcje te są eksperymentalne. Składnia może ulec zmianie w przyszłych aktualizacjach.

    Źródło: https://dev.to/nnutnonn/sveltekit-kaarthamngaankab-remote-function-part-1-4hg4