ReactでQueryを取得して描画したい

Question

バックエンド.rb
フロントエンド.ts
postgreSQL

import React from 'react';
import {useUserQuery} from 'api';

export default () => {
const {data: {user = null} = {}} = useUserQuery();
return (
<div>
<h1>{user.id}</h1>
</div>
);
};

ReactでQueryを取得して、そのidを画面に表示したいのですが
index.tsx:6 Uncaught TypeError: Cannot read property 'id' of null
とエラーがでてしまいます。
調べてみて非同期処理で、先にnullが渡ってきているから値の置く場所がないよと言われている
という認識なのですが、これはあっていますか？
また、この対処はどう書けばいいのでしょうか
Queryはidをキーにしています

Answer 1

はい、その認識で正しいです。

おそらくuseUserQuery()が非同期通信であり、Promiseを返しているはずですので、useUserQueryの結果(ここでいうところのuser情報?)はPromiseのコールバックの中で初めて使うことができます。(Promiseはあくまで未来にユーザー情報を返しますよと約束しているにすぎず、その約束だけではユーザー情報のidや名前といった詳細はわからない)

reactっぽいのでstateを使って

import React,{useState} from "react"

export default () => {
  const [userData,setUserData] = useState({}) //stateの初期値の型は返ってくるであろうuserDataの型に合わせてください

  useUserQuery().then((data) => {
      setUserData(data)
  }).catch(console.log)

  return(
     {
        userData.id && //userData.idがnull,undefinedでない時 ->　APIからuserdataを受け取れた時
            <div>{userData.id}</div>
        userData.id || userData.idがnull,undefinedの時 ->　APIからuserdataをまだ来てない時
            <div>Loading</div>
      }
    )
}

ざっくりこんな感じでいけると思います！

Comments

[sei-fujikawa]

ありがとうございます！
どこがなにやら分からない感じで進めていたので、合っているのか違っているのかの判断もできず、ずっと同じところをグルグルしていました
頂いた回答を元に進めていこうと思います！