close

Filter

loading table of contents...

Headless Server Developer Manual / Version 2010

Table Of Contents

12.2.3.1 Page Component and Query

The page is the entry point for the site and is loading essential data for the homepage like the PageGrid, PageGridPlacements and the banners or collections. So the query in the Page.jsx loads this content and passes it down to all other view components. The Query looks like this:

const PAGE_QUERY = gql`
  query PageQuery($pagePath: String!) {
    content {
      pageByPath(path: $pagePath) {
        id
        title
        grid {
          rows {
            placements {
              name
              items {
                ... on CMTeasable {
                  id
                  teaserText
                  teaserTitle
                }
              }
            }
          }
        }
      }
    }
  }
`;

Example 12.4. Page query with siteID


The pagePath is passed to the useQuery hook as an variables option, so it is available to the query. The path in our example is "corporate".

From the received data, the rows are now passed on as an array to the PageGrid component by applying the spread operator on data.content.page.grid. But only if grid has any content. To test this it can be written as boolean equation with the ´&&´ operator, as shown in the example.

The page itself is a good place to start layouting the app, since it is the first component to render to the DOM. So a header and footer component for example could be added here too.

function Page(props) {
  const pagePath = "corporate";
  const { loading, error, data } = useQuery(PAGE_QUERY, {
    variables: { pagePath },
  });

  if (loading) {
    return <p>Loading...</p>;
  }
  if (error) {
    return <p>Error :(</p>;
  }

  return (
    <div className="page">
      {data.content.pageByPath.grid && <PageGrid {...data.content.pageByPath.grid} />}
    </div>
  );
}

Example 12.5. Page Component render function


Search Results

Table Of Contents