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.

Don't understand why not data on the front-end
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.

I don't get it. You have `footer` in your data but you never use it — Konrad, Dec 26 '22 at 15:20
@Konrad Could you deeply explain what you don't understand so I can explain. That what trying to figure I have file within project that had navigation.js and footer.js I have setup both with the same code to map the data in my html for both files and don't know why not print the data on the front-end. — Perceptor Dev, Dec 26 '22 at 16:06

score 2 · Accepted Answer · answered Dec 26 '22 at 20:03

2

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>
))}

answered Dec 26 '22 at 20:03

Michel Floyd

18,793
4
24
39

Thank you I didn't see I thought I was following the query pattern but sometimes it's hard to follow the correct pattern of the query. – Perceptor Dev Dec 26 '22 at 21:42

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

1 Answers1