Monday, June 12, 2023

Experience Edge and using template reference in targetItem.

 I recently ran into an issue with Experience Edge where I had a datasource item droptree field pointing to a template field. I was using graphQL to retrieve the targetItem and then it's id.


fragment taxonomyTermFields on Item {
  ... on TaxonomyTerm {
    description {
      value
      jsonValue
    }
    termName {
      value
      jsonValue
    }
  }
}

query ProductCategoryList($datasource: String!, $language: String!) {
  # Datasource query
  # $datasource will always be set to the ID of the rendering's datasource item
  # (as long as the GraphQLData helper is used)
  datasource: item(path: $datasource, language: $language) {
    id
    name
    ... on ProductCategoryListing {
      templateFilter {
        targetItem {
          id
        }
      }
      root {
        targetItem {
          id
        }
      }
      filters {
        targetItem {
          name
          displayName
          children {
            results {
              id
              ...taxonomyTermFields
            }
          }
          ... on TaxonomyFolder {
            title {
              value
              jsonValue
            }
          }
        }
      }
      linkSectionTitle {
        value
        jsonValue
      }
      links {
        value
        jsonValue
      }
    }
  }

It turns out that this graphQL will always return null for targetFilter.targetItem.id because none of the templates are being published to Experience Edge (except for the template folders). To make it work with Experience Edge graphQL had to be changed as follows:


fragment taxonomyTermFields on Item {
  ... on TaxonomyTerm {
    description {
      value
      jsonValue
    }
    termName {
      value
      jsonValue
    }
  }
}

query ProductCategoryList($datasource: String!, $language: String!) {
  # Datasource query
  # $datasource will always be set to the ID of the rendering's datasource item
  # (as long as the GraphQLData helper is used)
  datasource: item(path: $datasource, language: $language) {
    id
    name
    ... on ProductCategoryListing {
      templateFilter {
        value
      }
      root {
        value
      }
      filters {
        targetItem {
          name
          displayName
          children {
            results {
              id
              ...taxonomyTermFields
            }
          }
          ... on TaxonomyFolder {
            title {
              value
              jsonValue
            }
          }
        }
      }
      linkSectionTitle {
        value
        jsonValue
      }
      links {
        value
        jsonValue
      }
    }
  }