Fields not editable in Sitecore Experience Editor when using GraphQL

Question

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);

Answer 1

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;
        };
      };
    };  
  };
};

Answer 2

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);