Configuring GraphQL and Running your first query in XM Cloud NextJs App using ContentSDK

While working on real-world Sitecore projects, there are many scenarios where you need to fetch global content values that are reused across the entire site. Although we can retrieve item field values from data source items inside components in Next.js, there are times when we need to fetch content directly from the Sitecore CMS rather than through a component’s data source.

One of the most recommended approaches for this requirement is to execute GraphQL queries which use the Sitecore Edge API under the hood and return data in a strongly-typed schema.

In this blog, I will explain how to configure and execute GraphQL queries in a Next.js application using the Sitecore Content SDK.

About Sitecore ContentSDK

Sitecore XM Cloud brings a headless, API-first approach to content delivery. While GraphQL queries can be executed directly through Edge endpoints, Sitecore has introduced the Sitecore Content SDK to make this development experience even easier.

The Sitecore Content SDK is a lightweight and modern toolkit that makes it easier for developers to consume content from Sitecore XM Cloud / SitecoreAI. Instead of manually handling API calls, tokens, and GraphQL endpoints, the SDK provides a simple and unified way to fetch pages, components, dictionary phrases, and media directly into your front-end application. With native support for frameworks like Next.js, it enables faster development, cleaner code, and seamless integration with visual editing and personalization features in Sitecore.

Implementation

For this blog, i will create a simple item from a template and will read the value by running the graphql query.

Given a scenario, suppose you want to redirect to some url if session goes timeout. But the url should come from CMS. I will show you how you can retreive that url using graphql query.

Step 1: Create data item



To run my query, i just need the item path and field name property as of now. Please note, i am trying to fetch /about value from TimeoutRedirectUrl field. Field type is droptree


Step 2: Create Sitecore Client using Content SDK



import { SitecoreClient } from '@sitecore-content-sdk/nextjs/client';
import scConfig from 'sitecore.config';

const client = new SitecoreClient({
  ...scConfig,
});

export default client;

Explaining a bit about it:
  • SitecoreClient is the main object provided by Sitecore Content SDK. 
  • scConfig usually contains the settings required to connect to Sitecore XM Cloud / Edge. This uses graphql end point and api key which you provide in .env.local file
  • The ...scConfig spreads all the properties inside the object.
  • Now client knows how to call GraphQL content queries, Layout service, Search, Media asset requests etc.
  • Returning the client.
Step 3: Executing the graphql in GUI

For this, you need to know your GraphQL IDE link. You can get it from Sitecore XM Cloud deploy app, Once you reach here, click on Launch IDE.

Step 4: Build and Running the query 



Please note we wanted to grab url value i.e /about

Step 5: Running same query in NextJs App


Code:

"use client";
import { useEffect } from "react";
import client from "../lib/sitecore-client";

interface SettingsResponse {
  item: {
    SessionTimeoutUrl: {
      value: {
        url: string;
      };
    };
  };
}

const settingQuery = `
query GetItemByPath {  item(
    path: "/sitecore/content/FRB/DirectAxis/corporate-website/Data/Journey/Journey Global Settings"
    language: "en"
  ) {
    SessionTimeoutUrl: field(name: "TimeoutRedirectUrl") {
      value: jsonValue
    }
  }
}
`;

export default function GlobalFormLoadEventListenerProvider({ children }: { children: React.ReactNode }) {
  console.log("Entered GlobalFormLoadEventListenerProvider");
  useEffect(() => {
    const  data = client.getData<SettingsResponse>(settingQuery).then((data: SettingsResponse) => {
      const timeoutRedirectField = data?.item?.SessionTimeoutUrl?.value?.url;
       console.log("timeoutRedirectFieldvalue:", timeoutRedirectField);
    });
  }, []);
  return <>{children} </>;
}

Please note: Since we are using the droptree field type, You should be able to get the url value from it

const timeoutRedirectField = data?.item?.SessionTimeoutUrl?.value?.url;


Step 6: Output


Conclusion

In this blog, I have shown how you can fetch the field value from a data item using GraphQL query using Sitecore Content SDK. Similarly, you can fetch whole set of fields from a given item which can be utilise in whole application

References

https://doc.sitecore.com/sai/en/developers/content-sdk/sitecore-content-sdk-for-sitecoreai.html


Comments

Post a Comment

Popular posts from this blog

Working with Device Detection Module in Sitecore

Image
  What is Device Detection in Sitecore? Sitecore has an in-built feature called Device Detection which helps to detect at which device the content is shown into. When I say in-built that means its included as a standard feature in Sitecore XP 9.0 and later. This feature is also present in Sitecore XM Cloud , hence you do not need to buy a separate add-on or module to utilize device detection features.   The information gather from Device Detection Module can help content makers, allowing them to tailor the website experience based on the device type they are accessing it with, such as by displaying different layouts or content depending on screen size and capabilities. For Example, An iPhone and Android users might be looking at different content on same page.   Moreover, developers uses the same mechanism to personalize the components based on the device specific audience. They can setup Device Layout based on specific device parameters or can use the in-built rules...
Read more

Setup A/B Testing in Sitecore - Part 1

Image
  Setup A/B Testing in Sitecore - Part 1 In this article we will understand What is A/B Testing, Types of Testing in Sitecore, Actual Use Case and later we will see how we can setup A/B Testing in Sitecore XP solution with Rendering having different data source items.   Before we go further, lets understand WHAT IS A/B Testing ? A/B testing, also known as split testing, is a method used in marketing and product development to compare two versions of something to determine which one performs better. In an A/B test, two versions, A and B, are created, with one varying element between them. This element could be anything from the wording of an email subject line, the design of a web page, the placement of a button, or even the pricing of a product.   The versions, A and B, are then randomly  shown to similar audiences or users, and their responses are measured and compared. The version that performs better in terms of predefined metrics (such as click-through rate, conv...
Read more

Resolving: Failed to start service Sitecore Marketing Automation Engine Error

Image
  Description: In this blog, I will try to show you that how you can solve the common issue you might face while installing Sitecore 10.4 version XP Single On Premises. Sitecore Download Link: https://developers.sitecore.com/downloads/Sitecore_Experience_Platform/104/Sitecore_Experience_Platform_104 During installation of Sitecore 10.4 on my new device I got below error:   Misconceptions : Since the installation gets interrupted and we get only one option to close the Sitecore Install Assistance tool, The common mis conception arises while re-installing the Sitecore is that should I provide new Solr service name again? And/or should I provide new Sitecore instance name? The answer is NO . You can simply skip Install Solr Service Step: Then on next window provide the same Sitecore prefix or instance name which you provided earlier: Sitecore will override new files on previously created folders or services. Point to remember: Before you re-start you...
Read more