XM Cloud - Getting component specific data

If you are binding your component with the layout response but feel that if a custom property can come in the layout response and you could bind that in your component.

But as you know you can not insert the custom property in the layout response without heavy customisation but we have a way to do so.

We can achieve this on component level using  useComponentProps and  getStaticProps: GetStaticComponentProps methods in XM cloud.

Lets understand this quickly.

You have a component like follows:

import type {

  ComponentRendering,

  Field,

  GetStaticComponentProps,

  ImageField,

  LayoutServiceData,

  LinkField,

} from '@sitecore-jss/sitecore-jss-nextjs';

import { useComponentProps } from '@sitecore-jss/sitecore-jss-nextjs';

type BlogIndexVariationOneProps = ComponentProps & {

  fields?: BlogIndexVariationOneFields;

};

function BlogIndexVariationOne({

  fields = {},

  rendering = {} as ComponentRendering,

}: BlogIndexVariationOneProps) {

const path = useComponentProps<string>(rendering?.uid);

return (

// your html here

)

}

In the component BlogIndexVariationOne we are passing the BlogIndexVariationOneProps. In this fields will be mapped from the layout response but rendering is worth to pay attention here that we will discuss the usage of it further in this blog.

Now assume that under this component you are returning the HTML with the data received in the fields object and additionaly you have a requirement to show the current page URL in any of the <div> tag also.

So as you know the current url will not work from  window.location.href or writing the same in the useEffect() or even useLocation() won't work until you don't wrap your component in the <Router> tag.

So how can we get the current url then? Here we will use the getStaticProps: GetStaticComponentProps method as shown below:

export const getStaticProps: GetStaticComponentProps = async (

  _rendering: ComponentRendering,

  layoutData: LayoutServiceData,

  context

) => {

  return context?.params?.requestPath

}

Here we are returning the requestPath provided by sitecore's context and it is returning the string type. 

Now how will we use this in our component? Here comes the role of rendering that we passed in the component in the line const path = useComponentProps<string>(rendering?.uid);. So rendering?.uid in the useComponentProps tells the component that something is being passed from getStaticProps: GetStaticComponentProps as string return type so use that.

And voilla, now you can use the request path in your code.

So in place of context?.params?.requestPath you can use your any API fetch if you want it to be fetched using this although the best practice for getting the API data is to use in the useEffect() but this is also one more way to use.

Thanks!