loading table of contents...

Headless Server Developer Manual / Version 2310

Table Of Contents 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) {
        grid {
          rows {
            placements {
              items {
                ... on CMTeasable {

Example 14.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 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 {} />}

Example 14.5. Page Component render function

Search Results

Table Of Contents

Your Internet Explorer is no longer supported.

Please use Mozilla Firefox, Google Chrome, or Microsoft Edge.