Headless Server Developer Manual / Version 2304
Table Of ContentsThe 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 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 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 14.5. Page Component render function