Init migration to v4

gatsby-node.js

@@ -1 +1 @@
-module.exports = require('./lib')
+module.exports = require('./lib/gatsby-node');

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-source-strapi",
-  "version": "1.0.2",
+  "version": "2.0.0-alpha.3",
   "description": "Gatsby source plugin for building websites using Strapi as a data source",
   "author": {
     "email": "hi@strapi.io",
@@ -46,11 +46,11 @@
     "strapi"
   ],
   "dependencies": {
-    "axios": "0.21.1",
-    "gatsby-node-helpers": "0.3.0",
-    "gatsby-source-filesystem": "3.7.1",
-    "lodash": "4.17.21",
-    "pluralize": "8.0.0"
+    "axios": "0.24.0",
+    "commonmark": "^0.30.0",
+    "gatsby-source-filesystem": "4.5.1",
+    "lodash": "^4.17.21",
+    "qs": "^6.10.3"
   },
   "devDependencies": {
     "@babel/cli": "7.14.5",
@@ -62,6 +62,12 @@
     "lint-staged": "10.5.1",
     "prettier": "2.1.2"
   },
+  "peerDependencies": {
+    "gatsby": "^4.0.0",
+    "gatsby-plugin-image": "^2.5.1",
+    "gatsby-plugin-sharp": "^4.5.1",
+    "sharp": "^0.29.0"
+  },
   "husky": {
     "hooks": {
       "pre-commit": "lint-staged"

src/axiosInstance.js

@@ -0,0 +1,18 @@
+import axios from 'axios';
+
+const createInstance = (config) => {
+  const headers = { ...config?.headers };
+
+  if (config.accessToken) {
+    headers.authorization = `Bearer ${config.accessToken}`;
+  }
+
+  const instance = axios.create({
+    baseURL: config.apiURL,
+    headers,
+  });
+
+  return instance;
+};
+
+export default createInstance;

src/clean-data.js

@@ -0,0 +1,163 @@
+import _ from 'lodash';
+
+import { getContentTypeSchema } from './helpers';
+
+const MEDIA_FIELDS = [
+  'name',
+  'alternativeText',
+  'caption',
+  'width',
+  'height',
+  'formats',
+  'hash',
+  'ext',
+  'mime',
+  'size',
+  'url',
+  'previewUrl',
+  'createdAt',
+  'updatedAt',
+];
+
+const restrictedFields = ['__component', `children`, `fields`, `internal`, `parent`];
+
+/**
+ * Removes the attribute key in the entire data.
+ * @param {Object} attributes response from the API
+ * @param {Object} currentSchema
+ * @param {*} schemas
+ * @returns
+ */
+export const cleanAttributes = (attributes, currentSchema, schemas) => {
+  if (!attributes) {
+    return null;
+  }
+
+  return Object.entries(attributes).reduce((acc, [name, value]) => {
+    const attribute = currentSchema.schema.attributes[name];
+
+    const attributeName = restrictedFields.includes(name) ? _.snakeCase(`strapi_${name}`) : name;
+
+    if (!attribute?.type) {
+      acc[attributeName] = value;
+
+      return acc;
+    }
+
+    if (!value) {
+      acc[attributeName] = value;
+
+      return acc;
+    }
+
+    // Changing the format in order to extract images from the richtext field
+    // NOTE: We could add an option to disable the extraction
+    if (attribute.type === 'richtext') {
+      return {
+        ...acc,
+        [attributeName]: {
+          data: value,
+          medias: [],
+        },
+      };
+    }
+
+    if (attribute.type === 'dynamiczone') {
+      return {
+        ...acc,
+        [attributeName]: value.map((v) => {
+          const compoSchema = getContentTypeSchema(schemas, v.__component);
+
+          return cleanAttributes(v, compoSchema, schemas);
+        }),
+      };
+    }
+
+    if (attribute.type === 'component') {
+      const isRepeatable = attribute.repeatable;
+      const compoSchema = getContentTypeSchema(schemas, attribute.component);
+
+      if (isRepeatable) {
+        return {
+          ...acc,
+          [attributeName]: value.map((v) => {
+            return cleanAttributes(v, compoSchema, schemas);
+          }),
+        };
+      }
+
+      return {
+        ...acc,
+        [attributeName]: cleanAttributes(value, compoSchema, schemas),
+      };
+    }
+
+    if (attribute.type === 'media') {
+      if (Array.isArray(value?.data)) {
+        return {
+          ...acc,
+          [attributeName]: value.data
+            ? value.data.map(({ id, attributes }) => ({
+                id,
+                ..._.pick(attributes, MEDIA_FIELDS),
+              }))
+            : null,
+        };
+      }
+
+      return {
+        ...acc,
+        [attributeName]: value.data
+          ? {
+              id: value.data.id,
+              ..._.pick(value.data.attributes, MEDIA_FIELDS),
+            }
+          : null,
+      };
+    }
+
+    if (attribute.type === 'relation') {
+      const relationSchema = getContentTypeSchema(schemas, attribute.target);
+
+      if (Array.isArray(value?.data)) {
+        return {
+          ...acc,
+          [attributeName]: value.data.map(({ id, attributes }) =>
+            cleanAttributes({ id, ...attributes }, relationSchema, schemas)
+          ),
+        };
+      }
+
+      return {
+        ...acc,
+        [attributeName]: cleanAttributes(
+          value.data ? { id: value.data.id, ...value.data.attributes } : null,
+          relationSchema,
+          schemas
+        ),
+      };
+    }
+
+    acc[attributeName] = value;
+
+    return acc;
+  }, {});
+};
+
+/**
+ * Transform v4 API response to the v3 format, remove data and attributes key
+ * Transform richtext field to prepare media extraction
+ * @param {Object} data
+ * @param {Object} ctx
+ * @returns {Object}
+ */
+export const cleanData = ({ id, attributes, ...rest }, ctx) => {
+  const { schemas, contentTypeUid } = ctx;
+  const currentContentTypeSchema = getContentTypeSchema(schemas, contentTypeUid);
+
+  return {
+    id,
+    ...rest,
+    ...cleanAttributes(attributes, currentContentTypeSchema, schemas),
+  };
+};