state/query-error-state

Why

const { data } = useQuery(...) handles only the happy path. When the request fails, data stays undefined: the list is silently empty, or data.map throws and takes the page down. The person cannot tell "nothing here" from "something broke" and has no way to retry.

Fix

Read error (or isError/status) with data, and render three states: pending (a skeleton or "Loading…", announced with role="status" where it matters), error (a message and a retry button calling refetch()), and success. For a whole area, useSuspenseQuery with a Suspense boundary and an error boundary is the alternative; a global throwOnError setup counts too (mark the line with fs-ignore state/query-error-state). Make the query function throw on HTTP errors (js/fetch-check-ok), or there is no error to show.

Examples

// bad
const { data } = useQuery({ queryKey: ['todos'], queryFn: getTodos })
return <ul>{data?.map((t) => <li key={t.id}>{t.title}</li>)}</ul>
// good
const { data, error, isPending, refetch } = useQuery({ queryKey: ['todos'], queryFn: getTodos })
if (isPending) return <p role="status">Loading todos…</p>
if (error) return <p role="alert">Could not load todos. <button type="button" onClick={() => refetch()}>Retry</button></p>
return <ul>{data.map((t) => <li key={t.id}>{t.title}</li>)}</ul>

Sources

• TanStack Query docs, Queries (pending, error and success states)
• SWR docs, Error handling (source in the vercel/swr-site repository)

Read it in the terminal

npx github:dawidolko/frontend-skills explain state/query-error-state