Till yesterday, I knew that to provide content in Sitecore JSS I need to create YML file.
But today I learn that one can also create JSON file as well
Lets suppose we have following Graphql en.yml file
fields:
pageTitle: GraphQL | Sitecore JSS
placeholders:
jss-main:
- componentName: ContentBlock
fields:
heading: Using GraphQL with JSS
content: |
<p>This is a live example of using Integrated GraphQL and Connected GraphQL with a JSS app.
For more information on GraphQL use in JSS, please see <a href="https://jss.sitecore.com" target="_blank" rel="noopener noreferrer">the documentation</a>.</p>
- componentName: GraphQL-Layout
placeholders:
jss-graphql-layout:
- componentName: GraphQL-IntegratedDemo
fields:
sample1: Hello integrated GraphQL world!
sample2:
href: https://www.sitecore.com
target: _blank
text: GraphQL lets you get structured field data too
- componentName: GraphQL-ConnectedDemo
fields:
sample1: Hello connected GraphQL world!
sample2:
href: https://www.sitecore.com
target: _blank
text: GraphQL lets you get structured field data too
I want to convert it to json file which can be easily accopalieshed by visiting https://onlineyamltools.com/convert-yaml-to-json as
 |
I kept this json data in “testymltojson.json” file as
He is the complete code
{
"fields": {
"pageTitle": "GraphQL | Sitecore JSS - YML To JSON"
},
"placeholders": {
"jss-main": [
{
"componentName": "ContentBlock",
"fields": {
"heading": "Using GraphQL with JSS - YML To JSON",
"content": "<p>This is a live example of using Integrated GraphQL and Connected GraphQL with a JSS app.\nFor more information on GraphQL use in JSS, please see <a href=\"https://jss.sitecore.com\" target=\"_blank\" rel=\"noopener noreferrer\">the documentation</a>.</p>\n"
}
},
{
"componentName": "GraphQL-Layout",
"placeholders": {
"jss-graphql-layout": [
{
"componentName": "GraphQL-IntegratedDemo",
"fields": {
"sample1": "Hello integrated GraphQL world!",
"sample2": {
"href": "https://www.sitecore.com",
"target": "_blank",
"text": "GraphQL lets you get structured field data too"
}
}
},
{
"componentName": "GraphQL-ConnectedDemo",
"fields": {
"sample1": "Hello connected GraphQL world!",
"sample2": {
"href": "https://www.sitecore.com",
"target": "_blank",
"text": "GraphQL lets you get structured field data too"
}
}
}
]
}
}
]
}
}
So if you deployed it to Sitecore, this json file will create its item as
Short tip but very useful!!!
