Remote Functions в SvelteKit: Часть 1

SvelteKit тестирует новый способ обработки данных. Он называется Remote Functions. Эта функция позволяет клиенту и серверу легко взаимодействовать друг с другом.

Что такое Remote Functions?

Remote Functions позволяют вызывать серверную логику из любой части вашего приложения SvelteKit. Несмотря на то, что вы вызываете их со стороны клиента, код выполняется на сервере. Это означает, что вы можете безопасно обращаться к базам данных или приватным переменным окружения.

Как включить

Вам необходимо включить экспериментальный режим в файле svelte.config.js:

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 для получения данных.

Пример удаленного запроса:

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}

Управление состоянием

Функция query предоставляет три полезных свойства для управления вашим интерфейсом:

  • loading: true, пока данные загружаются.
  • error: true, если запрос завершился ошибкой.
  • current: содержит успешно полученные данные.

Умные функции

  1. Валидация: Вы можете использовать такие библиотеки, как Zod или Valibot, для проверки аргументов, передаваемых в ваш запрос. Это обеспечивает безопасность вашего сервера.

  2. Обработка данных: SvelteKit использует devalue для передачи данных. Это позволяет поддерживать сложные типы, такие как Date и Map, с которыми стандартный JSON справляется с трудом.

  3. Дедупликация: Если вы вызываете один и тот же запрос несколько раз с одними и теми же аргументами, SvelteKit выполнит его только один раз. Это предотвращает лишнюю нагрузку на базу данных.

  4. Обновление: Вы можете вызвать .refresh() у запроса, чтобы немедленно получить самые свежие данные с сервера.

Примечание: Эти функции являются экспериментальными. Синтаксис может измениться в будущих обновлениях.

Источник: https://dev.to/nnutnonn/sveltekit-kaarthamngaankab-remote-function-part-1-4hg4