Remote Functions SvelteKit: Bagian 1

SvelteKit sedang menguji cara baru untuk menangani data. Fitur ini disebut Remote Functions. Fitur ini memungkinkan klien dan server untuk berkomunikasi satu sama lain dengan mudah.

Apa itu Remote Functions?

Remote Functions memungkinkan Anda memanggil logika sisi server dari bagian mana pun di aplikasi SvelteKit Anda. Meskipun Anda memanggilnya dari klien, kode tersebut berjalan di server. Ini berarti Anda dapat mengakses database atau variabel lingkungan pribadi dengan aman.

Cara mengaktifkannya

Anda harus mengaktifkan mode eksperimental di file svelte.config.js Anda:

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

export default config;

Bekerja dengan Query

Anda dapat membuat fungsi remote dengan menggunakan file dengan ekstensi .remote.js atau .remote.ts. Ada empat jenis:

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

Fungsi query bekerja seperti permintaan HTTP GET. Anda dapat mengimpornya ke dalam komponen Svelte Anda dan menggunakan await untuk mendapatkan data Anda.

Contoh query remote:

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

Di komponen Anda, Anda menggunakannya seperti ini:

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

Mengelola State

Fungsi query menyediakan tiga properti bermanfaat untuk mengelola UI Anda:

  • loading: Bernilai true saat sedang mengambil data.
  • error: Bernilai true jika permintaan gagal.
  • current: Menyimpan data yang berhasil diambil.

Fitur Cerdas

  1. Validasi: Anda dapat menggunakan pustaka seperti Zod atau Valibot untuk memvalidasi argumen yang dikirim ke query Anda. Ini menjaga keamanan server Anda.

  2. Penanganan Data: SvelteKit menggunakan devalue untuk mengirim data. Ini mendukung tipe data kompleks seperti Date dan Map, yang tidak dapat dilakukan dengan mudah oleh JSON standar.

  3. Deduplikasi: Jika Anda memanggil query yang sama berkali-kali dengan argumen yang sama, SvelteKit hanya akan menjalankannya satu kali. Ini mencegah beban database tambahan.

  4. Penyegaran: Anda dapat memanggil .refresh() pada sebuah query untuk segera mengambil data terbaru dari server.

Catatan: Fitur-fitur ini bersifat eksperimental. Sintaksnya mungkin berubah pada pembaruan di masa mendatang.

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