fix(dx): make gatsby id static for hot reloading (#44542)

* fix: make gatsby id static for hot reloading

* fix: catch duplication of challenge.id

* fix: handle CertificateNodes

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

client/plugins/fcc-source-challenges/create-challenge-nodes.js

@@ -1,7 +1,13 @@
 const crypto = require('crypto');
 const { blockNameify } = require('../../../utils/block-nameify');
 
-function createChallengeNode(challenge, reporter) {
+const createdIds = new Set();
+
+function createChallengeNode(
+  challenge,
+  reporter,
+  { isReloading } = { isReloading: false }
+) {
   // challengeType 11 is for video challenges (they only have instructions)
   // challengeType 7 is for certificates (they only have tests)
   // challengeType 12 is for CodeAlly/CodeRoad challenge
@@ -43,6 +49,18 @@ function createChallengeNode(challenge, reporter) {
     };
   }
 
+  // Challenge id should be unique for CertificateNodes, but not for
+  // ChallengeNodes
+  const id =
+    internal.type === 'ChallengeNode' ? challenge.fields.slug : challenge.id;
+
+  if (createdIds.has(id) && !isReloading) {
+    throw Error(`
+    Challenge slugs must be unique, but ${id} already exists.
+    `);
+  }
+  createdIds.add(id);
+
   return JSON.parse(
     JSON.stringify(
       Object.assign(
@@ -54,7 +72,9 @@ function createChallengeNode(challenge, reporter) {
           sourceInstanceName: 'challenge'
         },
         { challenge },
-        { id: crypto.randomUUID() }
+        {
+          id
+        }
       )
     )
   );

client/plugins/fcc-source-challenges/gatsby-node.js

@@ -45,7 +45,7 @@ exports.sourceNodes = function sourceChallengesSourceNodes(
 File changed at ${filePath}, replacing challengeNode id ${challenge.id}
               `
             );
-            createVisibleChallenge(challenge);
+            createVisibleChallenge(challenge, { isReloading: true });
           })
           .catch(e =>
             reporter.error(`fcc-replace-challenge
@@ -111,8 +111,8 @@ ${e.message}
       });
   }
 
-  function createVisibleChallenge(challenge) {
-    createNode(createChallengeNode(challenge, reporter));
+  function createVisibleChallenge(challenge, options) {
+    createNode(createChallengeNode(challenge, reporter, options));
   }
 
   return new Promise((resolve, reject) => {