TanStack Query

Consumo de status page com TanStack Query — guia useQuery

Consuma seu endpoint de status PulseAPI com useQuery. Cache, refetch on focus, polling por intervalo e SSE em tempo real — tudo num hook tipado.

Começar grátis Construa a sua via API

Três formas de lançar uma página de status para TanStack Query

Escolha o nível de controle — sem código, low-code ou headless completo.

Hospedado

Adicione seu endpoint TanStack Query, aponte um CNAME para status.seudominio.com, pronto. Em 5 minutos.

Headless

Use nossa API pública para construir sua própria UI dentro do app TanStack Query. Controle total sobre design e marca.

Ver a API

Badges embutidos

Coloque badges SVG de uptime e status no seu README ou landing page. Atualizam a cada 5 minutos.

Cole este health endpoint no seu app TanStack Query

Copie, cole, aponte o PulseAPI para a URL. Retorna 200 saudável, 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,
  })

Use staleTime e refetchInterval de 30 segundos para bater com nosso heartbeat SSE. Para updates em tempo real sem polling, combine este hook com nosso stream /sse/status/:slug e use queryClient.setQueryData para patch do cache nos eventos.

O que quebra em apps TanStack Query — e como detectar

Status velho em abas de longa duração

Um dashboard deixado aberto a noite mostra banner verde enquanto produção está fora. refetchInterval + refetchOnWindowFocus mantém o cache honesto.

Flash de conteúdo errado durante revalidação

placeholderData + keepPreviousData permite continuar mostrando o último status bom durante um refetch — sem flicker entre "operational" e skeleton.

Muitos requests paralelos de componentes aninhados

Vários componentes chamando useStatusQuery disparariam um request cada — React Query deduplica por queryKey, então só há um fetch em voo por slug.

Abordagem headless

Não gostou da nossa página de status? Construa a sua em TanStack Query.

Nossa API retorna os mesmos dados que nossa UI hospedada consome. Spec OpenAPI completa em api.pulseapi.tech/docs.

components/StatusBanner.tsx — mostra um banner inline no seu app sempre que o PulseAPI reportar estado degradado ou fora do ar.

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>
  )
}

Explore a API

Monitoramento TanStack Query — FAQ

Como combino useQuery com SSE para updates em tempo real?

Abra um EventSource para /sse/status/:slug num useEffect e, em cada evento, chame queryClient.setQueryData(["status", slug], to merge event patches into the existing cache entry. Isso mantém os subscribers do useQuery atualizados sem polling.

Funciona com TanStack Query v4 e v5?

Ambos. Em v4 use cacheTime, em v5 foi renomeado para gcTime. isLoading em v5 é estritamente "primeira carga"; use isPending + isFetching para qualquer indicador em voo.

Posso prefetch do status no servidor com Next.js ou Remix?

Sim. Chame queryClient.prefetchQuery num server component ou loader, envolva sua árvore em HydrationBoundary (v5) ou Hydrate (v4) com estado desidratado. Seu hook useStatusQuery lê do cache hidratado no primeiro render — sem flicker client-side.

É seguro usar minha API key de org no useQuery?

Não — qualquer key em JS do navegador é pública. O endpoint público de status não precisa de auth; use keys de org só no servidor. Proxy através de uma rota backend (/api/status) e chame esse proxy do useQuery se precisar de auth.

Comece a monitorar seu app TanStack Query em 5 minutos

Plano grátis. Sem cartão. Adicione seu endpoint e receba alertas quando quebrar.

Comece grátis Ver outros frameworks