SvelteKit Remote Functions: Parte 1

SvelteKit está probando una nueva forma de manejar datos. Se llama Remote Functions. Esta característica permite que el cliente y el servidor se comuniquen entre sí fácilmente.

¿Qué son las Remote Functions?

Las Remote Functions te permiten llamar a la lógica del lado del servidor desde cualquier parte de tu aplicación SvelteKit. Aunque las llames desde el cliente, el código se ejecuta en el servidor. Esto significa que puedes acceder a bases de datos o variables de entorno privadas de forma segura.

Cómo habilitarlas

Debes activar el modo experimental en tu archivo svelte.config.js:

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

export default config;

Trabajando con Queries

Puedes crear funciones remotas utilizando archivos con la extensión .remote.js o .remote.ts. Existen cuatro tipos:

  • query (utilizada para obtener datos)
  • form
  • command
  • prerender

La función query funciona como una solicitud HTTP GET. Puedes importarla en tus componentes Svelte y usar await para obtener tus datos.

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

En tu componente, la usas de esta manera:

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

  • {title}
    • {/each}

    Gestión de estado

    La función query proporciona tres propiedades útiles para gestionar tu interfaz de usuario:

    • loading: true mientras se obtienen los datos.
    • error: true si la solicitud falla.
    • current: contiene los datos obtenidos con éxito.

    Funciones inteligentes

    1. Validación: Puedes usar librerías como Zod o Valibot para validar los argumentos pasados a tu query. Esto mantiene tu servidor seguro.

    2. Manejo de datos: SvelteKit utiliza devalue para enviar datos. Esto permite tipos complejos como Date y Map, algo que el JSON estándar no puede hacer fácilmente.

    3. Deduplicación: Si llamas a la misma query varias veces con los mismos argumentos, SvelteKit solo la ejecuta una vez. Esto evita una carga adicional en la base de datos.

    4. Actualización: Puedes llamar a .refresh() en una query para obtener los datos más recientes del servidor de inmediato.

    Nota: Estas funciones son experimentales. La sintaxis podría cambiar en futuras actualizaciones.

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