Multiroot treelist serialization in GraphQL

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:

A sample Multiroot treelist in a template

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": {}
}
}
}

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>

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"
}
]
}
}
}
}

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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s