More GraphQL Query Example In Sitecore JSS

Hello everyone. In this blog we will see more example of writing GraphQL queries. This is continue part of my previous blog which you can find here

So let's start without wasting any extra time. Below is the Sitecore structure which we will be using in our case.

Let me give you an overview. We are having going to read children of Social Links folder. There are links item created from two different template. One is Social Link and another one is Footer Link. This is just for example purpose. Social Link template has one Image field named as logo. Below is the screenshot for your reference.

Reading Children of Item passed as query parameter in GraphQL

If you see above query, we are passing datasource and language as Paramter. Then we are calling children which is responsible for getting all Sitecore items under result object.We are just showing the template name and item name from the result

Reading Children of of Item passed as Query in GraphQL with template id filter

If you see we are passing one paramter to Children that is includeTemplateIDs : ["{template id}"] and it get result for those items only

Reading Children of of Item passed as query paramtere in GraphQL with template type safe.

If we think in practical,this type of logic can be used when we are having multiple items as children with different template type. Also those two items as image field with different name(logo - Social Link template and image - Footer Link template) and we have two read those image field. So when using type safe we can pass the exact field name from the respective template to get the values.Below is the screenshot for your reference.

In the above query, you might be wondering what is ...ImageQuery. Let me explain, that is fragmentation concept in GraphQL. When we are having similar field structure which is going to be use at multiple places, then separate it out using fragment.

Reading Multilevel Children of of Item passed as query parameter in GraphQL with template type safe.

There is one more property which can be used with when we are reading field in GraphQL and that is jsonValue.It return all the members of that field in JSON format.

Hope this blog will help you. Happy learning!! Happy Sitecoring!!

You can check my other blogs blog related to Sitecore

Comments

Post a Comment

Popular posts from this blog

Sitecore XM Cloud Form Integration with Azure Function as Webhook

Image
Hello everyone, In this blog, we will see, how Azure Function can be used with Sitecore Forms. Before starting, I would request everyone to read my previous blog on XM Cloud Form as I am not going to go deep with how to create forms in XM Cloud. Creating Azure Function : Will serve as our Webhook Creating and Integrating Form : XM Cloud Form Creating An Azure Function I will not explain how you can create Azure Function with Http Trigger. You can check this youtube link here . Also in reference section, I will provide the link how you can connect and deploy your changes to azure function using Visual Studio. Azure Function Code : Its just a starter code which Azure function by default. Creating XM Cloud Form and Integrating with Azure Function Step 1 : Create a form from Form Editor and once form us published, you can see the below view in preview state. Here you can edit your form too. But it always recommended to use a version of that form as whatever changes is done will ...
Read more

Automate RSS Feed to Sitecore XM Cloud: Logic App, Next.js API & Authoring API Integration

Image
Hello everyone, In this blog, we will see a pratical use case of reading RSS feed and creating the respective items in Sitecore XM Cloud. To accomplish the task, we will use Logic App, an API created in Next JS and lastly calling the Authoring API to execute mutation query for Item Creation in Sitecore. Let's divide the process into 2 parts: Logic App : This will mostly focus on fetching the feed from RSS, performing transformation, storing the result in array of json object and pushing the data to next js api endpoint. Next JS API Development : This will take care of calling the authoring api of XM Cloud instance and performing the create item mutation query on the recieved data from Logic App. Logic App Azure Logic App is a cloud-based service provided by Microsoft Azure that allows you to automate workflows and integrate applications, data, services, and systems without writing complex code. It enables you to create automated workflows visually through...
Read more

Create and Fetch Content From Sitecore Content Hub One using GraphQL and React

Image
Hello everyone, In this blog, we will see overview of Sitecore Content Hub One product its benefits, features etc. This blog will walkthrough below listed points. Overview Features Content Hub One Dashboard Creating Taxonomy Creating Content Type Uploading New Media Creating Content Items From Content Type Getting GraphQL Token Creating Sample React Application To Read the Content from Content Hub One Overview Sitecore Content Hub One is a powerful platform. It is designed to centralize and streamline content creation, management, and distribution across various channels.Focuses on delivering content via APIs, enabling seamless integration with various front-end frameworks.Hosted in the cloud, offering scalability, automatic updates, and reduced infrastructure management.Provides flexible APIs and SDKs for developers to integrate and build custom solutions efficiently. Features Headless Content Management : Allows content to be delivered via APIs to any front-end or platfor...
Read more