توابع از راه دور (Remote Functions) در SvelteKit: بخش اول

SvelteKit در حال آزمایش روش جدیدی برای مدیریت داده‌ها است. این قابلیت Remote Functions نامیده می‌شود. این ویژگی به کلاینت و سرور اجازه می‌دهد تا به راحتی با یکدیگر ارتباط برقرار کنند.

Remote Functions چیست؟

Remote Functions به شما اجازه می‌دهند تا از هر بخش از اپلیکیشن SvelteKit خود، منطق سمت سرور (server-side logic) را فراخوانی کنید. با وجود اینکه آن‌ها را از سمت کلاینت فراخوانی می‌کنید، اما کد در سمت سرور اجرا می‌شود. این یعنی می‌توانید با امنیت کامل به پایگاه‌های داده یا متغیرهای محیطی (environment variables) خصوصی دسترسی داشته باشید.

نحوه فعال‌سازی

باید حالت آزمایشی (experimental mode) را در فایل svelte.config.js خود فعال کنید:

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

export default config;

کار با کوئری‌ها (Queries)

شما می‌توانید با استفاده از فایل‌هایی با پسوند .remote.js یا .remote.ts توابع از راه دور ایجاد کنید. چهار نوع مختلف وجود دارد:

• query (برای واکشی داده‌ها استفاده می‌شود)
• form
• command
• prerender

تابع query مانند یک درخواست HTTP GET عمل می‌کند. شما می‌توانید آن را در کامپوننت‌های Svelte خود وارد (import) کرده و از await برای دریافت داده‌ها استفاده کنید.

نمونه‌ای از یک کوئری از راه دور:

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}

مدیریت وضعیت (State)

تابع query سه ویژگی (property) کاربردی برای مدیریت رابط کاربری (UI) شما فراهم می‌کند:

• loading: زمانی که داده‌ها در حال واکشی هستند، مقدار آن true است.
• error: اگر درخواست با خطا مواجه شود، مقدار آن true است.
• current: داده‌های دریافت شده با موفقیت را نگه می‌دارد.

ویژگی‌های هوشمند

1. اعتبارسنجی (Validation): می‌توانید از کتابخانه‌هایی مانند Zod یا Valibot برای اعتبارسنجی آرگومان‌های ارسالی به کوئری خود استفاده کنید. این کار امنیت سرور شما را حفظ می‌کند.

2. مدیریت داده‌ها: SvelteKit از devalue برای ارسال داده‌ها استفاده می‌کند. این ابزار از انواع داده‌های پیچیده مانند Date و Map پشتیبانی می‌کند، کاری که JSON استاندارد به راحتی نمی‌تواند انجام دهد.

3. حذف موارد تکراری (Deduplication): اگر یک کوئری یکسان را چندین بار با آرگومان‌های یکسان فراخوانی کنید، SvelteKit آن را تنها یک بار اجرا می‌کند. این کار از بار اضافی روی پایگاه داده جلوگیری می‌کند.

4. به‌روزرسانی (Refreshing): می‌توانید متد .refresh() را روی یک کوئری فراخوانی کنید تا بلافاصله آخرین داده‌ها را از سرور دریافت کنید.

نکته: این ویژگی‌ها آزمایشی هستند. ممکن است نحو (syntax) آن‌ها در به‌روزرسانی‌های آینده تغییر کند.

منبع: https://dev.to/nnutnonn/sveltekit-kaarthamngaankab-remote-function-part-1-4hg4