Olá Lucas, tudo bem?

Que bom que você esteja desenvolvendo uma página para uma memecoin! Vou te ajudar a entender como fazer requisições a uma API pública e armazenar os dados de forma que não atinja o limite de requisições.

Passo a Passo para Fazer Requisições a uma API Pública no SvelteKit

1. Criar um Endpoint para Requisição da API

Primeiro, você vai precisar criar um endpoint no seu projeto SvelteKit. Esse endpoint vai fazer a requisição à API pública e, se tudo der certo, vai armazenar os dados em um arquivo JSON.

• Crie um arquivo: Na pasta src/routes/api, crie um arquivo chamado fetchData.js. Aqui está um exemplo de como ele pode ficar:

// src/routes/api/fetchData.js
import { json } from '@sveltejs/kit';
import fetch from 'node-fetch';
import fs from 'fs';
import path from 'path';

export async function GET() {
    try {
        const response = await fetch('URL_DA_API_PUBLICA'); // Coloque a URL da API aqui
        if (!response.ok) {
            throw new Error('Erro ao buscar dados da API');
        }
        const data = await response.json();

        // Armazenar os dados em um arquivo JSON
        const filePath = path.resolve('src/routes/api/data.json');
        fs.writeFileSync(filePath, JSON.stringify(data, null, 2));

        return json(data);
    } catch (error) {
        return json({ error: error.message }, { status: 500 });
    }
}

2. Chamar o Endpoint no Frontend

Agora que você tem o endpoint, vamos chamá-lo no seu componente Svelte para obter os dados.

// Exemplo de componente Svelte
<script>
    import { onMount } from 'svelte';

    let dados;

    onMount(async () => {
        const response = await fetch('/api/fetchData');
        if (response.ok) {
            dados = await response.json();
        } else {
            console.error('Erro ao buscar dados:', response.statusText);
        }
    });
</script>

<template>
    {#if dados}
        <pre>{JSON.stringify(dados, null, 2)}</pre>
    {:else}
        <p>Carregando...</p>
    {/if}
</template>

Através desses códigos simples conseguimos nos beneficiar das seguintes situações:

• Verificação do Cache: Agora, antes de fazer a requisição à API pública, o código verifica se o arquivo de cache existe e se os dados estão atualizados (ou seja, se menos de 1 minuto se passou desde a última atualização).

• Timestamp: Quando os dados são salvos no arquivo JSON, também salvamos um timestamp (data e hora da última atualização). Isso nos permite saber quando os dados foram atualizados pela última vez.

• Requisição Condicional: Se os dados estiverem atualizados, o endpoint retorna os dados do cache. Caso contrário, ele faz a requisição à API pública e atualiza o cache.

Dicas Finais

• Tratamento de Erros: É sempre bom tratar erros, tanto no servidor quanto no cliente, para que sua aplicação fique mais robusta.

• Persistência de Dados: Lembre-se de que, se você reiniciar o servidor, o arquivo JSON pode ser perdido, dependendo de como você está fazendo o deploy. Para uma solução mais duradoura, considere usar um banco de dados.

Um Pequeno Disclaimer sobre Next.JS

Se você já ouviu falar do Next.js, ele tem uma maneira bem legal de lidar com requisições. No Next.JS, você pode definir diretamente como o fetch se comporta em termos de cache e revalidação. No SvelteKit, você vai precisar implementar um sistema de cache manualmente, como fizemos aqui.