3

I'm using Sitecore 10.2 in my local as headless and nextjs for FrontEnd. I'm able to open the home page on the experience editor and edit fields as well when I use Layout service to fetch data on nextjs w/o using GraphQL on rendering. but when I apply GraphQL like below on Sitecore rendering, unable to edit the fields on experience editor.

query($datasource: String!) {
  TestComponent: item(path: $datasource, language: "en") {
    id(format: "B")
    Heading:field(name:"Heading"){
                          ... on TextField{
                            value
                          }
                        }
    Description:field(name:"Description"){
                          ... on RichTextField{
                            value
                          }
                        }
      
  }
}

below is code for component written on nextjs.

import { Text, RichText, withDatasourceCheck } from '@sitecore-jss/sitecore-jss-nextjs';
import { ComponentProps } from 'lib/component-props';

type TestProps = ComponentProps & {
  fields: {
    data: {
      TestComponent: {
        Heading: {
          value: string;
        };
        Description: {
          value: string;
        };
      };
    };  


    //Heading: Field<string>;
    //Description: Field<string>;
  };
};

/**
 * A simple Content Block component, with a heading and rich text block.
 * This is the most basic building block of a content site, and the most basic
 * JSS component that's useful.
 */
const Test = ({ fields }: TestProps): JSX.Element => (
  <div className="contentBlock">
    <Text tag="h2" className="contentTitle" field={fields.data.TestComponent.Heading} />

    <RichText className="contentDescription" field={fields.data.TestComponent.Description} />
  </div>
);

export default withDatasourceCheck()<TestProps>(Test);

2 Answers 2

3

Use the jsonValue instead of value on your TestProps and query. So your TestProps would look something like this:

type TestProps = ComponentProps & {
  fields: {
    data: {
      TestComponent: {
        Heading: {
          jsonValue: string;
        };
        Description: {
          jsonValue: string;
        };
      };
    };  
  };
};
2
  • while using jsonValue getting build error on <Text tag="h2" className="contentTitle" field={fields.data.TestComponent.Heading} /> even it is not working with field={fields.data.TestComponent.Heading.jsonValue}
    – Erwin Paul
    Oct 11, 2022 at 5:51
  • same build error occurred for RichText also.
    – Erwin Paul
    Oct 11, 2022 at 6:08
3

Thanks a lot Trayek for your response as it helped me to get resolution.

I made changes on both GraphQL query and NextJS component in order to make it working. Now I'm able to edit fields using sitecore experience editor.

below is the changes on GraphQL query applied on sitecore rendering:

query($datasource: String!) {
  TestComponent: item(path: $datasource, language: "en") {
    id(format: "B")
    Heading:field(name:"Heading"){
                          ... on TextField{
                            jsonValue
                          }
                        }
    Description:field(name:"Description"){
                          ... on RichTextField{
                            jsonValue
                          }
                        }
      
  }
}

below is the changes on NextJS component:

import { Text, RichText, withDatasourceCheck } from '@sitecore-jss/sitecore-jss-nextjs';
import { ComponentProps } from 'lib/component-props';

type TestProps = ComponentProps & {
  fields: {
    data: {
      TestComponent: {
        Heading: {
          jsonValue:{
            value: string;
          };
        };
        Description: {
          jsonValue:{
            value: string;
          };
        };
      };
    };  


    //Heading: Field<string>;
    //Description: Field<string>;
  };
};

/**
 * A simple Content Block component, with a heading and rich text block.
 * This is the most basic building block of a content site, and the most basic
 * JSS component that's useful.
 */
const Test = ({ fields }: TestProps): JSX.Element => (
  <div className="contentBlock">
    <Text tag="h2" className="contentTitle" field={fields.data.TestComponent.Heading.jsonValue} />

    <RichText className="contentDescription" field={fields.data.TestComponent.Description.jsonValue} />
  </div>
);

export default withDatasourceCheck()<TestProps>(Test);
1
  • This worked like magic! Thanks, man Jul 14 at 6:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.