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
                }
              }
            }
          }
        }
      }
    }
  }
`;

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