Javascript 在react中通过graphql获得组件内部的数据后，如何获取该数据？

我有一个运行查询的父组件：

export const GET_VESSEL = gql`
  query vesselById($id: ID!) {
    vesselById(id: $id) {
      flagName
      flagCode
    }
  }
`;

在此之后，出现错误，加载数据：

const { loading, error, data } = useQuery(GET_VESSEL,
    {
      variables: {
        id: props.vesselId
      }
    }
  );

  if (loading) return <div style={{ padding: '1rem' }}>Loading...</div>
  if (error) return <div style={{ padding: '1rem' }}>Error loading data</div>

  const vesselData = data.vesselById;

const{loading，error，data}=useQuery（获取船只，
{
变量：{
id:props.vesselId
}
}
);
如果（加载）返回加载。。。
if（error）返回加载数据时出错
const vesselData=data.vesselById；

在这里，我的回报是：

return (
    <SubHeader data={vesselData} />
  );

返回(
);

---

我遇到的问题是，我的子组件

具有返回

未定义
的道具，然后道具在初始渲染后进入。由于子组件在数据到达之前呈现，因此我将未定义为道具，因此它不会在其中加载子组件道具。处理此问题的最佳方法是什么？
更新道具时，您可能需要更新组件。如果您使用的是react<16.8，请查看。如果您使用的是16.8或更高版本：。如果看不到更多的代码，很难确定
是如何使用的
数据将在
加载变量从
true
更改为
false
的同时（在同一渲染中）定义。如果在如下代码所示的
加载
为false之前未呈现
子标题
，则传递到
子标题
的
数据将始终反映您已完成的请求。听起来你的代码好像还有其他问题。