close

Filter

loading table of contents...

Headless Server Developer Manual / Version 2204

Table Of Contents

14.3.2 Caching and rendering the requested placement

The 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


Search Results

Table Of Contents
warning

Your Internet Explorer is no longer supported.

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