Suspense - Tanstack Query

クライアント側でFetch処理をする際にSuspenceを併用する方法

Tanstack QueryにはReactのSuspenceを利用しつつ、クライアント側でData Fetchを可能にする機能がある

Suspeceはもともとフロント側でLoading処理（PromiseのPending）をコンポーネント側でキャッチしたいという背景で作られた機能

useSuspenceQuery

code:hooks.ts

// hooks定義

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

export const useDataFetchWithSuspence = () => {

const { data, error } = useSuspenseQuery({ queryKey, queryFn })

return {

data,

error

}

code:component.tsx

// 子コンポーネント

const ChildComponent = () => {

const { data } = useDataFetchWithSuspence()

return <div>{data.name}</div>

}

// 親コンポーネント

const ParentComponent = () => {

return (

</Suspense>

)

}