SvelteKit Remote Functions: ਭਾਗ 1
SvelteKit ਡੇਟਾ ਨੂੰ ਸੰਭਾਲਣ ਦਾ ਇੱਕ ਨਵਾਂ ਤਰੀਕਾ ਟੈਸਟ ਕਰ ਰਿਹਾ ਹੈ। ਇਸਨੂੰ Remote Functions ਕਿਹਾ ਜਾਂਦਾ ਹੈ। ਇਹ ਫੀਚਰ ਕਲਾਇੰਟ ਅਤੇ ਸਰਵਰ ਨੂੰ ਇੱਕ ਦੂਜੇ ਨਾਲ ਆਸਾਨੀ ਨਾਲ ਗੱਲਬਾਤ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ।
Remote Functions ਕੀ ਹਨ?
Remote Functions ਤੁਹਾਨੂੰ ਤੁਹਾਡੀ SvelteKit ਐਪ ਦੇ ਕਿਸੇ ਵੀ ਹਿੱਸੇ ਤੋਂ ਸਰਵਰ-ਸਾਈਡ ਲੌਜਿਕ (logic) ਨੂੰ ਕਾਲ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦੇ ਹਨ। ਭਾਵੇਂ ਤੁਸੀਂ ਉਹਨਾਂ ਨੂੰ ਕਲਾਇੰਟ ਤੋਂ ਕਾਲ ਕਰਦੇ ਹੋ, ਪਰ ਕੋਡ ਸਰਵਰ 'ਤੇ ਚੱਲਦਾ ਹੈ। ਇਸਦਾ ਮਤਲਬ ਹੈ ਕਿ ਤੁਸੀਂ ਡੇਟਾਬੇਸ ਜਾਂ ਪ੍ਰਾਈਵੇਟ ਐਨਵਾਇਰਨਮੈਂਟ ਵੇਰੀਏਬਲਜ਼ (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 ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ।
ਇੱਕ ਰਿਮੋਟ ਕੁਐਰੀ (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}
ਸਟੇਟ (State) ਦਾ ਪ੍ਰਬੰਧਨ ਕਰਨਾ
query ਫੰਕਸ਼ਨ ਤੁਹਾਡੇ UI ਨੂੰ ਪ੍ਰਬੰਧਿਤ ਕਰਨ ਲਈ ਤਿੰਨ ਮਦਦਗਾਰ ਪ੍ਰੋਪਰਟੀਜ਼ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ:
- loading: ਡਾਟਾ ਫੈਚ ਕਰਦੇ ਸਮੇਂ True।
- error: ਜੇਕਰ ਰਿਕਵੈਸਟ ਫੇਲ ਹੋ ਜਾਂਦੀ ਹੈ ਤਾਂ True।
- current: ਸਫਲ ਡਾਟਾ ਨੂੰ ਰੱਖਦਾ ਹੈ।
Smart Features
Validation: ਤੁਸੀਂ ਆਪਣੀ ਕੁਐਰੀ ਨੂੰ ਭੇਜੇ ਗਏ ਆਰਗੂਮੈਂਟਸ (arguments) ਨੂੰ ਵੈਲੀਡੇਟ ਕਰਨ ਲਈ Zod ਜਾਂ Valibot ਵਰਗੀਆਂ ਲਾਇਬ੍ਰੇਰੀਆਂ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ। ਇਹ ਤੁਹਾਡੇ ਸਰਵਰ ਨੂੰ ਸੁਰੱਖਿਅਤ ਰੱਖਦਾ ਹੈ।
Data Handling: SvelteKit ਡਾਟਾ ਭੇਜਣ ਲਈ devalue ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ। ਇਹ Date ਅਤੇ Map ਵਰਗੇ ਗੁੰਝਲਦਾਰ ਟਾਈਪਸ (complex types) ਦਾ ਸਮਰਥਨ ਕਰਦਾ ਹੈ, ਜੋ ਕਿ ਸਟੈਂਡਰਡ JSON ਆਸਾਨੀ ਨਾਲ ਨਹੀਂ ਕਰ ਸਕਦਾ।
Deduplication: ਜੇਕਰ ਤੁਸੀਂ ਇੱਕੋ ਆਰਗੂਮੈਂਟਸ ਨਾਲ ਇੱਕੋ ਕੁਐਰੀ ਨੂੰ ਕਈ ਵਾਰ ਕਾਲ ਕਰਦੇ ਹੋ, ਤਾਂ SvelteKit ਇਸਨੂੰ ਸਿਰਫ਼ ਇੱਕ ਵਾਰ ਚਲਾਉਂਦਾ ਹੈ। ਇਹ ਡੇਟਾਬੇਸ 'ਤੇ ਵਾਧੂ ਲੋਡ ਨੂੰ ਰੋਕਦਾ ਹੈ।
Refreshing: ਤੁਸੀਂ ਸਰਵਰ ਤੋਂ ਤੁਰੰਤ ਤਾਜ਼ਾ ਡਾਟਾ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ ਕੁਐਰੀ 'ਤੇ .refresh() ਕਾਲ ਕਰ ਸਕਦੇ ਹੋ।
ਨੋਟ: ਇਹ ਫੀਚਰਸ ਐਕਸਪੈਰੀਮੈਂਟਲ ਹਨ। ਭਵਿੱਖ ਦੇ ਅਪਡੇਟਸ ਵਿੱਚ ਸਿੰਟੈਕਸ (syntax) ਬਦਲ ਸਕਦਾ ਹੈ।
ਸਰੋਤ: https://dev.to/nnutnonn/sveltekit-kaarthamngaankab-remote-function-part-1-4hg4