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

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