SvelteKit Remote Functions: Parte 1

SvelteKit sta testando un nuovo modo per gestire i dati. Si chiamano Remote Functions. Questa funzionalità consente al client e al server di comunicare facilmente tra loro.

Cosa sono le Remote Functions?

Le Remote Functions ti permettono di chiamare la logica lato server da qualsiasi parte della tua app SvelteKit. Anche se le chiami dal client, il codice viene eseguito sul server. Ciò significa che puoi accedere ai database o alle variabili d'ambiente private in modo sicuro.

Come abilitarle

Devi attivare la modalità sperimentale nel tuo file svelte.config.js:

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

export default config;

Lavorare con le query

Puoi creare funzioni remote utilizzando file con estensione .remote.js o .remote.ts. Esistono quattro tipi:

  • query (utilizzata per il recupero dei dati)
  • form
  • command
  • prerender

La funzione query funziona come una richiesta HTTP GET. Puoi importarla nei tuoi componenti Svelte e usare await per ottenere i dati.

Esempio di una query remota:

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

Nel tuo componente, la usi in questo modo:

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

  • {title}
    • {/each}

    Gestione dello stato

    La funzione query fornisce tre proprietà utili per gestire la tua UI:

    • loading: True durante il recupero dei dati.
    • error: True se la richiesta fallisce.
    • current: Contiene i dati ottenuti con successo.

    Funzionalità intelligenti

    1. Validazione: Puoi utilizzare librerie come Zod o Valibot per validare gli argomenti passati alla query. Questo mantiene il tuo server al sicuro.

    2. Gestione dei dati: SvelteKit utilizza devalue per inviare i dati. Questo supporta tipi complessi come Date e Map, cosa che il JSON standard non può fare facilmente.

    3. Deduplicazione: Se chiami la stessa query più volte con gli stessi argomenti, SvelteKit la esegue una sola volta. Ciò evita un carico extra sul database.

    4. Aggiornamento: Puoi chiamare .refresh() su una query per recuperare immediatamente i dati più recenti dal server.

    Nota: Queste funzionalità sono sperimentali. La sintassi potrebbe cambiare nei futuri aggiornamenti.

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