React 初回レンダリング データ取得できない

Question

前提・実現したいこと

■使用言語
react
apollo
graphql

■実現したいこと
idに紐ずくデータを取得したい。

■■な機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

サンプルデータ一覧画面があり、そこでデータの複製などができます。
複製したデータを編集するため、編集画面に遷移すると、下記のuseSampleQueryが走ります。
その際、console.logでは3回レンダリングが確認できます。初回のレンダリング時にデータがundefindとなっています。
こちらは何故でしょうか。
リロードすると、3回ともデータが入っていることが確認できました。

該当のソースコード

  const { data } = useSampleQuery({
    variables: { id: sampleId },
  })

 console.log(data)

試したこと

データのrefechなどを行いましたが、結果は変わらずでした。
const { data, refetch } = useSampleQuery({
variables: { id: sampleId },
})

if (data === undefined) {
refetch()
}

console.log(data)

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

useSampleQueryが非同期処理だった場合、最初の描画時にはデータの取得が、原理的に間に合いません。

「最初は取れないタイミングがある」ことを前提に全体を組み立てるよりありません。