SvelteKit Remote Functions: Parte 1

O SvelteKit está testando uma nova maneira de lidar com dados. Chama-se Remote Functions. Este recurso permite que o cliente e o servidor se comuniquem facilmente.

O que são Remote Functions?

As Remote Functions permitem que você chame a lógica do lado do servidor de qualquer parte do seu app SvelteKit. Embora você as chame a partir do cliente, o código é executado no servidor. Isso significa que você pode acessar bancos de dados ou variáveis de ambiente privadas com segurança.

Como habilitar

Você deve ativar o modo experimental no seu arquivo svelte.config.js:

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

export default config;

Trabalhando com Queries

Você pode criar funções remotas usando arquivos com a extensão .remote.js ou .remote.ts. Existem quatro tipos:

  • query (usada para buscar dados)
  • form
  • command
  • prerender

A função query funciona como uma requisição HTTP GET. Você pode importá-la em seus componentes Svelte e usar await para obter seus dados.

Exemplo de uma query remota:

import { query } from '$app/server'; import * as db from '$lib/server/database';

export const getPosts = query(async () => { const posts = await db.sqlSELECT title, slug FROM post; return posts; });

Em seu componente, você a utiliza desta forma:

{#each await getPosts() as { title, slug }}

  • {title}
    • {/each}

    Gerenciando o Estado

    A função query fornece três propriedades úteis para gerenciar sua UI:

    • loading: True enquanto busca os dados.
    • error: True se a requisição falhar.
    • current: Armazena os dados obtidos com sucesso.

    Recursos Inteligentes

    1. Validação: Você pode usar bibliotecas como Zod ou Valibot para validar os argumentos passados para sua query. Isso mantém seu servidor seguro.

    2. Manipulação de Dados: O SvelteKit usa o devalue para enviar dados. Isso suporta tipos complexos como Date e Map, o que o JSON padrão não consegue fazer facilmente.

    3. Deduplicação: Se você chamar a mesma query várias vezes com os mesmos argumentos, o SvelteKit a executará apenas uma vez. Isso evita carga extra no banco de dados.

    4. Atualização: Você pode chamar .refresh() em uma query para buscar os dados mais recentes do servidor imediatamente.

    Nota: Estes recursos são experimentais. A sintaxe pode mudar em atualizações futuras.

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