Stop getting undefined to show in my code

So right now in my code when I console.log( “data”) it returns undefined and I know the reason of this is because everything hasn’t fully loaded. So like how would I go about fixing this

​

​

​

function Update(props){ console.log(props.type) const { loading, error, data } = useQuery(QUERY_SINGLE_POST, { variables: {_id:props.type }, }); console.log(data); const [postInfo, setPostInfo] = useState({title: data.post.title, content: data.post.content}) const [updatePost, { updateerror, updatedata }] = useMutation(UPDATE_POST); function PostChange(event){ const name = event.target.name; const value = event.target.value setPostInfo({ …postInfo, [name]: value, }); } async function PostButton(event){ const todayDate = today.format(“MMM Do, YYYY”) console.log(“todayDate” + todayDate); try { const { data } = await updatePost({ variables: { …postInfo,_id:props.type, date_Created:todayDate}, }); window.location.assign(‘/Dashboard’); } catch (e) { console.log(“++++++++++++++++++++++++++++++++++++++++++++======”) console.error(e); } } return ( <div> <div> <input name = “title” value = {postInfo.title} onChange ={PostChange} ></input> <p>Comment</p> <input name = “content” value = {postInfo.content} onChange = {PostChange} ></input> <button onClick = {PostButton}>Update</button> </div> </div> ) } export default Update