data undefined even with throwOnError

[axelboc]

const { data, isPending, error } = useQuery({ ... , throwOnError: true });

if (isPending) {
  return <>Loading...</>;
}

// `data` can still be `undefined` here
// I also have to return or rethrow if `error` is truthy, but that's not possible since `throwOnError` is enabled
if (error) {
  return <>Ooops!</>;
}

// Now `data` is guaranteed to be defined here
// Alternatively, I can call a TS assertion function, like `assertDefined(data)`, but I feel like I shouldn't have to

When throwOnError is true, shouldn't error always be null and data always be defined once isPending is false?

[brentc22]

Short answer: throwOnError is a runtime flag. It doesn't change the return type, and the runtime doesn't strictly guarantee it either.

Types: useQuery returns a union discriminated by status, and throwOnError isn't part of that type. It can also be a function ((error, query) => boolean), so TS can't know statically whether an error will throw.

Runtime: the error isn't always thrown. In getHasError (react-query/src/errorBoundaryUtils.ts) the throw only happens when:

result.isError &&
  !errorResetBoundary.isReset() &&
  !result.isFetching &&
  query && (... || shouldThrowError(throwOnError, [result.error, query]))

So right after a QueryErrorResetBoundary / ErrorBoundary reset, your component renders once with isError: true, isFetching: true and data: undefined while the retry runs. The if (error) branch is reachable, and TS is right not to narrow it away.

What you want is useSuspenseQuery:

const { data } = useSuspenseQuery({ queryKey, queryFn })
// data: TData, never undefined

Loading goes to the nearest <Suspense> and errors go to the nearest error boundary, so data is typed as always defined and you don't need an isPending or error branch.

If you'd rather stay on useQuery, narrow on isError/isSuccess rather than error. They're boolean literals in the union, so the narrowing works when you destructure:

const { data, isPending, isError } = useQuery({ ..., throwOnError: true })
if (isPending) return <>Loading...</>
if (isError) return null // only reachable during a boundary reset/refetch
data // TData