SvelteKit Remote Functions: Bahagian 1

SvelteKit sedang menguji cara baharu untuk mengendalikan data. Ia dipanggil Remote Functions. Ciri ini membolehkan klien dan pelayan berkomunikasi antara satu sama lain dengan mudah.

Apakah itu Remote Functions?

Remote Functions membolehkan anda memanggil logik bahagian pelayan (server-side) dari mana-mana bahagian aplikasi SvelteKit anda. Walaupun anda memanggilnya dari klien, kod tersebut dijalankan pada pelayan. Ini bermakna anda boleh mengakses pangkalan data atau pemboleh ubah persekitaran peribadi dengan selamat.

Cara mengaktifkannya

Anda mesti mengaktifkan mod eksperimen dalam fail svelte.config.js anda:

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

export default config;

Bekerja dengan Query

Anda boleh mencipta fungsi jauh dengan menggunakan fail dengan sambungan .remote.js atau .remote.ts. Terdapat empat jenis:

  • query (digunakan untuk mengambil data)
  • form
  • command
  • prerender

Fungsi query berfungsi seperti permintaan HTTP GET. Anda boleh mengimportnya ke dalam komponen Svelte anda dan menggunakan await untuk mendapatkan data anda.

Contoh query jauh:

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

Dalam komponen anda, anda menggunakannya seperti ini:

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

Menguruskan State

Fungsi query menyediakan tiga sifat (properties) yang berguna untuk menguruskan UI anda:

  • loading: true semasa mengambil data.
  • error: true jika permintaan gagal.
  • current: Memegang data yang berjaya diperoleh.

Ciri-ciri Pintar

  1. Pengesahan (Validation): Anda boleh menggunakan pustaka seperti Zod atau Valibot untuk mengesahkan argumen yang dihantar ke query anda. Ini memastikan pelayan anda selamat.

  2. Pengendalian Data: SvelteKit menggunakan devalue untuk menghantar data. Ini menyokong jenis kompleks seperti Date dan Map, yang tidak dapat dilakukan oleh JSON standard dengan mudah.

  3. Penyahduplikasian (Deduplication): Jika anda memanggil query yang sama berulang kali dengan argumen yang sama, SvelteKit hanya akan menjalankannya sekali sahaja. Ini mengelakkan beban pangkalan data yang berlebihan.

  4. Penyegaran (Refreshing): Anda boleh memanggil .refresh() pada query untuk mengambil data terkini daripada pelayan dengan serta-merta.

Nota: Ciri-ciri ini adalah eksperimen. Sintaks mungkin berubah dalam kemas kini masa hadapan.

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