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

[vaibhavkrsi]

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> 

[SoumyaSubhrajit]

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.

[vaibhavkrsi]

@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.

[SoumyaSubhrajit]

@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.

[vaibhavkrsi]

@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.

[SoumyaSubhrajit]

@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() .

[RoyGitt]

I have the same issue