TanStack Query से स्टेटस पेज fetch करें — useQuery गाइड
useQuery से PulseAPI status endpoint fetch करें। Cache, focus पर refetch, interval polling, और SSE realtime — typed React hook में।
TanStack Query के लिए स्टेटस पेज लॉन्च करने के तीन तरीके
नियंत्रण का स्तर चुनें — zero-code, low-code, या पूर्ण headless।
Hosted
अपना TanStack Query endpoint जोड़ें, CNAME को status.yourdomain.com पर point करें, हो गया। 5 मिनट में।
Headless
Public API का उपयोग करके अपनी TanStack Query ऐप के अंदर अपनी UI बनाएं। डिज़ाइन और ब्रांडिंग पर पूरा नियंत्रण।
API देखेंएम्बेडेड badges
अपने README या landing page में SVG uptime और status badges डालें। हर 5 मिनट में auto-update।
इस health endpoint को अपनी TanStack Query ऐप में जोड़ें
Copy, paste, PulseAPI को URL पर point करें। स्वस्थ पर 200, degraded पर 503 return करता है।
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,
})हमारे SSE heartbeat से match करने के लिए staleTime और refetchInterval 30 seconds रखें। Polling के बिना realtime के लिए इस hook को /sse/status/:slug stream के साथ जोड़ें और events पर queryClient.setQueryData से cache patch करें।
TanStack Query ऐप्स में क्या टूटता है — और कैसे पकड़ें
लंबे समय खुले tabs पर पुराना status
रातभर खुला dashboard production down होने पर भी हरा banner दिखा सकता है। refetchInterval + refetchOnWindowFocus cache को सटीक रखते हैं।
Revalidation के दौरान गलत content का flash
placeholderData + keepPreviousData refetch के दौरान पिछला valid status दिखाते रहते हैं — "operational" और skeleton के बीच flicker नहीं।
Nested components से बहुत सारे parallel requests
कई components useStatusQuery call करें तो हर एक request fire करता — React Query queryKey से dedupe करता है, हर slug पर एक ही in-flight fetch रहता है।
हमारा स्टेटस पेज पसंद नहीं? TanStack Query में अपना बनाएं।
हमारी API वही data लौटाती है जो हमारी hosted UI उपयोग करती है। पूर्ण OpenAPI spec यहां api.pulseapi.tech/docs.
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>
)
}TanStack Query मॉनिटरिंग — FAQ
Realtime updates के लिए useQuery को SSE के साथ कैसे combine करूं?
useEffect में /sse/status/:slug पर EventSource खोलें और हर event पर queryClient.setQueryData(["status", slug], to merge event patches into the existing cache entry call करें। useQuery subscribers बिना polling के updated रहते हैं।
क्या यह TanStack Query v4 और v5 दोनों के साथ काम करता है?
दोनों। v4 में cacheTime, v5 में इसका नाम बदलकर gcTime हो गया। v5 में isLoading केवल "पहला load" है; किसी भी in-flight indicator के लिए isPending + isFetching use करें।
क्या Next.js या Remix के साथ server पर status prefetch कर सकता हूं?
हां। Server component या loader में queryClient.prefetchQuery call करें, अपने tree को dehydrated state के साथ HydrationBoundary (v5) या Hydrate (v4) में wrap करें। useStatusQuery hook पहले render पर hydrated cache से पढ़ता है — client-side flicker नहीं।
क्या अपना org API key useQuery में safe है?
नहीं — browser JS में कोई भी key public है। Public status endpoint को auth नहीं चाहिए; org API keys सिर्फ server पर use करें। Auth चाहिए तो backend route (/api/status) से proxy करें और useQuery से उस proxy को call करें।
अपनी TanStack Query ऐप की मॉनिटरिंग 5 मिनट में शुरू करें
मुफ्त tier, कोई credit card नहीं। अपना endpoint जोड़ें और टूटने पर alerts पाएं।