Surendra Sharma

Surendra Sharma

Search This Blog

Showing posts with label JSS. Show all posts
Showing posts with label JSS. Show all posts

Thursday, August 31, 2023

Connection to Your Rendering Host Failed with a Body Exceeded 2MB Limit

In the ever-evolving landscape of digital experiences, Sitecore JSS (JavaScript Services) combined with Next.js has emerged as a powerful duo for building headless websites. This approach provides flexibility, scalability, and performance. However, as with any technology, challenges may arise. 

In this blog post, we'll delve into one such challenge: the "Connection to Your Rendering Host Failed with a Body Exceeded 2MB Limit" error and how to tackle it effectively.

Understanding the Error

We have deployed our Next.js app on Azure Web App and we started to get the “Connection to your rendering host failed with a Body exceeded 2mb limit error. Ensure the POST endpoint at URL https://mynextjs-sitecore-test.azurewebapp.net/api/editing/render has been enabled” error. Its typically occurs when a request made to the Sitecore rendering host exceeds the predefined request size limit. This limit is set at 2MB by default to prevent excessively large requests from overwhelming the server and causing performance issues.

When building a Sitecore JSS-based headless website with Next.js, it's common to transfer data between the front end (Next.js) and the back end (Sitecore) using API calls. These API calls may involve sending large payloads, especially when dealing with extensive content or complex data structures.

Solutions

Once you've diagnosed the issue, it's time to implement a solution. We try to solve it in lots of 
different way, but ultimately the solution that work for us is

• Open “\src\pages\api\editing\render.ts” file and change size from 2 MB to 50 MB as

export const config = {
api: {
bodyParser: {
sizeLimit: '50mb',
},
responseLimit: false,
},
};

• Open “\src\pages\api\editing\data\[key].ts” file and change size from 2 MB to 50 MB as

export const config = {
api: {
bodyParser: {
sizeLimit: '2mb',
},
responseLimit: false,
},
};

• Build and deploy your application, it should work now.

I hope this trick may solve your problem as well. Happy coding!

Friday, January 28, 2022

Sitecore JSS : Convert YML to JSON

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!!!


Friday, November 15, 2019

How to get Sitecore multilist items details in GraphQL

I have graphQL query for my JSS app as

{
  search(fieldsEqual: [{name: "_fullpath", value: "/sitecore/content/abc"}]
  , keyword: "") {
    results {
      items {
        item {
          ... on Brand {
            heading {
              value
            }
            questionList {
              value
            }
          }
        }
      }
    }
  }
}

Here "QuestionList" is a list field for which I am getting output with Item ids separated by pipe "|" as

"questionList": {
  "value": "{79BADBCE-3824-4664-B74C-D5D931154E86}|{2D0FCE78-8377-4A1E-B47B-A3BDBB6D8D62}"
}

But instead of this items ids, how to get multilist items details?

For this we must use "targetItems" cluase as

{
  search(fieldsEqual: [{name: "_fullpath", value: "/sitecore/content/abc"}
   ], keyword: "") {
    results {
      items {
        item {
          ... on Brand {
            heading {
              value
            }
            questionList {
              value
              name
              targetItems {
                id
                name
                ... on Question
                {
                  questionstatement {value}
                }
              }
            }
          }
        }
      }
    }
  }
}

As you can observe here we can use strongly type items "Question" inside of "targetItems". Its output is

{
  "data": {
    "search": {
      "results": {
        "items": [
          {
            "item": {
              "heading": {
                "value": "This is Heading"
              },
              "questionList": {
                "value": "{79BADBCE-3824-4664-B74C-D5D931154E86}|{2D0FCE78-8377-4A1E-B47B-A3BDBB6D8D62}",
                "name": "questionList",
                "targetItems": [
                  {
                    "id": "79BADBCE38244664B74CD5D931154E86",
                    "name": "Question 1",
                    "questionstatement": {
                      "value": "Question 1"
                    }
                  },
                  {
                    "id": "2D0FCE7883774A1EB47BA3BDBB6D8D62",
                    "name": "Question 2",
                    "questionstatement": {
                      "value": "Question 2"
                    }
                  }
                ]
              }
            }
          }
        ]
      }
    }
  }
}

I hope this trick helps you to write GraphQL queries in better way for Sitecore JSS app.