use-api-cache

Hook React reutilizável para cache local de dados de API com suporte a TTL, fallback em erros, localStorage ou sessionStorage.

Descrição

O useCachedApi é um hook React para facilitar o armazenamento em cache de dados buscados por APIs. Ele evita chamadas repetidas desnecessárias utilizando cache local com tempo de vida (TTL), além de permitir fallback em caso de falhas na requisição.

Ideal para melhorar performance e experiência do usuário em aplicações React que consomem dados externos.

Instalação

npm install use-api-cache

Uso Básico

import { useCachedApi } from "use-api-cache";

const fetchUsuarios = async () => {
  let url_1 = `https://jsonplaceholder.typicode.com/posts/1/comments`;
  let url_2 = `https://jsonplaceholder.typicode.com/comments`;

  const res = await fetch(url_1);
  if (!res.ok) throw new Error("Erro ao buscar usuários");
  return res.json();
};

export default function MeuComponente() {
  const { data, loading } = useCachedApi({
    cacheKey: "usuarios",
    fetcher: fetchUsuarios,
    ttl: 300000, // 5 minutos
  });

  return loading ? (
    <p style={{ marginTop: 150 }}>Carregando...</p>
  ) : (
    <ul style={{ margin: 5 }}>
      {data.map((comentario: any) => (
        <li key={comentario.id}>
          Nome: {comentario.name}
          Email: {comentario.email}
          Message: {comentario.body}
        </li>
      ))}
    </ul>
  );
}

API do Hook

useCachedApi

Recebe um objeto de configuração com as seguintes propriedades:

| Propriedade | Tipo | Obrigatório | Descrição | | -------------- | -------------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------ | | cacheKey | string | Sim | Chave usada para armazenar e recuperar o cache local. | | fetcher | () => Promise<any> | Sim | Função assíncrona que retorna os dados buscados da API. | | ttl | number | Não | Tempo de vida do cache em milissegundos. Após esse tempo, o cache é invalidado e dados são buscados novamente. Default: 300000 (5 minutos) | | storageType | "localStorage" ou "sessionStorage" | Não | Define onde o cache será armazenado. Default: "localStorage" | | fallbackData | any | Não | Dados de fallback que podem ser retornados enquanto a busca é feita ou em caso de erro. |

Valores retornados pelo hook

| Nome | Tipo | Descrição | | --------- | ----------------- | ---------------------------------------------- | | data | any | Dados retornados da API ou do cache. | | loading | boolean | Indica se a requisição está em andamento. | | error | Error ou null | Erro ocorrido durante a requisição, se houver. |

Exemplo avançado

import { useCachedApi } from "use-api-cache";

const fetchProdutos = async () => {
  const response = await fetch("https://api.exemplo.com/produtos");
  if (!response.ok) throw new Error("Falha ao carregar produtos");
  return response.json();
};

export function Produtos() {
  const { data, loading, error } = useCachedApi({
    cacheKey: "produtos",
    fetcher: fetchProdutos,
    ttl: 600000, // 10 minutos
    storageType: "sessionStorage",
    fallbackData: [],
  });

  if (loading) return <div>Carregando produtos...</div>;
  if (error) return <div>Erro: {error.message}</div>;

  return (
    <div>
      <h1>Produtos</h1>
      {data.length === 0 && <p>Nenhum produto encontrado.</p>}
      <ul>
        {data.map((produto) => (
          <li key={produto.id}>
            {produto.nome} - R$ {produto.preco.toFixed(2)}
          </li>
        ))}
      </ul>
    </div>
  );
}

Contribuição

Contribuições são bem-vindas! Sinta-se à vontade para abrir issues ou pull requests.

Licença

MIT © Fernando Augusto Rodrigues de Almeida Azevedo