SvelteKit Remote Functions: ഭാഗം 1

ഡാറ്റ കൈകാര്യം ചെയ്യുന്നതിനുള്ള പുതിയൊരു രീതി SvelteKit പരീക്ഷിച്ചുവരികയാണ്. ഇതിനെ Remote Functions എന്ന് വിളിക്കുന്നു. ഈ ഫീച്ചർ ക്ലയന്റും സെർവറും തമ്മിൽ എളുപ്പത്തിൽ ആശയവിനിമയം നടത്താൻ സഹായിക്കുന്നു.

എന്താണ് Remote Functions?

നിങ്ങളുടെ SvelteKit ആപ്പിന്റെ ഏത് ഭാഗത്തുനിന്നും സെർവർ-സൈഡ് ലോജിക് (server-side logic) വിളിക്കാൻ Remote Functions നിങ്ങളെ അനുവദിക്കുന്നു. നിങ്ങൾ അവ ക്ലയന്റിൽ നിന്ന് വിളിക്കുന്നുണ്ടെങ്കിലും, കോഡ് പ്രവർത്തിക്കുന്നത് സെർവറിലാണ്. ഇതിനർത്ഥം നിങ്ങൾക്ക് ഡാറ്റാബേസുകളോ സ്വകാര്യ എൻവയോൺമെന്റ് വേരിയബിളുകളോ (private environment variables) സുരക്ഷിതമായി ഉപയോഗിക്കാം എന്നാണ്.

ഇത് എങ്ങനെ പ്രവർത്തനക്ഷമമാക്കാം

നിങ്ങളുടെ svelte.config.js ഫയലിൽ എക്സ്പിരിമെന്റൽ മോഡ് (experimental mode) ഓൺ ചെയ്യേണ്ടതുണ്ട്:

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)

നിങ്ങളുടെ UI മാനേജ് ചെയ്യുന്നതിനായി query ഫംഗ്ഷൻ മൂന്ന് സഹായകരമായ പ്രോപ്പർട്ടികൾ നൽകുന്നു:

  • loading: ഡാറ്റ ശേഖരിച്ചുകൊണ്ടിരിക്കുമ്പോൾ True ആയിരിക്കും.
  • error: റിക്വസ്റ്റ് പരാജയപ്പെട്ടാൽ True ആയിരിക്കും.
  • current: വിജയകരമായി ലഭിച്ച ഡാറ്റ ഇതിൽ ഉണ്ടായിരിക്കും.

സ്മാർട്ട് ഫീച്ചറുകൾ

  1. Validation: നിങ്ങളുടെ ക്വറിയിലേക്ക് പാസ്സ് ചെയ്യുന്ന ആർഗ്യുമെന്റുകൾ (arguments) പരിശോധിക്കാൻ Zod അല്ലെങ്കിൽ Valibot പോലുള്ള ലൈബ്രറികൾ ഉപയോഗിക്കാം. ഇത് നിങ്ങളുടെ സെർവറിനെ സുരക്ഷിതമായി നിലനിർത്തുന്നു.

  2. Data Handling: ഡാറ്റ അയക്കുന്നതിനായി SvelteKit devalue ഉപയോഗിക്കുന്നു. സാധാരണ JSON-ന് എളുപ്പത്തിൽ ചെയ്യാൻ കഴിയാത്ത Date, Map തുടങ്ങിയ സങ്കീർണ്ണമായ ടൈപ്പുകളെ (complex types) ഇത് പിന്തുണയ്ക്കുന്നു.

  3. Deduplication: ഒരേ ആർഗ്യുമെന്റുകളോടെ ഒരേ ക്വറി തന്നെ പലതവണ വിളിച്ചാൽ, SvelteKit അത് ഒരു തവണ മാത്രമേ പ്രവർത്തിപ്പിക്കുകയുള്ളൂ. ഇത് ഡാറ്റാബേസിലെ അമിത ലോഡ് ഒഴിവാക്കുന്നു.

  4. Refreshing: സെർവറിൽ നിന്ന് ഏറ്റവും പുതിയ ഡാറ്റ ഉടൻ തന്നെ ശേഖരിക്കുന്നതിനായി നിങ്ങൾക്ക് ഒരു ക്വറിയിൽ .refresh() വിളിക്കാവുന്നതാണ്.

ശ്രദ്ധിക്കുക: ഈ ഫീച്ചറുകൾ എക്സ്പിരിമെന്റൽ ആണ്. ഭാവിയിലെ അപ്‌ഡേറ്റുകളിൽ സിന്റാക്സ് (syntax) മാറാൻ സാധ്യതയുണ്ട്.

സ്രോതസ്സ്: https://dev.to/nnutnonn/sveltekit-kaarthamngaankab-remote-function-part-1-4hg4