Get Home Page

[SamuelHadsall]

What am I needing to do around getting just the home page data. I've tried using the usePage hook and passing the home page id, but this doesn't seem to be getting the data. Is there something else I should be using?

[mjzorick]

Hi @SamuelHadsall. Could you provide more information such as the response you are getting, error or empty dataset, when using the usePage hook? Also try passing the pageUri instead of ID and see if it changes anything. https://faustjs.org/docs/next/reference/hooks/usePage

[SamuelHadsall]

Hi @mjzorick, thanks for the reply. I was actually getting ready to update this. I think I figure it out for the most part using:

const page = usePage({ id: '/', idType: PageIdType.URI, });

The part now that I need to figure out, and this just comes with me not be very familiar with Nextjs/React is getting an ACF Repeater.

When I query page?.homeHeroSlider?.homeHeroSliderHeroSlider this just returns Symbol(gqty-proxy)

If I look at homeHeroSliderHeroSlider from the GraphQL IDE I see something like:

       homeHeroSlider {
          homeHeroSliderHeroSlider {
            h2Header
            sliderHeader
            sliderMainText
            sliderCta {
              url
              title
            }
            homeHeroSliderImage {
              sizes
              slug
              sourceUrl
              srcSet
            }
          }
        }

So do I need to create a new component for this with a custom query?

Add some addiotnal context. When I return page this is what I see available:

 __typename: Symbol(gqty-proxy),
  ancestors: Symbol(gqty-proxy),
  author: Symbol(gqty-proxy),
  authorDatabaseId: Symbol(gqty-proxy),
  authorId: Symbol(gqty-proxy),
  cards: Symbol(gqty-proxy),
  children: Symbol(gqty-proxy),
  commentCount: Symbol(gqty-proxy),
  commentStatus: Symbol(gqty-proxy),
  comments: Symbol(gqty-proxy),
  conditionalTags: Symbol(gqty-proxy),
  content: Symbol(gqty-proxy),
  contentType: Symbol(gqty-proxy),
  contentTypeName: Symbol(gqty-proxy),
  databaseId: Symbol(gqty-proxy),
  date: Symbol(gqty-proxy),
  dateGmt: Symbol(gqty-proxy),
  desiredSlug: Symbol(gqty-proxy),
  editingLockedBy: Symbol(gqty-proxy),
  enclosure: Symbol(gqty-proxy),
  enqueuedScripts: Symbol(gqty-proxy),
  enqueuedStylesheets: Symbol(gqty-proxy),
  excerpt: Symbol(gqty-proxy),
  featuredImage: Symbol(gqty-proxy),
  featuredImageDatabaseId: Symbol(gqty-proxy),
  featuredImageId: Symbol(gqty-proxy),
  guid: Symbol(gqty-proxy),
  homeHeroSlider: Symbol(gqty-proxy),
  id: Symbol(gqty-proxy),
  isContentNode: Symbol(gqty-proxy),
  isFrontPage: Symbol(gqty-proxy),
  isPostsPage: Symbol(gqty-proxy),
  isPreview: Symbol(gqty-proxy),
  isPrivacyPage: Symbol(gqty-proxy),
  isRestricted: Symbol(gqty-proxy),
  isRevision: Symbol(gqty-proxy),
  isTermNode: Symbol(gqty-proxy),
  lastEditedBy: Symbol(gqty-proxy),
  link: Symbol(gqty-proxy),
  menuOrder: Symbol(gqty-proxy),
  modified: Symbol(gqty-proxy),
  modifiedGmt: Symbol(gqty-proxy),
  newsroomArchiveOptions: Symbol(gqty-proxy),
  pageId: Symbol(gqty-proxy),
  parent: Symbol(gqty-proxy),
  parentDatabaseId: Symbol(gqty-proxy),
  parentId: Symbol(gqty-proxy),
  postCards: Symbol(gqty-proxy),
  preview: Symbol(gqty-proxy),
  previewRevisionDatabaseId: Symbol(gqty-proxy),
  previewRevisionId: Symbol(gqty-proxy),
  revisionOf: Symbol(gqty-proxy),
  revisions: Symbol(gqty-proxy),
  seo: Symbol(gqty-proxy),
  slug: Symbol(gqty-proxy),
  status: Symbol(gqty-proxy),
  template: Symbol(gqty-proxy),
  templateGenericContent: Symbol(gqty-proxy),
  templateHome: Symbol(gqty-proxy),
  templates: Symbol(gqty-proxy),
  title: Symbol(gqty-proxy),
  uri: Symbol(gqty-proxy)
}

[josephfusco]

Hey @SamuelHadsall it looks like this has been marked as answered. #820 (comment)

[SamuelHadsall]

Oh yes @josephfusco sorry I should have updated this. I was able to resolve this with what was provided above and a little more research. Which was that I wasn't looping through the slider properly

 const home_slider = page?.homeHeroSlider?.homeHeroSliderHeroSlider.map((slide, index) => {  
    return {...slide}
  });

  
  const slide = home_slider.map((item, index) => {
      const slide_title = item?.sliderHeader;
      const text = item?.sliderMainText;
      const image_slug = item.homeHeroSliderImage.mediaItemUrl;
      const image_sizes = item.homeHeroSliderImage?.sizes;
      const image_srcset = item.homeHeroSliderImage?.srcSet;

      return (
        <div key={index} className="slide">
          <h2>{item?.sliderHeader}</h2>
          <p className="slide-main-text">{item?.sliderMainText}</p>          
          <img             
            src={ image_slug } 
            alt={item?.sliderHeader}
            data-sizes={ item.homeHeroSliderImage?.sizes }
            data-srcSets={ item.homeHeroSliderImage?.srcSet }
            className="wp-image-3316 lazyloaded"             
          />
        </div>
      )
  });