suspense integration

16 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

useSuspenseQuery hook

useSuspenseQuery is a dedicated hook for using React Query with React's Suspense for Data Fetching APIs. When using suspense mode, status states and error objects are not needed and are replaced by usage of the React.Suspense component and error boundaries. The data returned by useSuspenseQuery is guaranteed to be defined.

useSuspenseInfiniteQuery hook

useSuspenseInfiniteQuery is a dedicated hook for infinite queries with React's Suspense for Data Fetching APIs.

useSuspenseQueries hook

useSuspenseQueries is a dedicated hook for multiple queries with React's Suspense for Data Fetching APIs.

Suspense mode disables conditional enabling

When using suspense mode, you cannot conditionally enable or disable queries. This is because data is guaranteed to be defined with suspense, and all queries inside one component are fetched in serial.

placeholderData not available in suspense

placeholderData does not exist for suspense queries. To prevent the UI from being replaced by a fallback during an update, wrap updates that change the QueryKey into startTransition.

throwOnError default behavior

Not all errors are thrown to the nearest Error Boundary by default in suspense mode. Errors are only thrown if there is no other data to show. The default for throwOnError is: throwOnError: (error, query) => typeof query.state.data === 'undefined'. If a query ever successfully got data in the cache, the component will render even if data is stale.

Manual error throwing in suspense

You cannot change the throwOnError default because it would allow data to become potentially undefined. To throw all errors to Error Boundaries, you must throw errors manually in your component using: if (error && !isFetching) { throw error }.

QueryErrorResetBoundary component

QueryErrorResetBoundary is a component that resets any query errors within its boundaries. It provides a render prop with a reset function that can be passed to ErrorBoundary's onReset prop.

useQueryErrorResetBoundary hook

useQueryErrorResetBoundary is a hook that resets query errors within the closest QueryErrorResetBoundary. If no boundary is defined, it resets them globally. It returns an object with a reset function.

throwOnError for mutations

For mutations to propagate errors to the nearest error boundary similar to queries, you can set the throwOnError option to true.

useSuspenseQuery example

Example of enabling suspense mode for a query: ```tsx import { useSuspenseQuery } from '@tanstack/react-query' const { data } = useSuspenseQuery({ queryKey, queryFn }) ```

Manual error throwing in suspense example

Example of manually throwing errors to Error Boundaries in suspense mode: ```tsx import { useSuspenseQuery } from '@tanstack/react-query' const { data, error, isFetching } = useSuspenseQuery({ queryKey, queryFn }) if (error && !isFetching) { throw error } // continue rendering data ```

QueryErrorResetBoundary component example

Example of using QueryErrorResetBoundary with react-error-boundary: ```tsx import { QueryErrorResetBoundary } from '@tanstack/react-query' import { ErrorBoundary } from 'react-error-boundary' const App = () => ( <QueryErrorResetBoundary> {({ reset }) => ( <ErrorBoundary onReset={reset} fallbackRender={({ resetErrorBoundary }) => ( <div> There was an error! <Button onClick={() => resetErrorBoundary()}>Try again</Button> </div> )} > <Page /> </ErrorBoundary> )} </QueryErrorResetBoundary> ) ```

useQueryErrorResetBoundary hook example

Example of using useQueryErrorResetBoundary hook: ```tsx import { useQueryErrorResetBoundary } from '@tanstack/react-query' import { ErrorBoundary } from 'react-error-boundary' const App = () => { const { reset } = useQueryErrorResetBoundary() return ( <ErrorBoundary onReset={reset} fallbackRender={({ resetErrorBoundary }) => ( <div> There was an error! <Button onClick={() => resetErrorBoundary()}>Try again</Button> </div> )} > <Page /> </ErrorBoundary> ) } ```

Fetch-on-render vs Render-as-you-fetch

React Query in suspense mode works out of the box as a Fetch-on-render solution with no additional configuration. Components trigger query fetching and suspend when they attempt to mount. To implement a Render-as-you-fetch model, use Prefetching on routing callbacks and/or user interaction events to start loading queries before they are mounted.

Prevent re-fetching stale queries with useSuspenseQueries

When using useSuspenseQueries, you cannot conditionally enable or disable queries. All queries inside one component are fetched in serial. To prevent re-fetching stale queries, the default throwOnError behavior only throws errors if there is no other data to show. If a query has successfully cached data, the component renders with stale data rather than throwing an error and suspending.

Give your agent this brain