Suspense

Solid Query는 Solid의 Suspense API에서도 사용할 수 있습니다.

그렇게 하려면 일시 중단 가능한 컴포넌트를 Solid에서 제공하는 Suspense 컴포넌트로 감싸야 합니다

import { Suspense } from 'solid-js'
;<Suspense fallback={<LoadingSpinner />}>
  <SuspendableComponent />
</Suspense>

solid-query에서 제공하는 비동기 suspense 함수를 사용할 수 있습니다.

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

const todoFetcher = async () =>
  await fetch('https://jsonplaceholder.cypress.io/todos').then((response) =>
    response.json(),
  )

function SuspendableComponent() {
  const todosQuery = useQuery(() => ({
    queryKey: ['todos'],
    queryFn: todoFetcher,
  }))

  // Accessing todosQuery.data directly inside a <Suspense> boundary
  // automatically triggers suspension until data is ready
  return <div>Data: {JSON.stringify(todosQuery.data)}</div>
}

렌더링 시 가져오기와 가져오면서 렌더링하기 비교

별도의 추가 설정 없이도 Solid 모드의 suspense Query는 기본적으로 렌더링 시 가져오기 솔루션으로 매우 잘 작동합니다. 즉, 컴포넌트가 마운트를 시도할 때 쿼리 가져오기를 트리거하고 일시 중단되지만, 이는 컴포넌트를 가져오고 마운트한 후에만 이루어집니다. 한 단계 더 나아가 가져오면서 렌더링하기 모델을 구현하려면, 쿼리가 마운트되기 전, 가능하다면 상위 컴포넌트를 가져오거나 마운트하기 전부터 쿼리 로딩을 시작하도록 라우팅 콜백 및/또는 사용자 상호작용 이벤트에 프리페치를 구현하는 것이 좋습니다.