state/query-error-state

Dlaczego

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.

Poprawka

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.

Przykłady

// 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>

Źródła

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

Przeczytaj w terminalu

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