SvelteKit Remote Functions: Part 1

SvelteKit בוחנת דרך חדשה לניהול נתונים. היא נקראת Remote Functions. תכונה זו מאפשרת לצד הלקוח (client) ולצד השרת (server) לתקשר זה עם זה בקלות.

What are Remote Functions?

Remote Functions מאפשרות לכם לקרוא ללוגיקה בצד השרת מכל חלק באפליקציית ה-SvelteKit שלכם. למרות שאתם קוראים להן מהלקוח, הקוד רץ בשרת. המשמעות היא שניתן לגשת למסדי נתונים או למשתני סביבה פרטיים בצורה בטוחה.

How to enable it

עליכם להפעיל את המצב הניסיוני (experimental mode) בקובץ ה-svelte.config.js שלכם:

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

export default config;

Working with Queries

ניתן ליצור פונקציות מרחוק באמצעות קבצים עם סיומת .remote.js או .remote.ts. ישנם ארבעה סוגים:

  • query (משמשת לשליפת נתונים)
  • form
  • command
  • prerender

פונקציית ה-query עובדת כמו בקשת HTTP GET. ניתן לייבא אותה לרכיבי ה-Svelte שלכם ולהשתמש ב-await כדי לקבל את הנתונים.

Example of a remote query:

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

ברכיב שלכם, תשתמשו בה כך:

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

Managing State

פונקציית ה-query מספקת שלוש תכונות (properties) שימושיות לניהול ה-UI שלכם:

  • loading: True בזמן שליפת הנתונים.
  • error: True אם הבקשה נכשלת.
  • current: מחזיקה את הנתונים שהתקבלו בהצלחה.

Smart Features

  1. Validation: ניתן להשתמש בספריות כמו Zod או Valibot כדי לתקף (validate) ארגומנטים המועברים ל-query שלכם. זה שומר על השרת שלכם בטוח.

  2. Data Handling: SvelteKit משתמשת ב-devalue כדי לשלוח נתונים. זה תומך בטיפוסים מורכבים כמו Date ו-Map, דבר ש-JSON סטנדרטי לא יכול לעשות בקלות.

  3. Deduplication: אם אתם קוראים לאותה שאילתה מספר פעמים עם אותם ארגומנטים, SvelteKit תריץ אותה רק פעם אחת. זה מונע עומס מיותר על מסד הנתונים.

  4. Refreshing: ניתן לקרוא ל-.refresh() על שאילתה כדי לשלוף את הנתונים העדכניים ביותר מהשרת באופן מיידי.

Note: תכונות אלו הן ניסיוניות. התחביר (syntax) עשוי להשתנות בעדכונים עתידיים.

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