🔥 Suspense

import { useSuspenseQuery } from '@tanstack/react-query'
 
const { data } = useSuspenseQuery({ queryKey, queryFn })
 
typescript복사

throwOnError: (error, query) => typeof query.state.data === 'undefined'
text복사

import { useSuspenseQuery } from '@tanstack/react-query'
 
const { data, error, isFetching } = useSuspenseQuery({ queryKey, queryFn })
 
if (error && !isFetching) {
  throw error
}
 
// data 렌더링 계속
 
typescript복사

import { QueryErrorResetBoundary } from '@tanstack/react-query'
import { ErrorBoundary } from 'react-error-boundary'
 
const App = () => (
  <QueryErrorResetBoundary>
    {({ reset }) => (
      <ErrorBoundary
        onReset={reset}
        fallbackRender={({ resetErrorBoundary }) => (
          <div>
            오류가 발생했습니다!
            <Button onClick={() => resetErrorBoundary()}>다시 시도</Button>
          </div>
        )}
      >
        <Page />
      </ErrorBoundary>
    )}
  </QueryErrorResetBoundary>
)
 
typescript복사

import { useQueryErrorResetBoundary } from '@tanstack/react-query'
import { ErrorBoundary } from 'react-error-boundary'
 
const App = () => {
  const { reset } = useQueryErrorResetBoundary()
  return (
    <ErrorBoundary
      onReset={reset}
      fallbackRender={({ resetErrorBoundary }) => (
        <div>
          오류가 발생했습니다!
          <Button onClick={() => resetErrorBoundary()}>다시 시도</Button>
        </div>
      )}
    >
      <Page />
    </ErrorBoundary>
  )
}
 
typescript복사

// app/providers.tsx
'use client'
 
import {
  isServer,
  QueryClient,
  QueryClientProvider,
} from '@tanstack/react-query'
import * as React from 'react'
import { ReactQueryStreamedHydration } from '@tanstack/react-query-next-experimental'
 
function makeQueryClient() {
  return new QueryClient({
    defaultOptions: {
      queries: {
        // SSR을 사용하면 일반적으로 기본 staleTime을
        // 0 이상으로 설정하여 클라이언트에서 즉시 다시 가져오는 것을 피합니다.
        staleTime: 60 * 1000,
      },
    },
  })
}
 
let browserQueryClient: QueryClient | undefined = undefined
 
function getQueryClient() {
  if (isServer) {
    // 서버: 항상 새 쿼리 클라이언트 생성
    return makeQueryClient()
  } else {
    // 브라우저: 아직 쿼리 클라이언트가 없다면 새로 생성
    // 초기 렌더링 중에 React가 일시 중단되는 경우
    // 쿼리 클라이언트를 다시 만들지 않도록 하는 것이 매우 중요합니다.
    // 쿼리 클라이언트 생성 아래에 suspense 경계가 있는 경우에는
    // 이것이 필요하지 않을 수 있습니다.
    if (!browserQueryClient) browserQueryClient = makeQueryClient()
    return browserQueryClient
  }
}
 
export function Providers(props: { children: React.ReactNode }) {
  // 참고: 쿼리 클라이언트를 초기화할 때 useState를 피하세요.
  //       일시 중단될 수 있는 코드와 이 코드 사이에 suspense 경계가 없는 경우
  //       초기 렌더링에서 일시 중단되고 경계가 없으면
  //       React가 클라이언트를 버릴 것이기 때문입니다.
  const queryClient = getQueryClient()
 
  return (
    <QueryClientProvider client={queryClient}>
      <ReactQueryStreamedHydration>
        {props.children}
      </ReactQueryStreamedHydration>
    </QueryClientProvider>
  )
}
 
typescript복사