close

Filter

Close X
loading table of contents...

Headless Server Developer Manual / Version 2010

Table Of Contents

12.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.

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 12.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 stand alone 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 12.17. rendering the PageGridPlacement


Search Results

Table Of Contents