Merge pull request #26 from Kentico/guid-named-properties

Get around GraphQL naming limitations

Author: Jan Lenoch

README.md

@@ -154,7 +154,7 @@ All nodes have a `usedByContentItems` property that reflects the other nodes in
 
 ## Troubleshooting
 
-Gatsby's GraphQL libraries won't accept object properties with names starting with numbers. This conflicts with the way image assets are named in the Delivery API response (in the JS SDK output, respectively). Therefore, the names of assets are prefixed by the source plugin with `image-`.
+Gatsby's GraphQL libraries won't accept object properties with names starting with numbers. This conflicts with the way image assets and links are named in the Delivery API response (in the JS SDK output, respectively). Therefore, the names of properties with assets and links in Rich text are prefixed by the source plugin with `image-` and `link-` respectively.
 
     "images": {
       "image-79bd9e11-f643-4cd6-9ea5-d1be17cf7de2": {
@@ -168,7 +168,7 @@ Gatsby's GraphQL libraries won't accept object properties with names starting wi
         "url": "https://assets-eu-01.kc-usercontent.com:443/5ac93d1e-567d-01e6-e3b7-ac435f77b907/36cb3d1b-1aa7-4809-9606-82c3c0f00b7f/fcyTulxr.jpg"
       }
 
-Should you need to refer to the properties, just bear in mind the addition of the `image-` suffix. The GUID in the child `image_id` property is never prefixed or otherwise transformed.
+Should you need to refer to the properties, just bear in mind the addition of the `image-` and `link-` prefix. In case of images, the GUID in the child `image_id` property is never prefixed or otherwise transformed.
 
 ## Further information
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "gatsby-source-kentico-cloud",
   "description": "Gatsby source plugin for Kentico Cloud",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "repository": {
     "type": "git",
     "url": "https://github.com/Kentico/gatsby-source-kentico-cloud"

src/normalize.js

@@ -60,30 +60,7 @@ const createContentItemNode =
           (contentType) => contentType.system.codename
               === contentItem.system.type);
 
-      const elements = {};
-
-      Object
-          .keys(contentItem)
-          .filter((key) => key !== `system` && key !== `elements`)
-          .forEach((key) => {
-            let propertyValue;
-
-            if (_.has(contentItem[key], `type`)
-              && contentItem[key].type === `rich_text`
-              && _.has(contentItem.elements[key], `images`)
-              && !_.isEmpty(contentItem.elements[key].images)) {
-              propertyValue = prefixImagesInRichText(contentItem.elements[key]);
-            } else {
-              propertyValue = contentItem[key];
-            }
-
-            elements[key] = propertyValue;
-          });
-
-      const itemWithElements = {
-        system: contentItem.system,
-        elements: elements,
-      };
+      const itemWithElements = parseContentItemContents(contentItem);
 
       const additionalData = {
         otherLanguages___NODE: [],
@@ -197,7 +174,9 @@ of valid objects.`);
                 const linkedNodes = allNodesOfSameLanguage
                     .filter((node) => {
                       const match = property.find((propertyValue) => {
-                        return propertyValue.system.codename ===
+                        return propertyValue !== null
+                          && node !== null
+                          && propertyValue.system.codename ===
                           node.system.codename
                           && propertyValue.system.type === node.system.type;
                       });
@@ -241,7 +220,8 @@ of valid objects.`);
               const linkedNodes = allNodesOfSameLanguage
                   .filter((node) => _.has(property, `linkedItemCodenames`)
                     && _.isArray(property.linkedItemCodenames)
-                    && property.linkedItemCodenames.includes(node.system.codename)
+                    && property.linkedItemCodenames.includes(
+                        node.system.codename)
                   );
 
               itemNode.elements[linkPropertyName] = [];
@@ -256,16 +236,17 @@ const createKcArtifactNode =
       additionalNodeData = null) => {
     let processedProperties = [];
 
-    // Handle circular references when serializing.
-    const nodeContent = JSON.stringify(kcArtifact, (key, value) =>{
+    // Handle eventual circular references when serializing.
+    const nodeContent = JSON.stringify(kcArtifact, (key, value) => {
       if (typeof value === `object` && value !== null) {
         if (processedProperties.indexOf(value) !== -1) {
           try {
             return JSON.parse(JSON.stringify(value));
           } catch (error) {
-            return;
+            return null;
           }
         }
+
         processedProperties.push(value);
       }
       return value;
@@ -317,32 +298,88 @@ const addLinkedItemsLinks = (itemNode, linkedNodes, linkPropertyName) => {
   }
 };
 
-
-const prefixImagesInRichText = (richTextPropertyValue) => {
+const prefixGuidNamedProperties = (propertyValue) => {
   const imagesIdentifier = `images`;
-  const prefixLiteral = `image-`;
+  const imagePrefixLiteral = `image-`;
+  const linksIdentifier = `links`;
+  const linkPrefixLiteral = `link-`;
   let transformedPropertyValue = {};
 
   Object
-      .keys(richTextPropertyValue)
-      .filter((key) => key !== imagesIdentifier)
+      .keys(propertyValue)
+      .filter((key) => key !== imagesIdentifier && key !== linksIdentifier)
       .forEach((key) => {
-        transformedPropertyValue[key] = richTextPropertyValue[key];
+        transformedPropertyValue[key] = propertyValue[key];
       });
 
-  let transformedImagesProperty = {};
+  transformedPropertyValue[imagesIdentifier] =
+    prefixProperty(propertyValue, imagesIdentifier, imagePrefixLiteral);
+  transformedPropertyValue[linksIdentifier] =
+    prefixProperty(propertyValue, linksIdentifier, linkPrefixLiteral);
+
+  return transformedPropertyValue;
+};
+
+const prefixProperty = (propertyValue, identifier, prefixLiteral) => {
+  let transformedProperty = {};
 
   Object
-      .keys(richTextPropertyValue[imagesIdentifier])
+      .keys(propertyValue[identifier])
       .forEach((key) => {
         const prefixedKey = prefixLiteral + key;
-        transformedImagesProperty[prefixedKey] =
-          richTextPropertyValue[imagesIdentifier][key];
+        transformedProperty[prefixedKey] =
+          propertyValue[identifier][key];
       });
 
-  transformedPropertyValue[imagesIdentifier] = transformedImagesProperty;
+  return transformedProperty;
+};
 
-  return transformedPropertyValue;
+const parseContentItemContents = (contentItem, processedContents = []) => {
+  if (processedContents.indexOf(contentItem.system) !== -1) {
+    return null;
+  } else {
+    processedContents.push(contentItem.system);
+    const elements = {};
+
+    Object
+        .keys(contentItem)
+        .filter((key) => key !== `system` && key !== `elements`)
+        .forEach((key) => {
+          let propertyValue;
+
+          if (_.has(contentItem[key], `type`)
+            && contentItem[key].type === `rich_text`) {
+            if ((_.has(contentItem.elements[key], `images`)
+            && !_.isEmpty(contentItem.elements[key].images))
+            || (_.has(contentItem.elements[key], `links`)
+            && !_.isEmpty(contentItem.elements[key].links))) {
+              propertyValue =
+                prefixGuidNamedProperties(contentItem.elements[key]);
+            }
+          } else if (contentItem.elements[key].type === `modular_content`
+            && !_.isEmpty(contentItem[key])) {
+            let linkedItems = [];
+
+            contentItem[key].forEach((linkedItem) => {
+              linkedItems.push(
+                  parseContentItemContents(linkedItem, processedContents));
+            });
+
+            propertyValue = linkedItems;
+          } else {
+            propertyValue = contentItem[key];
+          }
+
+          elements[key] = propertyValue;
+        });
+
+    const itemWithElements = {
+      system: contentItem.system,
+      elements: elements,
+    };
+
+    return itemWithElements;
+  }
 };
 
 exports.createContentTypeNode = createContentTypeNode;