From 467600f2c5f1ff1389cce9888de4241be08e016d Mon Sep 17 00:00:00 2001
From: Coby Sher <63015754+CobyPear@users.noreply.github.com>
Date: Wed, 8 Sep 2021 13:24:16 -0500
Subject: [PATCH 1/4] Fix update-graphql-fragment-data react sample

---
 samples/react/package.json                            |  2 +-
 samples/react/scripts/update-graphql-fragment-data.js | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/samples/react/package.json b/samples/react/package.json
index 46ece09ce3..07beda8ed9 100644
--- a/samples/react/package.json
+++ b/samples/react/package.json
@@ -108,7 +108,7 @@
     "build:client:rendering-host": "cross-env-shell PUBLIC_URL=$npm_package_config_tunnelUrl \"react-scripts build\"",
     "build:server": "cross-env-shell NODE_ENV=production \"webpack --config server/server.webpack.config.js\"",
     "bootstrap": "node scripts/bootstrap.js",
-    "graphql:update": "node -r babel-register ./scripts/update-graphql-fragment-data.js",
+    "graphql:update": "node -r @babel/register ./scripts/update-graphql-fragment-data.js",
     "test": "react-scripts test --env=jsdom",
     "lint": "eslint ./src/**/*.js ./sitecore/definitions/**/*.js ./scripts/**/*.js ./server/**/*.js ./data/**/*.yml",
     "eject": "react-scripts eject",
diff --git a/samples/react/scripts/update-graphql-fragment-data.js b/samples/react/scripts/update-graphql-fragment-data.js
index 46a9b36c85..8f45194252 100644
--- a/samples/react/scripts/update-graphql-fragment-data.js
+++ b/samples/react/scripts/update-graphql-fragment-data.js
@@ -1,8 +1,8 @@
 /* eslint-disable no-console, no-underscore-dangle */
 
-import fetch from 'cross-fetch';
-import fs from 'fs';
-import generateConfig from './generate-config';
+const fetch = require('cross-fetch');
+const fs = require('fs');
+const generateConfig = require('./generate-config');
 
 // Apollo Client supports caching GraphQL responses, which can greatly reduce network traffic needs.
 // In order to work correctly with interfaces in GraphQL, it needs to know some basic information about
@@ -17,7 +17,7 @@ let jssConfig;
 
 try {
   // eslint-disable-next-line global-require
-  jssConfig = require('../src/temp/config').default;
+  jssConfig = require('../src/temp/config');
 } catch (e) {
   console.error(
     'Unable to require JSS config. Ensure `jss setup` has been run, and the app has been started at least once after setup.'
@@ -30,7 +30,7 @@ console.log(`Updating GraphQL fragment type data from ${jssConfig.graphQLEndpoin
 
 fetch(jssConfig.graphQLEndpoint, {
   method: 'POST',
-  headers: { 'Content-Type': 'application/json' },
+  headers: { 'Content-Type': 'application/json', sc_apikey: jssConfig.sitecoreApiKey },
   body: JSON.stringify({
     query: `
       {

From 6d9540d9ffb7344c5dddb6a4d330f34a90171189 Mon Sep 17 00:00:00 2001
From: Coby Sher <63015754+CobyPear@users.noreply.github.com>
Date: Wed, 8 Sep 2021 14:02:59 -0500
Subject: [PATCH 2/4] Add optional chaining to fields of scaffolded components

---
 samples/nextjs/scripts/templates/component-src.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/samples/nextjs/scripts/templates/component-src.ts b/samples/nextjs/scripts/templates/component-src.ts
index cd35fa1da9..a70f75ba6b 100644
--- a/samples/nextjs/scripts/templates/component-src.ts
+++ b/samples/nextjs/scripts/templates/component-src.ts
@@ -16,7 +16,7 @@ type ${componentName}Props = StyleguideComponentProps & {
 const ${componentName} = (props: ${componentName}Props): JSX.Element => (
   <div>
     <p>${componentName} Component</p>
-    <Text field={props.fields.heading} />
+    <Text field={props.fields?.heading} />
   </div>
 );
 

From e69c713c785b84315551810826485fff88ba07a5 Mon Sep 17 00:00:00 2001
From: Coby Sher <63015754+CobyPear@users.noreply.github.com>
Date: Wed, 8 Sep 2021 14:18:03 -0500
Subject: [PATCH 3/4] Revert "Fix update-graphql-fragment-data react sample"

This reverts commit 467600f2c5f1ff1389cce9888de4241be08e016d.
---
 samples/react/package.json                            |  2 +-
 samples/react/scripts/update-graphql-fragment-data.js | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/samples/react/package.json b/samples/react/package.json
index 07beda8ed9..46ece09ce3 100644
--- a/samples/react/package.json
+++ b/samples/react/package.json
@@ -108,7 +108,7 @@
     "build:client:rendering-host": "cross-env-shell PUBLIC_URL=$npm_package_config_tunnelUrl \"react-scripts build\"",
     "build:server": "cross-env-shell NODE_ENV=production \"webpack --config server/server.webpack.config.js\"",
     "bootstrap": "node scripts/bootstrap.js",
-    "graphql:update": "node -r @babel/register ./scripts/update-graphql-fragment-data.js",
+    "graphql:update": "node -r babel-register ./scripts/update-graphql-fragment-data.js",
     "test": "react-scripts test --env=jsdom",
     "lint": "eslint ./src/**/*.js ./sitecore/definitions/**/*.js ./scripts/**/*.js ./server/**/*.js ./data/**/*.yml",
     "eject": "react-scripts eject",
diff --git a/samples/react/scripts/update-graphql-fragment-data.js b/samples/react/scripts/update-graphql-fragment-data.js
index 8f45194252..46a9b36c85 100644
--- a/samples/react/scripts/update-graphql-fragment-data.js
+++ b/samples/react/scripts/update-graphql-fragment-data.js
@@ -1,8 +1,8 @@
 /* eslint-disable no-console, no-underscore-dangle */
 
-const fetch = require('cross-fetch');
-const fs = require('fs');
-const generateConfig = require('./generate-config');
+import fetch from 'cross-fetch';
+import fs from 'fs';
+import generateConfig from './generate-config';
 
 // Apollo Client supports caching GraphQL responses, which can greatly reduce network traffic needs.
 // In order to work correctly with interfaces in GraphQL, it needs to know some basic information about
@@ -17,7 +17,7 @@ let jssConfig;
 
 try {
   // eslint-disable-next-line global-require
-  jssConfig = require('../src/temp/config');
+  jssConfig = require('../src/temp/config').default;
 } catch (e) {
   console.error(
     'Unable to require JSS config. Ensure `jss setup` has been run, and the app has been started at least once after setup.'
@@ -30,7 +30,7 @@ console.log(`Updating GraphQL fragment type data from ${jssConfig.graphQLEndpoin
 
 fetch(jssConfig.graphQLEndpoint, {
   method: 'POST',
-  headers: { 'Content-Type': 'application/json', sc_apikey: jssConfig.sitecoreApiKey },
+  headers: { 'Content-Type': 'application/json' },
   body: JSON.stringify({
     query: `
       {

From 562e8eac4ec615e35a5d2a4d177e32d93db4598f Mon Sep 17 00:00:00 2001
From: Coby Sher <63015754+CobyPear@users.noreply.github.com>
Date: Wed, 8 Sep 2021 14:30:23 -0500
Subject: [PATCH 4/4] Refactor component-src template to use
 withDatasourceCheck()

---
 samples/nextjs/scripts/templates/component-src.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/samples/nextjs/scripts/templates/component-src.ts b/samples/nextjs/scripts/templates/component-src.ts
index a70f75ba6b..f924602533 100644
--- a/samples/nextjs/scripts/templates/component-src.ts
+++ b/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 & {
@@ -16,11 +16,11 @@ type ${componentName}Props = StyleguideComponentProps & {
 const ${componentName} = (props: ${componentName}Props): JSX.Element => (
   <div>
     <p>${componentName} Component</p>
-    <Text field={props.fields?.heading} />
+    <Text field={props.fields.heading} />
   </div>
 );
 
-export default ${componentName};
+export default withDatasourceCheck()<${componentName}Props>(${componentName});
 `;
 }