Data not appearing on the Front-End of my web page

Question

I'm struggle to figure out why my data is not mapping the data on these two components. I have tried this two method to debug my code and has seen the data object for the navigations & footer.

1. Don't understand why not data on the front-end
2. I have fixed the query and tested in API playground of Hygraph.

Debugging step 1: Check the value of data.navigation:
   console.log(data.secondRow);
   console.log(data.thirdRow);
   console.log(data.navigation);


Debugging step 2: Check the value of data:
   console.log(data);

This footer:

const myQuery = gql`
  query myFooter {
    footer(
      where: {id: "clbzmtwsa5oq60birx0g62hcf"}, 
      stage: PUBLISHED, 
      locales: en
    ) {
      secondRow {
        slug
        id
        title
      }
      thirdRow {
        slug
        id
        title
      }
    }
  }`
;

{data && data.secondRow && data.secondRow.map(({ id, title, slug }) => (
   <li key={id}>
      <Link to={`/products/${slug}`}>
         {title}
      </Link>
   </li>
))}

{data && data.secondRow && data.secondRow.map(({ id, title, slug }) => (
   <li key={id}>
      <Link to={`/products/${slug}`}>
         {title}
      </Link>
   </li>
))}

This navigations:

const myQuery = gql`
  query myNavigation {
    navigations(
      where: {id: "clbzmx3wu5rr20bir55ciubrv"}
      stage: PUBLISHED
      locales: en
    ) {
      pages {
        id
        slug
        title
      }
    }
  }`
;

{data && data.navigations && data.navigations.pages && data.navigations.pages.map(({ id, title, slug }) => (
     <li key={id}>
       <Link to={`/products/${slug}`}>
         title}
       </Link>
     </li>
))}

We have add && twice to see if that would pull the data and by adding:

data && data.navigations && data.navigations.pages && data.navigations.pages.map

But it still does not allow to get the data from the console to the front-end of the website. I so if any have this some issue can you please help because I don't know what else I can do figure this or debug this problem so if you can some quick advice and suggest that would be great.

Answer 1

You're missing the query name in your deconstruction. Instead of:

{data && data.secondRow && data.secondRow.map(({ id, title, slug }) => (
   <li key={id}>
      <Link to={`/products/${slug}`}>
         {title}
      </Link>
   </li>
))}

Try:

{data?.footer?.secondRow?.map({ id, title, slug }) => (
   <li key={id}>
      <Link to={`/products/${slug}`}>
         {title}
      </Link>
   </li>
))}