{"componentChunkName":"component---src-templates-post-template-post-template-tsx","path":"/posts/sitecore-jss-nextjs-rendering-contents-resolver/","result":{"data":{"markdownRemark":{"id":"5a55e502-4fa1-5270-b491-ce4c84e5888d","html":"

In this article, I will explain what a Rendering Contents Resolver is, and how to use the OOTB Rendering Contents Resolvers in a Sitecore JSS with Next.js solution.

\n

What is a Rendering Contents Resolver?

\n

In my previous article Sitecore JSS with Next.js - Creating your first component, we created a component that used the data from the datasource item to render itself. This is the default behavior for a component, the data that is passed to the component by the layout service will be the datasource itself.

\n

However, we come across different requirements for different components. For example:

\n\n

We can also use the GraphQL API to perform a query and obtain the data needed for our component. However, Sitecore offers an OOTB solution with the possibility to extend, Rendering Contents Resolvers.

\n

You can find the Rendering Contents Resolvers in the path /sitecore/system/Modules/Layout Service/Rendering Contents Resolvers.

\n

The resolvers that Sitecore offers OOTB are as follows:

\n\n

Example Component

\n

Here is an example, where we will need to modify the rendering content resolver and use the values in the component.

\n

I have a component called Card List, in which I need to render all the Card items under the Card List. Each card has an image, a heading, a description, and a link.

\n
    \n
  1. \n

    Create a component named CardListComponent by following the steps mentioned in my previous article.

    \n
    2. \n
  2. \n

    Add the component created to your page, I will be adding it to a page called demo in my example. Also, add and configure the datasources with some appropriate values.

    \n
    3. \n
  3. \n

    Go to the rendering item of the component in Sitecore and change the value for the field - Rendering Content Resolver, to Datasource Item Children Resolver. Perform a Publish to clear the layout service cache.

    \n

    \n \n \n \n \n \n \n \n \n

    \n
    4. \n
  4. \n

    Now, go to the GraphQL Playground and perform a layout query on your page.

    \n
    query {\n  layout(site: \"JSSProject\", routePath: \"/demo\", language: \"en\") {\n    item {\n      rendered\n    }\n  }\n}
    \n

    The output of the query should be similar to the value below:

    \n
    {\n  \"data\": {\n    \"layout\": {\n      \"item\": {\n        \"rendered\": {\n          \"sitecore\": {\n            \"context\": {\n              \"pageEditing\": false,\n              \"site\": {\n                \"name\": \"jssproject\"\n              },\n              \"pageState\": \"normal\",\n              \"language\": \"en\",\n              \"itemPath\": \"/demo\"\n            },\n            \"route\": {\n              \"name\": \"demo\",\n              \"displayName\": \"demo\",\n              \"fields\": {\n                \"pageTitle\": {\n                  \"value\": \"\"\n                }\n              },\n              \"databaseName\": \"web\",\n              \"deviceId\": \"fe5d7fdf-89c0-4d99-9aa3-b5fbd009c9f3\",\n              \"itemId\": \"1a4a3d34-df6a-463f-8b72-58cc56ecc0d4\",\n              \"itemLanguage\": \"en\",\n              \"itemVersion\": 1,\n              \"layoutId\": \"aec6b942-174e-581c-a1a0-50aa51432a66\",\n              \"templateId\": \"74e5c244-4fb5-5ae9-bb19-0899d55bf312\",\n              \"templateName\": \"App Route\",\n              \"placeholders\": {\n                \"jss-main\": [\n                  {\n                    \"uid\": \"a52a4929-2ac1-4e8a-9a16-1372465c3ac0\",\n                    \"componentName\": \"CardListComponent\",\n                    \"dataSource\": \"{6539F816-642F-4B48-B5F7-658ABFE4B676}\",\n                    \"params\": {},\n                    \"fields\": {\n                      \"items\": [\n                        {\n                          \"id\": \"8a43ce24-7ba2-4953-8392-8517b0ad5f32\",\n                          \"url\": \"/demo/Page-Components/CardListComponent/Card-1\",\n                          \"name\": \"Card 1\",\n                          \"displayName\": \"Card 1\",\n                          \"fields\": {\n                            \"title\": {\n                              \"value\": \"GraphQL\"\n                            },\n                            \"description\": {\n                              \"value\": \"GraphQL\"\n                            },\n                            \"link\": {\n                              \"value\": {\n                                \"href\": \"/en/graphql\",\n                                \"text\": \"\",\n                                \"anchor\": \"\",\n                                \"linktype\": \"internal\",\n                                \"class\": \"\",\n                                \"title\": \"\",\n                                \"target\": \"\",\n                                \"querystring\": \"\",\n                                \"id\": \"{E507735E-CF6D-57C1-8B02-704027972952}\"\n                              }\n                            },\n                            \"image\": {\n                              \"value\": {\n                                \"src\": \"https://cm.jssproject.localhost/-/media/System/Email/Placeholders/image300x200.jpg?h=200&iar=0&w=300&hash=2D743D7A0F958598889BE6E80062B606\",\n                                \"alt\": \"Placeholder image\",\n                                \"width\": \"300\",\n                                \"height\": \"200\"\n                              }\n                            }\n                          }\n                        },\n                        {\n                          \"id\": \"05917a7f-0b00-4234-91d7-1faf45d5d7c0\",\n                          \"url\": \"/demo/Page-Components/CardListComponent/Card-2\",\n                          \"name\": \"Card 2\",\n                          \"displayName\": \"Card 2\",\n                          \"fields\": {\n                            \"title\": {\n                              \"value\": \"Styleguide\"\n                            },\n                            \"description\": {\n                              \"value\": \"Styleguide\"\n                            },\n                            \"link\": {\n                              \"value\": {\n                                \"href\": \"/en/styleguide\",\n                                \"text\": \"\",\n                                \"anchor\": \"\",\n                                \"linktype\": \"internal\",\n                                \"class\": \"\",\n                                \"title\": \"\",\n                                \"target\": \"\",\n                                \"querystring\": \"\",\n                                \"id\": \"{5F92EEFB-A658-56BA-98B3-0C0B1E6420E2}\"\n                              }\n                            },\n                            \"image\": {\n                              \"value\": {\n                                \"src\": \"https://cm.jssproject.localhost/-/media/System/Email/Placeholders/image300x200.jpg?h=200&iar=0&w=300&hash=2D743D7A0F958598889BE6E80062B606\",\n                                \"alt\": \"Placeholder image\",\n                                \"width\": \"300\",\n                                \"height\": \"200\"\n                              }\n                            }\n                          }\n                        }\n                      ]\n                    }\n                  }\n                ]\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n}
    \n
    5. \n
  5. \n

    Now, we will modify the component definition in the code to match our requirements.

    \n
    import {\n  Text,\n  Field,\n  withDatasourceCheck,\n  LinkField,\n  ImageField,\n  Link,\n  Image,\n} from '@sitecore-jss/sitecore-jss-nextjs';\nimport { ComponentProps } from 'lib/component-props';\n\ntype CardProps = {\n  id: string;\n  fields: {\n    title: Field<string>;\n    description: Field<string>;\n    link: LinkField;\n    image: ImageField;\n  };\n};\ntype CardListComponentProps = ComponentProps & {\n  fields: {\n    items: CardProps[];\n  };\n};\n\nconst CardListComponent = ({ fields }: CardListComponentProps): JSX.Element => (\n  <div className=\"container\">\n    <div className=\"sc-cards\">{fields?.items?.map((card) => card && <Card {...card} />)}</div>\n  </div>\n);\n\nconst Card = ({ fields, id }: CardProps): JSX.Element => (\n  <div className=\"sc-card\" key={id}>\n    <Text field={fields.title} tag=\"h3\" className='h3'/>\n    <Text field={fields.description} tag=\"p\" />\n    <Link field={fields.link} className=\"link-field\">\n      <Image field={fields.image} />\n    </Link>\n  </div>\n);\n\nexport default withDatasourceCheck()<CardListComponentProps>(CardListComponent);
    \n
    6. \n
  6. \n

    Once you save your changes in the code, your component should render successfully in your rendering host.

    \n

    \n \n \n \n \n \n \n \n \n

    \n
    7. \n
\n

References

\n
    \n
  1. Sitecore Documentation - Customizing the Layout Service rendering output
    2. \n
\n

Happy Sitecoring!

","fields":{"slug":"/posts/2023-06-06-sitecore-jss-with-next-js-rendering-contents-resolver//posts/sitecore-jss-nextjs-rendering-contents-resolver","tagSlugs":["/tag/sitecorejss/","/tag/nextjs/"]},"frontmatter":{"date":"2023-06-06T13:04:44.670Z","description":"This article explains the whats and hows of the Rendering Contents Resolvers in a Sitecore JSS with a Next.js solution. ","tags":["SitecoreJSS","NextJs"],"title":"Sitecore JSS with Next.js - Rendering Contents Resolver","socialImage":{"publicURL":"/static/f375e903e9ed23cd96fa3cd4c49a28b7/2023-05-30-15_36_49-.png"}}}},"pageContext":{"slug":"/posts/2023-06-06-sitecore-jss-with-next-js-rendering-contents-resolver//posts/sitecore-jss-nextjs-rendering-contents-resolver"}},"staticQueryHashes":["251939775","288581551","401334301"],"slicesMap":{}}