Get the Property of an item from a ReferenceField type in Sitecore JSS (react)

Question

I am currently working on a Sitecore JSS in which I am using GraphQL to retrieve data in Sitecore.

I have field named ArticleTag in my context item which is a (Droptree)

Sitecore GraphQL query:

 query{
      contextItem: item(path: "{22C1A19D-CEE3-5E4E-ADB5-373A0E225C91}") {
       id
       path
       ...on AppRoute {
        articleTag{
         targetItem{
           id
           name
          }
        }
     }
   }
 }

Results of the above query will render for the articleTag:

      "articleTag": {
        "targetItem": {
          "id": "726DE02ED0BA57CF8A2A9717E9FBA25D",
          "name": "Manual"
        }
      },

my code snippet to retrieve the value from the API to the React Component does not render the value:

const { contextItem } = graphQLResult;

<Text field={contextItem.articleTag.targetItem.name} />

Is there a way on how I can correctly get the property targetItem name/id of that ReferenceField in the ArticleTag field in my mapping in JSS? Thanks in advance.

Answer 1

In order to easily use the field value in a <Text /> field helper component, you will need to adjust your query a bit:

query {
  contextItem: item(path: "{22C1A19D-CEE3-5E4E-ADB5-373A0E225C91}") {
    id
    path
    ...on AppRoute {
      articleTag {
        jss
      }
    }
  }
}

The result of the query will give you something like this for the articleTag field:

"articleTag": {
  "jss": {
    "id": "5f705809-5366-505e-999d-f7c6ce48ef3e",
    "url": "/path/to/referenced/item",
    "fields": {
      "Manual": {
        "value": "This is some text in the Manual field from the item that is referenced by the Article Tag field"
      }
    }
  }
}

Note: in Experience Editor, the result will also contain an "editable" property/value, e.g.

"Manual": {
  "value": "This is some text in the Manual field from the item that is referenced by the Article Tag field",
  "editable": "[Experience Editor markup goes here]"
}

Then you would pass the jss.fields.Manual property to the field helper component, e.g.

const { contextItem } = graphQLResult;

<Text field={contextItem.articleTag.jss.fields.Manual} />

The jss property is a JSON blob that contains the field value as rendered by Layout Service/JSS and is for use in JSS field helper components.

Alternatively, you don't have to use the JSS field helper components. If you just need the articleTag.targetItem.fields.Manual value to display as text in your component, you can certainly do that.

query {
  contextItem: item(path: "{22C1A19D-CEE3-5E4E-ADB5-373A0E225C91}") {
    id
    path
    ...on AppRoute {
      articleTag {
        targetItem {
          Manual: field(name:"Manual"){
            value
          }
        }
      }
    }
  }
}

The result of the query will give you something like this for the articleTag field:

"articleTag": {
  "targetItem": {
    "Manual": {
      "value": "This is some text in the Manual field from the item that is referenced by the Article Tag field"
    }
  }
}

Usage:

const { contextItem } = graphQLResult;

<div>
  Name: {contextItem.articleTag.targetItem.Manual.value}
</div>

However, that value will not be editable in Experience Editor. If you need the field/value to be editable, you should use the value from the jss property.

The sample apps have good examples of this in the GraphQL-ConnectedDemo component and query. The links below are to the React sample, but the Vue and Angular samples have similar.

Query: https://github.com/Sitecore/jss/blob/dev/samples/react/src/components/GraphQL-ConnectedDemo/query.graphql

Component: https://github.com/Sitecore/jss/blob/dev/samples/react/src/components/GraphQL-ConnectedDemo/index.js