1

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.

2

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

  • Hi Adam thanks for the response. I have tried to use the "jss" (<Text field={contextItem.articleTag.jss.fields.Manual} />) just like what was described but it doesn't render anything on my end. I did try to use the targetItem but it is also returning an undefined error. – Jovit Mayo Jan 28 at 9:08

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.