[NextJs][Regression] Custom Components cannot be added using Horizon (#…

…807)

* Fix update-graphql-fragment-data react sample

* Add optional chaining to fields of scaffolded components

* Revert "Fix update-graphql-fragment-data react sample"

This reverts commit 467600f.

* Refactor component-src template to use withDatasourceCheck()

(cherry picked from commit 7af070e)

samples/nextjs/scripts/templates/component-src.ts

@@ -4,7 +4,7 @@
  * @returns component src boilerplate as a string
  */
 function generateComponentSrc(componentName: string): string {
-  return `import { Text, Field } from '@sitecore-jss/sitecore-jss-nextjs';
+  return `import { Text, Field, withDatasourceCheck } from '@sitecore-jss/sitecore-jss-nextjs';
 import { StyleguideComponentProps } from 'lib/component-props';
 
 type ${componentName}Props = StyleguideComponentProps & {
@@ -20,7 +20,7 @@ const ${componentName} = (props: ${componentName}Props): JSX.Element => (
   </div>
 );
 
-export default ${componentName};
+export default withDatasourceCheck()<${componentName}Props>(${componentName});
 `;
 }