Headless Server Developer Manual / Version 2304
Table Of ContentsThe Fragment.tsx
handles the request to the Headless Server, requests the wanted data and calls a component to
pass it into.
With the CoreMedia Headless Server a query can ask for a specific placement. Like in the example below, the page is set
via the $path
variable and the placement by $placement
.
Additionally, It is also possible to exclude specific placements by passing an excludeNames
argument. For example if you like to
fetch all placements except "header" and "footer". Although both parameters can be used simultaneously, note that the excludeNames
is applied independent of names
and may remove some placements which are in the names
list.
const PLACEMENT_OF_PATH_QUERY = gql` query PlacementOfPathQuery($path: String!, $placement: String! ) { content { pageByPath(path: $path) { grid { rows { placements(names:[$placement]) { name items { ...Teasable } } } } id title } } } ${teasableFragment} `;
Example 14.16. fetching the wanted placement
Afterwards, the items and the name of the placement are passed to the PageGridPlacement
component of the app, and
it handles the rendering from here. Since it is used in both, the standalone fragment and the complete app,
creating a shared module for the required components becomes handy.
const placementName = data.content.pageByPath?.grid?.placements[0].name; const placementItems = data.content.pageByPath?.grid?.placements[0].items; return ( <PageGridPlacement name={placementName} items={placementItems} /> );
Example 14.17. rendering the PageGridPlacement