useBackgroundQuery (apollo)

suspense向けのhook

useReadQuery (apollo)とペアで使用する

useBackgroundQuery(親)で、データ取得とをトリガーし、

useReadQuery(子)で、データを読む

戻り値

code:ts

useReadQuery に渡す参照

skipToken (apollo) が指定されている場合は undefined

result

{ refetch, fetchMore, subscribeToMore } などの関数群

クエリの再実行やページネーション、サブスクリプション登録に使用可能

例

code:tsx

function Parent() {

const queryRef = useBackgroundQuery(query); // クエリ開始

return (

<Child queryRef={queryRef} /> {/* クエリ結果を読む */}

</Suspense>

);

}

function Child({ queryRef }) {

const { data } = useReadQuery(queryRef); // 結果取得

return <div>{data.foo.bar}</div>;

}

1. Parent が useBackgroundQuery でクエリを発行

結果はまだ届いていないが queryRef を得る

2. Child は useReadQuery(queryRef) を呼び出す

データがまだなら Suspense により fallback が表示される

3. データ取得後、Suspense が解除され、Child が描画される

何が嬉しい？

先にクエリを発行しておいて、結果が届いたら子で読む、という挙動を書ける

table:_

比較項目 useSuspenseQuery useBackgroundQuery

呼び出し場所データを読むコンポーネント内任意の上位コンポーネント

データフェッチ開始 Child がマウントされたとき Parent がレンダーされたとき

Suspense 管理その場でサスペンド queryRef 経由で柔軟に管理可能

再利用性コンポーネント単位複数コンポーネント間で共有可能

prefetch的な挙動も書きやすい

ルーティング時に先にフェッチしておく

タブの切り替え前にプレフェッチしておく

「親はロジック、子は表示」と役割を分けられる