PulseAPIPulseAPI
TanStack Query

Consumo de status page con TanStack Query — guía useQuery

Consume tu endpoint de estado PulseAPI con useQuery. Caché, refetch on focus, polling por intervalo y SSE en tiempo real — todo en un hook tipado.

Empieza a monitorear gratisConstruye la tuya vía API

Tres formas de lanzar una página de estado para TanStack Query

Elige el nivel de control que necesitas — sin código, low-code o headless completo.

Alojado

Añade tu endpoint TanStack Query, apunta un CNAME a status.tudominio.com, listo. Funciona en 5 minutos.

Headless

Usa nuestra API pública para construir tu propia UI dentro de tu app TanStack Query. Control total sobre diseño y marca.

Ver la API

Badges embebidos

Coloca badges SVG de uptime y estado en tu README o landing page. Se actualizan cada 5 minutos.

Pega este health endpoint en tu app TanStack Query

Copia, pega, apunta PulseAPI a la URL. Devuelve 200 sano, 503 degradado.

app/status/use-status-query.ts
import { useQuery } from '@tanstack/react-query'

interface StatusData {
  page: { title: string; customDomain: string | null }
  overallStatus: 'operational' | 'degraded' | 'down' | 'maintenance' | 'unknown'
  endpoints: Array<{
    id: string
    name: string
    status: string
    uptime24h: number
    avgResponseTime: number
  }>
}

export const useStatusQuery = (slug: string) =>
  useQuery<StatusData>({
    queryKey: ['status', slug],
    queryFn: async () => {
      const r = await fetch(`https://api.pulseapi.tech/status/${slug}`)
      if (!r.ok) throw new Error(`Status ${r.status}`)
      return r.json()
    },
    staleTime: 30_000,
    refetchInterval: 30_000,
    refetchOnWindowFocus: true,
  })

Usa staleTime y refetchInterval de 30 segundos para coincidir con nuestro heartbeat SSE. Para actualizaciones en tiempo real sin polling, combina este hook con nuestro stream /sse/status/:slug y usa queryClient.setQueryData para parchear el caché en eventos.

Qué se rompe en apps TanStack Query — y cómo detectarlo

Estado viejo en pestañas con mucha duración

Un dashboard abierto toda la noche muestra banner verde mientras producción está caída. refetchInterval + refetchOnWindowFocus mantiene el caché honesto.

Parpadeo de contenido incorrecto durante revalidación

placeholderData + keepPreviousData te permite seguir mostrando el último status bueno mientras hay un refetch en vuelo — sin parpadeo entre "operational" y skeleton.

Demasiados requests paralelos desde componentes anidados

Varios componentes llamando useStatusQuery dispararían un request cada uno — React Query deduplica por queryKey, así que solo hay un fetch en vuelo por slug.

Enfoque headless

¿No te gusta nuestra página de estado? Construye la tuya en TanStack Query.

Nuestra API devuelve los mismos datos que consume nuestra UI alojada. Spec OpenAPI completa en api.pulseapi.tech/docs.

components/StatusBanner.tsx — muestra un banner inline en tu app cada vez que PulseAPI reporta estado degradado o caído.
import { useStatusQuery } from './use-status-query'

export function StatusBanner({ slug }: { slug: string }) {
  const { data, isLoading, error } = useStatusQuery(slug)

  if (isLoading) return <div className="skeleton" />
  if (error) return null
  if (!data) return null
  if (data.overallStatus === 'operational') return null

  return (
    <a href={`https://${data.page.customDomain}`} className="banner">
      {data.overallStatus === 'down' ? 'Service disruption' : 'Degraded service'}
      {' — '}
      {data.endpoints.filter((e) => e.status !== 'operational').length} affected
    </a>
  )
}
Explora la API

Monitoreo TanStack Query — FAQ

¿Cómo combino useQuery con SSE para actualizaciones en tiempo real?

Abre un EventSource a /sse/status/:slug en un useEffect, y en cada evento llama queryClient.setQueryData(["status", slug], to merge event patches into the existing cache entry. Esto mantiene a los suscriptores de useQuery actualizados sin polling.

¿Funciona con TanStack Query v4 y v5?

Ambos. En v4 usa cacheTime, en v5 se renombró a gcTime. isLoading en v5 es estrictamente "primera carga"; usa isPending + isFetching si quieres cualquier indicador de request en vuelo.

¿Puedo prefetch del estado en el servidor con Next.js o Remix?

Sí. Llama queryClient.prefetchQuery en un server component o loader, envuelve tu árbol en HydrationBoundary (v5) o Hydrate (v4) con estado deshidratado. Tu hook useStatusQuery lee del caché hidratado en el primer render — sin flicker en cliente.

¿Es seguro usar mi API key de org en useQuery?

No — cualquier key en JS del navegador es pública. El endpoint público de estado no requiere auth; usa keys de org solo en servidor. Proxy a través de una ruta backend (/api/status) y llama ese proxy desde useQuery si necesitas auth.

Empieza a monitorear tu app TanStack Query en 5 minutos

Plan gratuito. Sin tarjeta. Añade tu endpoint y recibe alertas cuando falle.

Empezar gratisVer otros frameworks