Sitecore JSS Layout service extensions

In my Sitecore symposium presentation in November 2019, I talked about our journey of converting from a MVC based solution to JSS based solution.
I shared the key take aways earlier in a previous blogpost.

In my presentation I touched upon a few extensions we made in our company that were really helpful for us and might also be interesting for the community to take a look at. So I decided to create a few gists to share them with you.

How to create custom content resolver

To create a custom content resolver. Next to writing the code to create the resolver, you have to add it to Sitecore. It would end up somewhere in the following location in the Sitecore tree:
/sitecore/system/Modules/Layout Service/Rendering Contents Resolvers
It should inherit from the following template:
sitecore/templates/System/Layout/Layout Service/Rendering Contents Resolver 
Then in that item point to the Class and assembly the sources are living in.

Then for specific renderings, where you require the custom resolver,  in the rendering's definition item, in the 'Layout Service' section you select your custom contents resolver:

How to create a custom layout processor

For a custom processor that extends the layoutservice Layout. One needs to register a custom layout service processor. This might look like this in a config file:

   <sitecore>
   <pipelines>
      <group groupName="layoutService">
        <pipelines>
          <getLayoutServiceContext>
            <processor type="Custom.SitecoreLibrary.JavascriptServices.ErrorsLayoutServiceContextProcessor, Custom.SitecoreLibrary" resolve="true">
              <AllowedConfigurations hint="list">
                <!-- Unless you change the Layout Service config used by your JSS app, this should always be present. -->
                <jss>jss</jss>
              </AllowedConfigurations>
              <Applications hint="list">
                <!-- Restrict the JSS apps for which this processor will execute. -->
                <reactApp>personal</reactApp>
              </Applications>
              <Routes hint="list">
              </Routes>
            </processor>

Custom Descendants resolver

The default content resolver in the JSS version we used only returned the specific datasource item a rendering has with its fields. We were looking for a solution that the content resolver would return the entire content tree of this datasource item, so including all descendants of that item. This for all kinds of purposes.

You can find the code sample here.

Custom GraphQL extension resolver

For some renderings, we wanted the option to give the content editor to add a random piece of content that might be defined somewhere else on the site. For this we created an extension that allows, for a specific place in this component, to configure a custom GraphQL query to grab a piece of content and display it. This extension reuses the existing GraphQL fields that every JsonRendering has out of the box.

You can find the code sample here.

Custom Layout extension

For applications which are highly functionality oriented, with funnels or data driven solution, we found that we had a need for retrieving common error messages that could be used across the JSS application. For example generic error message around input validation, or site wide errors. Instead of retrieving these in separate calls, or adding them to specific rendering outputs, we wanted to add them to the basic layout of the app, so that it was always available to the app, even before anything is rendered. For this we created an extension on the custom layout. 

You can find the code sample here.