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