SvelteKit Remote Functions: Part 1

SvelteKit กำลังทดสอบวิธีการจัดการข้อมูลแบบใหม่ ซึ่งเรียกว่า Remote Functions ฟีเจอร์นี้ช่วยให้ client และ server สามารถสื่อสารกันได้อย่างง่ายดาย

Remote Functions คืออะไร?

Remote Functions ช่วยให้คุณสามารถเรียกใช้ logic ฝั่ง server จากส่วนใดก็ได้ในแอป SvelteKit ของคุณ แม้ว่าคุณจะเรียกใช้งานจากฝั่ง client แต่โค้ดจะทำงานบน server ซึ่งหมายความว่าคุณสามารถเข้าถึงฐานข้อมูลหรือ environment variables ที่เป็นความลับได้อย่างปลอดภัย

วิธีเปิดใช้งาน

คุณต้องเปิดโหมด experimental ในไฟล์ svelte.config.js ของคุณ:

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

export default config;

การทำงานกับ Queries

คุณสามารถสร้าง remote functions ได้โดยใช้ไฟล์ที่มีนามสกุล .remote.js หรือ .remote.ts ซึ่งมีอยู่ 4 ประเภท:

  • query (ใช้สำหรับดึงข้อมูล)
  • form
  • command
  • prerender

ฟังก์ชัน query ทำงานเหมือนกับ HTTP GET request คุณสามารถ import เข้าไปใน Svelte components และใช้ 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;
});

ใน component ของคุณ คุณสามารถใช้งานได้ดังนี้:

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

การจัดการ State

ฟังก์ชัน query มี property ที่มีประโยชน์ 3 อย่างในการจัดการ UI ของคุณ:

  • loading: เป็น true ในขณะที่กำลังดึงข้อมูล
  • error: เป็น true หากการร้องขอ (request) ล้มเหลว
  • current: เก็บข้อมูลที่ดึงมาสำเร็จ

ฟีเจอร์อัจฉริยะ

  1. Validation: คุณสามารถใช้ library อย่าง Zod หรือ Valibot เพื่อตรวจสอบความถูกต้อง (validate) ของ arguments ที่ส่งไปยัง query ของคุณ ซึ่งจะช่วยรักษาความปลอดภัยให้กับ server ของคุณ

  2. Data Handling: SvelteKit ใช้ devalue ในการส่งข้อมูล ซึ่งรองรับข้อมูลประเภทที่ซับซ้อน เช่น Date และ Map ซึ่ง JSON มาตรฐานไม่สามารถทำได้โดยง่าย

  3. Deduplication: หากคุณเรียกใช้ query เดิมซ้ำหลายครั้งด้วย arguments ชุดเดิม SvelteKit จะรันเพียงครั้งเดียวเท่านั้น เพื่อป้องกันไม่ให้เกิดภาระงาน (load) กับฐานข้อมูลโดยไม่จำเป็น

  4. Refreshing: คุณสามารถเรียกใช้ .refresh() บน query เพื่อดึงข้อมูลล่าสุดจาก server ได้ทันที

หมายเหตุ: ฟีเจอร์เหล่านี้ยังอยู่ในขั้นทดลอง (experimental) ไวยากรณ์ (syntax) อาจมีการเปลี่ยนแปลงในการอัปเดตในอนาคต

ที่มา: https://dev.to/nnutnonn/sveltekit-kaarthamngaankab-remote-function-part-1-4hg4