TanStack Query

Fetch de status page avec TanStack Query — guide useQuery

Récupérez votre endpoint de statut PulseAPI avec useQuery. Cache, refetch on focus, polling, et SSE temps réel — dans un hook React typé.

Commencer gratuitement Construisez la vôtre via API

Trois façons de livrer une page de statut pour TanStack Query

Choisissez le niveau de contrôle — sans code, low-code, ou full headless.

Hébergé

Ajoutez votre endpoint TanStack Query, pointez un CNAME sur status.votredomaine.com, fini. Marche en 5 minutes.

Headless

Utilisez notre API publique pour construire votre propre UI dans votre app TanStack Query. Contrôle total du design et du branding.

Voir l'API

Badges embarqués

Intégrez des badges SVG uptime et statut dans votre README ou landing. Mise à jour toutes les 5 minutes.

Collez ce health endpoint dans votre app TanStack Query

Copiez, collez, pointez PulseAPI sur l'URL. Renvoie 200 sain, 503 dégradé.

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

Utilisez un staleTime et refetchInterval de 30 secondes pour matcher notre heartbeat SSE. Pour des mises à jour temps réel sans polling, combinez ce hook avec notre stream /sse/status/:slug et utilisez queryClient.setQueryData pour patcher le cache sur les événements.

Ce qui casse dans les apps TanStack Query — et comment le détecter

Statut périmé sur onglets longtemps ouverts

Un dashboard laissé ouvert la nuit affiche un bandeau vert alors que la production est down. refetchInterval + refetchOnWindowFocus garde le cache honnête.

Flash de contenu incorrect pendant la revalidation

placeholderData + keepPreviousData permet de continuer à afficher le dernier bon statut pendant un refetch — pas de clignotement entre "operational" et le skeleton.

Trop de requêtes parallèles depuis des composants imbriqués

Plusieurs composants appelant useStatusQuery déclencheraient chacun une requête — React Query déduplique par queryKey, donc une seule requête en vol par slug.

Approche headless

Notre page de statut ne vous plaît pas ? Construisez la vôtre dans TanStack Query.

Notre API renvoie les mêmes données que notre UI hébergée consomme. Spec OpenAPI complète sur api.pulseapi.tech/docs.

components/StatusBanner.tsx — affichez un bandeau inline dans votre app dès que PulseAPI signale un état dégradé ou down.

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

Explorer l'API

Monitoring TanStack Query — FAQ

Comment combiner useQuery avec SSE pour des mises à jour temps réel ?

Ouvrez un EventSource vers /sse/status/:slug dans un useEffect, et sur chaque événement appelez queryClient.setQueryData(["status", slug], to merge event patches into the existing cache entry. Les abonnés useQuery restent à jour sans polling.

Est-ce que ça marche avec TanStack Query v4 et v5 ?

Les deux. En v4 utilisez cacheTime, en v5 il s'appelle gcTime. isLoading en v5 est strictement "premier chargement" ; utilisez isPending + isFetching pour n'importe quel indicateur en vol.

Puis-je prefetch le statut côté serveur avec Next.js ou Remix ?

Oui. Appelez queryClient.prefetchQuery dans un server component ou loader, enveloppez votre arbre dans HydrationBoundary (v5) ou Hydrate (v4) avec état deshydraté. Votre hook useStatusQuery lit depuis le cache hydraté au premier render — aucun flicker côté client.

Ma clé API d'organisation est-elle sûre à utiliser dans useQuery ?

Non — n'importe quelle clé dans le JS navigateur est publique. L'endpoint public de statut ne requiert pas d'auth ; n'utilisez les clés d'org que côté serveur. Proxy via une route backend (/api/status) et appelez ce proxy depuis useQuery si vous avez besoin d'auth.

Commencez à monitorer votre app TanStack Query en 5 minutes

Version gratuite. Sans carte. Ajoutez votre endpoint et recevez des alertes en cas de panne.

Commencer gratuitement Voir les autres frameworks