Remote Functions SvelteKit : Partie 1

SvelteKit teste une nouvelle façon de gérer les données. Cela s'appelle les Remote Functions. Cette fonctionnalité permet au client et au serveur de communiquer facilement entre eux.

Que sont les Remote Functions ?

Les Remote Functions vous permettent d'appeler de la logique côté serveur depuis n'importe quelle partie de votre application SvelteKit. Même si vous les appelez depuis le client, le code s'exécute sur le serveur. Cela signifie que vous pouvez accéder en toute sécurité à des bases de données ou à des variables d'environnement privées.

Comment les activer

Vous devez activer le mode expérimental dans votre fichier svelte.config.js :

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

export default config;

Travailler avec les requêtes (Queries)

Vous pouvez créer des fonctions distantes en utilisant des fichiers avec l'extension .remote.js ou .remote.ts. Il en existe quatre types :

  • query (utilisée pour la récupération de données)
  • form
  • command
  • prerender

La fonction query fonctionne comme une requête HTTP GET. Vous pouvez l'importer dans vos composants Svelte et utiliser await pour récupérer vos données.

Exemple d'une requête distante :

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

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

Dans votre composant, vous l'utilisez comme ceci :

{#each await getPosts() as { title, slug }}
    <li>{title}</li>
{/each}

Gestion de l'état

La fonction query fournit trois propriétés utiles pour gérer votre interface utilisateur :

  • loading : true pendant la récupération des données.
  • error : true si la requête échoue.
  • current : contient les données récupérées avec succès.

Fonctionnalités intelligentes

  1. Validation : Vous pouvez utiliser des bibliothèques comme Zod ou Valibot pour valider les arguments passés à votre requête. Cela permet de sécuriser votre serveur.

  2. Gestion des données : SvelteKit utilise devalue pour envoyer les données. Cela prend en charge des types complexes comme Date et Map, ce que le format JSON standard ne peut pas faire facilement.

  3. Déduplication : Si vous appelez la même requête plusieurs fois avec les mêmes arguments, SvelteKit ne l'exécute qu'une seule fois. Cela évite de surcharger la base de données.

  4. Rafraîchissement : Vous pouvez appeler .refresh() sur une requête pour récupérer immédiatement les dernières données du serveur.

Note : Ces fonctionnalités sont expérimentales. La syntaxe pourrait changer lors de futures mises à jour.

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