In a previous post I wrote about extending the JSS Layout service to support serialization of field types that aren’t serialized OOTB, like the Multiroot treelist added by SXA. Catch up on that post here. That was great, but there is a little more to ensure those field types are also mapped and serialized by GraphQL queries.

Assuming you have a Multiroot Treelist field in a template like the below:

You could expect to write a GraphQL query like the following to retrieve the target items selected in the Multiroot Treelist.

	{
	item(path: "{E97EE183-FA7B-45D0-A143-32B84514A6E9}") {
	myMultiRootTreelist: field(name: "Recommended Items") {
	… on MultilistField {
	targetItems {
	id
	name
	}
	}
	}
	}
	}

view raw example.graphQL hosted with ❤ by GitHub

Out of the box, the result of the “myMultiRootTreelist” field would be empty, as the type mapping is not recognised for that type and it falls back to a string. (ie. the pipe delimited list of IDs).

	{
	"data": {
	"item": {
	"myMultiRootTreelist": {}
	}
	}
	}

view raw example-result-OOTB.json hosted with ❤ by GitHub

The solution is pretty straight forward, and quite reminiscent of the solution for enabling serialization of these types in the Layout Service. Sitecore exposes configuration to map field types to “Field Type Factories”. In this case the Multiroot treelist’s raw value will always be the same as any other Multilist, a pipe delimited list of IDs. So we can use the same approach used for the other Multilist fields. Patching in new mapping in the configuration is as easy as:

	<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/&quot; xmlns:role="http://www.sitecore.net/xmlconfig/role/"&gt;
	<sitecore>
	<api>
	<GraphQL>
	<defaults>
	<content>
	<fieldTypeMappings>
	<standardTypeMapping type="Sitecore.Services.GraphQL.Content.TemplateGeneration.FieldTypeToGraphQLTypeMapper, Sitecore.Services.GraphQL.Content">
	<typeMapping hint="raw:AddTypeMapping">
	<map field="multiroot treelist" type="Sitecore.Services.GraphQL.Content.TemplateGeneration.FieldMapping.MultilistFieldTypeFactory, Sitecore.Services.GraphQL.Content" />
	</typeMapping>
	</standardTypeMapping>
	</fieldTypeMappings>
	</content>
	</defaults>
	</GraphQL>
	</api>
	</sitecore>
	</configuration>

view raw GWDT.GraphQL.FieldTypes.patch.config hosted with ❤ by GitHub

After applying this patch, running the same query as above will result in a response like:

	{
	"data": {
	"item": {
	"myMultiRootTreelist": {
	"targetItems": [
	{
	"id": "D69B608EEA2540D0B8E2C19F764CB73C",
	"name": "Blog 1"
	},
	{
	"id": "9440E7A4A1354B68AAD0A9453D7D5DF8",
	"name": "Blog 2"
	}
	]
	}
	}
	}
	}

view raw example-result-patched.json hosted with ❤ by GitHub

This approach could also be applied to any other types that store multilist like raw values to reference a list of items. Also consider using one of the pre-configured mappings when creating any custom field types and intend using them in GraphQL.