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