وظائف SvelteKit عن بُعد: الجزء الأول

تختبر SvelteKit طريقة جديدة للتعامل مع البيانات، تُسمى Remote Functions. تتيح هذه الميزة للعميل (client) والخادم (server) التواصل مع بعضهما البعض بسهولة.

ما هي الـ Remote Functions؟

تتيح لك الـ Remote Functions استدعاء المنطق البرمجي الخاص بالخادم (server-side logic) من أي جزء في تطبيق SvelteKit الخاص بك. وعلى الرغم من أنك تستدعيها من جانب العميل، إلا أن الكود يتم تنفيذه على الخادم. وهذا يعني أنه يمكنك الوصول إلى قواعد البيانات أو متغيرات البيئة الخاصة (private 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 الخاصة بك واستخدام 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}

إدارة الحالة (Managing State)

توفر وظيفة query ثلاث خصائص مفيدة لإدارة واجهة المستخدم (UI) الخاصة بك:

  • loading: تكون true أثناء جلب البيانات.
  • error: تكون true إذا فشل الطلب.
  • current: تحتوي على البيانات التي تم جلبها بنجاح.

ميزات ذكية

  1. التحقق من الصحة (Validation): يمكنك استخدام مكتبات مثل Zod أو Valibot للتحقق من صحة الوسائط (arguments) الممررة إلى الاستعلام الخاص بك. هذا يحافظ على أمان الخادم.

  2. التعامل مع البيانات (Data Handling): تستخدم SvelteKit مكتبة devalue لإرسال البيانات. يدعم هذا الأنواع المعقدة مثل Date و Map التي لا يستطيع JSON القياسي التعامل معها بسهولة.

  3. منع التكرار (Deduplication): إذا قمت باستدعاء نفس الاستعلام عدة مرات بنفس الوسائط، فستقوم SvelteKit بتشغيله مرة واحدة فقط. هذا يمنع زيادة الحمل على قاعدة البيانات.

  4. التحديث (Refreshing): يمكنك استدعاء .refresh() على الاستعلام لجلب أحدث البيانات من الخادم فوراً.

ملاحظة: هذه الميزات تجريبية. قد تتغير الصيغة (syntax) في التحديثات المستقبلية.

المصدر: https://dev.to/nnutnonn/sveltekit-kaarthamngaankab-remote-function-part-1-4hg4