Open1
useSuspenseQueryを使ってみる
じょーだん非同期処理を宣言的に記述できるSuspenseに魅力を感じ、軽く試すことにする。
- 多分Apolloがデータフェッチ時のPromiseが解決していない時に、
throw Promiseをしてくれている！？ - それをSuspenseがキャッチしてくれて、loadingコンポーネントを表示してくれている！？
->いつも使っているuseQueryが返すloadingを使用していない
->つまり以下のような記述がなくなる
if(loading) {
return <>ローディングなう</>
}else {
//データ表示等の処理
}
データを取得、表示するコンポーネントを作成
export const CharacterName = () => {
const { data } = useSuspenseQuery(FETCH_CHARACTER, {
variables: {
id: 1,
},
});
return <>{data.character.name}</>;
};
上記コンポーネントの利用
SuspenseでCharacterNameを囲んでいるな
↓
CharacterNameは非同期処理を含ませている
Suspenseが目印となって、読みやすいかも
return (
<>
<Suspense fallback={<>loading...</>}>
<CharacterName />
</Suspense>
</>
);