JSON:API layout enhancer

Features

This module provides additional functionality on top of JSON:API & JSON:API extras for pages created using layout builder & blocks placed in layout. It helps to dynamically fetch a page data where the page is created using a content type and has layout builder enabled. It provides two main features to help with the same:

- Dynamic JSON:API calls based on page url alias : It provides a route [/jsonapi/page/{langcode}/{alias}] which to get page data (a node on which blocks have been added using layout builder) by allowing API calls to be dynamic based on whatever the author adds a URL alias for the page. The route returns JSONAPI data and can be fetched based on language code, bundle & uuid of the node pages.
- Layout data enhancer : This module provides a layout enhancer plugin which helps to get the data of all blocks added to a node layout via JSON:API. It also returns the total data of each block added via layout builder for all of its fields, thereby needing to avoid multiple API calls to get the total data of a page.

For example, if we have a node say A, on which we have added three blocks via layout viz. B1, B2, B3. The content author has added a URL alias as 'new-page' in the alias field & has created the page in english as the language. Then using this module we can get the entire data of this page using the following route:
/jsonapi/page/en/new-page

Additional Requirements

This module requires the following modules:

Core Modules:

• JSON:API

• Layout Builder

Contributed Module:

• JSON:API Extras

Patch:

• Please check out this issue and apply the appropriate patch. This patch is required for the core JSON:API module as this ensures the layout_builder__layout key starts to appear in the JSON:API output, for e.g. the patch compatible with D 10.3.1.
  Note: Please check the patch to match with your Drupal version.

Community Documentation

Using to get page data dynamically:

• This module allows to fetch any newly created page data dynamically over JSON:API using the routes provided. Using only the core JSON:API resource URIs requires us to know the entity type & UUID or entity ID for anyone to be able to call the APIs and get the data. Lets say we want to create a new page using a node & we place blocks via layout builder to provide content to the node structure, which can have a url alias of '/new-page'. Using core JSON:API to get this data would be problematic for any front end/ other systems consuming the data as this page will have a new entity ID and UUID.

• This is where our module jumps in & provies the flexibilty using a new route provided: '/jsonapi/page/{langcode}/{alias}' where langcode stands for the language in which the node was created & alias is the url alias of the node.

• So in this example, to fetch data for the new page, it would require us to access '/jsonapi/page/en/new-page'. This would return the data in exactly the same format as core JSON:API URIs does.

• We can thus keep on creating 'n' number of new pages and the front end system would always be able to get this data dynamically based on the URL alias. This is possible in the way that if we have our application URLs constructed in the way like https://example.com/{alias}, which would enable the front end to read the alias from the URL the user is exploring on the browser. They can then read the value & use it to make the API call to fetch the data for any new page. This is very useful in a decoupled structure.

• On most websites though, the home/front page doesn't have an extra path component to the URL meaning it is usually of the form https://example.com. This means there would be no path component from the URL to get the node alias for the front end to make the API call. To handle this use case, the module uses the configuration for Sytem > Basic site settings > Default front page. We need to set the node path here which will be used as fallback when no alias is passed in the API endpoint. This means calling '/jsonapi/page/en' would then return the content of the front page node set in the system site config, thereby allowing us to pass this info to front end system without needing a URL alias & also keeps the config at Drupal dynamic as we can set any node as home page under system site configuration.

• This module supports pages with two levels of aliasing to fetch the data. For e.g., you may set the URL alias as /new-page/page-1 and the API would return data from the endpoint '/jsonapi/page/en/new-page/page-1'.

• Do note that this will return the node data as well even if no layout has been enabled & can be used to get the data of all fields attached to a node.

Using to enhance layout data in JSON:API output:

• This module provides a enhancer plugin which helps to fetch the data of all block content added via layout builder. It also loads the full data of each block entity, thereby providing the entire page structure data in a single API call.

• To enable this from configuration, navigate to Admin Configuration > Web Services > JSON:API > JSON:API Extras > Resource overrides. We will get a list of all resources where we can do any override. Say we need to override for our Content Type Basic Page, we select Overwrite > layout_builder__layout > Click On Advanced > Select 'Custom block content and attributes' under the options for the field Enhancer.

• To check how the data is returned with all blocks, we need to invoke the API for any page say '/jsonapi/page/en/new-page'. When we check the response, we need to follow the output keys in the manner : "data" > "layout_builder__layout" > "components" > "block_content_data"

• The "components" key is an array of objects which will contain the block data one by one in separate objects, each under "block_content_data" for that particular block.

Refer to the readme for detailed information.