Undefined after console are homepage to see if we getting correct the data in inspect element [Solved]

Question

The detail of the problem is that I'm not getting the data we expected within our code. We have set up the following to see within our project folder.

Within webpack.config.js we set up resolve.alias in the webpack configuration, so we can include it in the resolve object of the webpack config file.

This is the file:

module.exports = {
  // other webpack config options
  resolve: {
    alias: {
      // Create an alias for the queries folder
      queries: path.resolve(__dirname, 'src/queries'),
    },
  },
};

This is what are path name will look like:

import { homeQuery } from "queries/navigation/homeLinks";

1. Created a webpack.config.js.
2. Console.log are data of homeData and HomeData.homelink.
3. Tested the query within GraphQL Playground in Hygraph.

From there I checked the console in the browser.

I have found out we are not getting the query in our body that we want but we have tested the query within GraphQL Playground. We have found out that we correctly getting the correct query that we want to get into our data within console.log.

This is a query for the homepage:

import { gql } from "@apollo/client";

export const homeQuery = gql`
    query homeLinks {
        pages(
            where: {id: "clbzl7ovpe64d0ak5qh7o2p8f", slug: "Home"}
            stage: PUBLISHED
            locales: en
        ) {
            id
            slug
            title
        }
    }`
; 

This where we console are data for the homepage:

 console.log(homeData && homeData?.homeLink?.pages);
 console.log(homeData)

import React from 'react';
import '../assets/style/navigation.css';
import { useQuery } from '@apollo/client'; 
import { BrowserRouter as Router, Link } from 'react-router-dom';

import { homeQuery } from "../queries/navigation/homeLinks";

import { logoassetsQuery } from "../queries/navigation/logoLinks";

export default function App() {

  const { loading: logoAssetsLoading, error: logoassetsData } = useQuery(logoassetsQuery);
  
  //This is query for the pages.
  const { loading: homeLoading, error: homeError, data: homeData } = useQuery(homeQuery);
  
  //This is for front-end error message.
  if (logoAssetsLoading) return <p>Loading Logo Assets...</p>; 
  if (homeLoading) return <p>Loading... this page links.</p>
  if (homeError) return <p>Error :( this page don't work.</p>; 

  // Debugging step 1: Check the value of data.navigation
  console.log(homeData && homeData.homeLinks)
  console.log(homeData)
  
  // Debugging step 2: Check the value of data
  //console.log(data);
    

  return (
    <div className='navigation'>
      <div className='full_width_container'>
        <div className='wrapper'>
          <Router>
              <React.Fragment>
                  <nav>
                      <div className='nav_groups logo'>
                          {homeData && homeData?.homeLinks?.pages && homeData?.homeLinks?.page(link => (
                              <li key={link?.id}>
                                <Link to={`/${link?.slug}`}>
                                  <img src={logoassetsData?.logoAssets} alt='main logo'/>
                                </Link>
                              </li>
                          ))}
                      </div>
                  </nav>
              </React.Fragment>
          </Router>
      </div>
    </div>
  </div>
  );
}