почему это становится из «неопределенного» в «объект»?

Я использую next, chakra-ui и не знаю, почему это происходит

src/pages/myAccount.tsx

import { Box, Link } from '@chakra-ui/react';
import { withUrqlClient } from 'next-urql';
import React from 'react';
import { NavBar } from '../components/NavBar';
import { useGetUserByIdQuery } from '../generated/graphql';
import { createUrqlClient } from '../utils/createUrqlClient';

interface myAccountProps {}

const myAccount: React.FC<myAccountProps> = ({}) => {
const [{data, fetching},] = useGetUserByIdQuery();
console.log("1.", data);
if (!data) {
    return (
        <>
        Invalid Access, Not logged in
        </>
    )
}
console.log("2.", data);
let userInfo = data.getUserById;

return (
<>
<NavBar/>
    <Box>{userInfo.userId}</Box>
    <Box>{userInfo.userName}</Box>
    <Box>{userInfo.univ}</Box>
    <Box>{userInfo.sex}</Box>
    <Box>{userInfo.firstName}</Box>
    <Box>{userInfo.lastName}</Box>
    <Box>{userInfo.age}</Box>
    <Box>{userInfo.email}</Box>
</>);
}

export default withUrqlClient(createUrqlClient)(myAccount);

когда я выполнял этот код, он вообще не работал. И я получил журнал консоли, как это

1. undefined
1. {getUserById: null}
2. {getUserById: null}
1. {getUserById: null}
2. {getUserById: null}

Мой вопрос: сразу после "если", почему данные из "неопределенных" становятся "объектными"?