TypeError: Cannot read properties of undefined (reading 'length') bannerData.length is not fetching from sanity (sanity has 2 products in it's db)

[Vaibhav Kumar Singh]

import { HeroBanner,FooterBanner  } from './components';  
import { client } from '../../lib/client';


const Home = ({products,bannerData}) => {
  return (
    <div>
      <HeroBanner heroBanner={bannerData.length && bannerData[0]}/> 
        <div className='products-heading'>
        <h2>Best Selling Products</h2>
        <p>Speakers of many variations</p>
     </div>
     <div className='products-containers'>
        {
        products?.map(
          (product) => product.name
          )
        }

        <FooterBanner/>
     </div>
    </div> 
  )
}
export const getServerSideProps = async()=>{
  const query = '*[_type == "product"]';
  const products = await client.fetch(query);

  const bannerQuery = '*[_type == "banner"]';
  const bannerData = await client.fetch(query);
  (bannerQuery);
  return {
    props: {
      products,
      bannerData
    }
  }

}

export default Home;

terminal log -:

src\app\page.js (9:41) @ length
error - TypeError: Cannot read properties of undefined (reading 'length')
    at Home (./src/app/page.js:14:32)
    at stringify (<anonymous>)
   7 |   return (
   8 |     <div>
>  9 |       <HeroBanner heroBanner={bannerData.length && bannerData[0]}/>   
     |                                         ^
  10 |         <div className='products-heading'>
  11 |         <h2>Best Selling Products</h2>
  12 |         <p>Speakers of many variations</p> 

[Soumya Subhrajit Bag]

hi, @vaibhavkrsi are you adding products in the sanity components, the error is saying that <HeroBanner heroBanner={bannerData.length && bannerData[0]}/> means in bannerData there is nothing means 'undefined' so, when you try to do bannerData.length is will immediately give you undefined, so my suggestion is to add some products in the sanity page ok. If the problem occure than fill free to talk in the comment section.

[Vaibhav Kumar Singh]

@SoumyaSubhrajit Yes I have already added products in my sanity db both in banner and products it's still showing the same error. I have also tried bannerData at index 0 and 1, After adding 2-3 products. but it's still showing the same error. seems like it's not fetching my data.

[Soumya Subhrajit Bag]

@vaibhavkrsi I see the error now, change const bannerData = await client.fetch(query); to const bannerData = await client.fetch(bannerQuery); you add only (query) instated (bannerQuery) so I guess that the error try and run again, I guess that will resolve your issue.

[Vaibhav Kumar Singh]

@SoumyaSubhrajit Yes , after changing that too I'm still facing the same error. Why bannerData.length.

the code is running after I write heroBanner={bannerData && bannerData.length && bannerData[0]}/>
so I guess bannerData is working but after removing it is showing error in bannerData.length so I think the error is in fetching length and my product.

[Soumya Subhrajit Bag]

@vaibhavkrsi check if the error you are facing right now maybe it is in the client.js check one the url is fetching the right kind of data or not by manually await and fetch() .

[Arannyak Roy]

I have the same issue