SvelteKit Remote Functions: Phần 1

SvelteKit đang thử nghiệm một cách thức mới để xử lý dữ liệu. Nó được gọi là Remote Functions. Tính năng này cho phép client và server giao tiếp với nhau một cách dễ dàng.

Remote Functions là gì?

Remote Functions cho phép bạn gọi logic phía server từ bất kỳ phần nào trong ứng dụng SvelteKit của mình. Mặc dù bạn gọi chúng từ client, mã nguồn vẫn sẽ chạy trên server. Điều này có nghĩa là bạn có thể truy cập cơ sở dữ liệu hoặc các biến môi trường riêng tư một cách an toàn.

Cách kích hoạt

Bạn phải bật chế độ thử nghiệm (experimental mode) trong tệp svelte.config.js của mình:

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

export default config;

Làm việc với Queries

Bạn có thể tạo các remote function bằng cách sử dụng các tệp có phần mở rộng .remote.js hoặc .remote.ts. Có bốn loại:

  • query (dùng để lấy dữ liệu)
  • form
  • command
  • prerender

Hàm query hoạt động giống như một yêu cầu HTTP GET. Bạn có thể import nó vào các component Svelte và sử dụng await để lấy dữ liệu.

Ví dụ về một 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;
});

Trong component của bạn, bạn sử dụng nó như sau:

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

Quản lý State

Hàm query cung cấp ba thuộc tính hữu ích để quản lý giao diện người dùng (UI) của bạn:

  • loading: Trả về true trong khi đang lấy dữ liệu.
  • error: Trả về true nếu yêu cầu thất bại.
  • current: Chứa dữ liệu lấy thành công.

Các tính năng thông minh

  1. Validation: Bạn có thể sử dụng các thư viện như Zod hoặc Valibot để kiểm tra tính hợp lệ của các đối số được truyền vào query. Điều này giúp giữ cho server của bạn an toàn.

  2. Data Handling: SvelteKit sử dụng devalue để gửi dữ liệu. Điều này hỗ trợ các kiểu dữ liệu phức tạp như Date và Map, điều mà JSON tiêu chuẩn không thể thực hiện dễ dàng.

  3. Deduplication: Nếu bạn gọi cùng một query nhiều lần với các đối số giống nhau, SvelteKit sẽ chỉ chạy nó một lần duy nhất. Điều này giúp ngăn chặn việc gây tải thêm cho cơ sở dữ liệu.

  4. Refreshing: Bạn có thể gọi .refresh() trên một query để lấy dữ liệu mới nhất từ server ngay lập tức.

Lưu ý: Các tính năng này đang trong giai đoạn thử nghiệm. Cú pháp có thể thay đổi trong các bản cập nhật tương lai.

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