Creating a Handlebars Component using GraphQL

A guide for creating new Handlebars Components using the GraphQL API.

To create a custom Handlebars component via GraphQL, you need to make a GraphQL call to execute the createOrUpdateComponentTemplate mutation.

The createOrUpdateComponentTemplate mutation creates all the files required to render your component and checks them into the Git repository at the backend.

Here is an example GraphQL call, which includes the Query and Variables to create the custom Handlebars component.

Query

In the GraphQL query, we added different fragments and the createOrUpdateComponentTemplate mutation so that we can declare the variables to the query.

fragment Error on Error {
    message
    fields
}

fragment PropPossibleValue on PropPossibleValue {
  key
  value
  label
  description
}

fragment PropDefinition on PropDefinition {
  name
  dataType
  list
  defaultValue
  label
  description
  possibleValues {
      ...PropPossibleValue
  }
  control
}

fragment ComponentConfiguration on ComponentConfiguration {
  applicablePages
  description
}

fragment ComponentProperties on ComponentProperties {
  config {
    ...ComponentConfiguration
  }
  props {
    ...PropDefinition
  }
}

fragment ComponentPropDefinitionOverride on ComponentPropDefinitionOverride {
  name
  defaultValue
  control
}

fragment ComponentConfigurationOverrides on ComponentConfigurationOverrides {
  applicablePages
  description
}

fragment ComponentDefinition on ComponentDefinition {
  id
  config {
    ...ComponentConfigurationOverrides
  }
  props {
    ...ComponentPropDefinitionOverride
  }
}

fragment ComponentTemplateDefinition on ComponentTemplateDefinition {
  id
  markupLanguage
  content
  defaults {
    ...ComponentProperties
  }
  components {
    ...ComponentDefinition
  }
}

mutation CreateOrUpdateComponentTemplate(
  $id: String!
  $componentId: String!
  $description: String!
  $applicablePages: [ComponentPageScope!]!
  $content: String!
) {
  createOrUpdateComponentTemplate(
    templateInput: {
        id: $id
        markupLanguage: HANDLEBARS
        defaults: {
            config: {
                applicablePages: $applicablePages
                description: $description
            }
            props: []
        }
        content: $content
        components: [
            {
                id: $componentId
            }
        ]
    }
  ) {
    result {
      ...ComponentTemplateDefinition
    }
    removedAssets {
      name
      directoryName
      subDirectoryName
      feature
    }
    errors {
      __typename
      ...Error
    }
  }
}

Variables

In the variables portion of the request, we create the TopMembers component.

{
    "id": "TopMembers",
    "componentId": "custom.widget.TopMembers",
    "description": "Top Members by Likes",
    "applicablePages": [
        "COMMUNITY",
        "CATEGORY",
        "FORUM_BOARD"
    ],
    "content": "

• John <li:i18n key='firstPlace'></li:i18n>
• BryanN
• LauraV
• Larry
• Javid

 
<li:i18n key='congrats'></li:i18n>"
}