[TanStakQuery] Suspense

"참고: React 쿼리용 서스펜스 모드는 데이터 fetching 서스펜스와 마찬가지로 실험 단계입니다. 이러한 API는 변경될 수 있으며, React 및 React Query 버전을 서로 호환되는 패치 수준 버전으로 잠그지 않는 한 프로덕션 환경에서 사용해서는 안 됩니다."

React Query can also be used with React's new Suspense for Data Fetching API's. To enable this mode, you can set either the global or query level config's suspense option to true.

Global configuration:
React Query는 React의 새로운 Suspense for Data Fetching API's와 함께 사용할 수도 있습니다. 이 모드를 활성화하려면 전역 또는 쿼리 수준 구성의 suspense 옵션을 true로 설정하면 됩니다.

전역 구성:

// Configure for all queries
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      suspense: true,
    },
  },
})

function Root() {
  return (
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  )
}

쿼리 구성:

import { useQuery } from '@tanstack/react-query'

// Enable for an individual query
useQuery({ queryKey, queryFn, suspense: true })

서스펜스 모드를 사용하는 경우 status 상태 및 error 객체가 필요하지 않으며 React.Suspense 컴포넌트(fallback prop과 에러를 잡기 위한 React 에러 바운더리 사용을 포함)를 사용하여 대체됩니다. 서스펜스 모드를 설정하는 방법에 대한 자세한 내용은 Resetting Error Boundaries와 Suspense Example을 참조하세요.

서스펜스 모드에서는 쿼리가 다르게 동작하는 것 외에도 mutations에서도 약간 다르게 동작합니다. 기본적으로 mutation이 실패할 때 error 변수를 제공하는 대신 mutation 사용되는 컴포넌트의 다음 렌더링 중에 해당 변수가 던져지고 쿼리 오류와 유사하게 가장 가까운 오류 바운더리로 전파됩니다. 이 기능을 비활성화하려면 useErrorBoundary 옵션을 false로 설정하면 됩니다. 에러가 전혀 발생하지 않도록 하려면 throwOnError 옵션도 false로 설정하면 됩니다!

Resetting Error Boundaries

쿼리에 suspense를 사용하든 useErrorBoundaries를 사용하든, 오류가 발생한 후 다시 렌더링할 때 쿼리에 다시 시도할 것임을 알리는 방법이 필요합니다.

쿼리 오류는 QueryErrorResetBoundary 컴포넌트 또는 useQueryErrorResetBoundary 훅을 사용하여 재설정할 수 있습니다.

컴포넌트를 사용하면 컴포넌트 바운더리 내의 모든 쿼리 오류가 재설정됩니다:

import { QueryErrorResetBoundary } from '@tanstack/react-query'
import { ErrorBoundary } from 'react-error-boundary'

const App: React.FC = () => (
  <QueryErrorResetBoundary>
    {({ reset }) => (
      <ErrorBoundary
        onReset={reset}
        fallbackRender={({ resetErrorBoundary }) => (
          <div>
            There was an error!
            <Button onClick={() => resetErrorBoundary()}>Try again</Button>
          </div>
        )}
      >
        <Page />
      </ErrorBoundary>
    )}
  </QueryErrorResetBoundary>
)

훅을 사용할 때 가장 가까운 QueryErrorResetBoundary 내의 쿼리 오류를 재설정합니다. 정의된 바운더리가 없으면 전역적으로 재설정됩니다:

import { useQueryErrorResetBoundary } from '@tanstack/react-query'
import { ErrorBoundary } from 'react-error-boundary'

const App: React.FC = () => {
  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

기본적으로 suspense 모드의 React Query는 추가 구성 없이도 Fetch-on-render 솔루션으로 매우 잘 작동합니다. 즉, 컴포넌트 마운트를 시도할 때 쿼리 fetching과 suspend를 트리거하지만 해당 컴포넌트가 imported되어 마운트된 후에만 한 번 실행됩니다. 한 단계 더 발전하여 Render-as-you-fetch 모델을 구현하려면 라우팅 콜백 및/또는 사용자 상호작용 이벤트에 Prefetching을 구현하여 쿼리가 마운트되기 전에, 가급적이면 상위 컴포넌트가 imported되거나 마운트되기 전에 쿼리 로딩을 시작하는 것이 좋습니다.

Reference

• Suspense | TanStack Query Docs