feat: added support for new gatsby image plugin

README.md

@@ -46,17 +46,17 @@ plugins: [
       downloadImages: `boolean_value`,
 
       // Optional: Specify the content types from which you want the plugin to retrieve data.
-      contentTypes: [‘blog’,’author’]
+      contentTypes: [‘blog’,’author’],
       // This will fetch the data of the ‘blog’ and ‘author’ content types only.
 
       // Optional: Specify the content types that the plugin should exclude while fetching data of all content types.
-      excludeContentTypes: [‘home’,’about’]
+      excludeContentTypes: [‘home’,’about’],
       // This will fetch the data of all the available content types excluding the ‘home’ and ‘about’ content types.
 
       // Note: Only one of the above options should be used to fetch data. If you add both options to fetch all contentTypes and excludeContentTypes, than only one of the query gets executed.
 
       // Optional: Include the locales that you want the plugin to fetch data from.
-      locales: [‘en-us’,’fr-fr’]
+      locales: [‘en-us’,’fr-fr’],
       // In this case, the plugin will fetch only English (United States) and French (France) language data.
 
       // Optional: Specify the content types and locales of which you want the plugin to retrieve data.
@@ -183,6 +183,82 @@ Remember that gatbsy-image doesn’t support GIF and SVG images.
 
 To use GIF image, Gatsby recommends to import the image directly. In SVG, creating multiple variants of the image doesn’t make sense because it is vector-based graphics that you can freely scale without losing quality.
 
+### The new gatsby image plugin
+
+The gatsby-image plugin lets you add responsive images to your site. By using this plugin, you can format and produce images of various qualities and sizes.
+
+## Prerequisites
+
+To use this, you need to have the following plugins installed:
+
+- gatsby-plugin-image
+- gatsby-plugin-sharp
+- gatsby-transformer-sharp
+
+# Description
+
+Next step is to add an image to your page query and use the gatsbyImageData resolver to pass arguments that will configure your image.
+
+The gatsbyImageData resolver allows you to pass arguments to format and configure your images. 
+Using the Contentstack Image delivery APIs you can perform various operations on the images by passing the necessary parameters.
+
+Lets understand this with an example.
+In the below example we have added several parameters to format the image. 
+
+```query MyQuery {
+  allContentstackBlog {
+    edges {
+      node {
+        title
+        image {
+          title
+          gatsbyImageData(
+            layout: CONSTRAINED
+            crop: "100,100"
+            trim: "25,25,100,100"
+            backgroundColor:"cccccc"
+            pad: "25,25,25,25"
+          )
+        }
+      }
+    }
+  }
+}```
+
+Lets understand some parameters that we defined:
+layout: This defines the layout of the image, it can be CONSTRAINED, FIXED or FULL_WIDTH.
+The crop, trim, backgroundColor and pad parameters configure the image according to the values inserted by the user. 
+
+Note: To learn more about these parameters and other available options, read our detailed documentation on Contentstack Image delivery APIs. https://www.contentstack.com/docs/developers/apis/image-delivery-api/.
+
+This query below returns the URL for a 20px-wide image, to use as a blurred placeholder.
+The image is downloaded and converted to a base64-encoded data URI.
+
+Here’s an example of the same:
+```query MyQuery {
+  allContentstackBlog {
+    edges {
+      node {
+        title
+        image {
+          title
+          filename
+          url
+          gatsbyImageData(
+            layout: CONSTRAINED
+            placeholder: BLURRED
+            crop: "100,100"
+            trim: "25,25,100,100"
+            backgroundColor:"cccccc"
+            pad: "25,25,25,25"
+          )
+        }
+      }
+    }
+  }
+}```
+
+For more information checkout gatsby's documentation on usage of the new image plugin. https://www.gatsbyjs.com/docs/how-to/plugins-and-themes/adding-gatsby-image-support/
 
 [gatsby]: https://www.gatsbyjs.org/
 [contentstack]: https://www.contentstack.com/

extend-node-type.js

@@ -0,0 +1,151 @@
+'use strict';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var _require = require('gatsby/graphql'),
+    GraphQLInt = _require.GraphQLInt,
+    GraphQLJSON = _require.GraphQLJSON,
+    GraphQLString = _require.GraphQLString;
+
+var _require2 = require('./gatsby-plugin-image'),
+    resolveGatsbyImageData = _require2.resolveGatsbyImageData;
+
+var _require3 = require('./utils'),
+    CODES = _require3.CODES;
+
+exports.setFieldsOnGraphQLNodeType = /*#__PURE__*/function () {
+  var _ref = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3(_ref2, configOptions) {
+    var type, cache, reporter, typePrefix, getGatsbyImageData, gatsbyImageData;
+    return _regenerator["default"].wrap(function _callee3$(_context3) {
+      while (1) {
+        switch (_context3.prev = _context3.next) {
+          case 0:
+            type = _ref2.type, cache = _ref2.cache, reporter = _ref2.reporter;
+            typePrefix = configOptions.type_prefix || 'Contentstack';
+
+            if (!(type.name !== "".concat(typePrefix, "_assets"))) {
+              _context3.next = 4;
+              break;
+            }
+
+            return _context3.abrupt("return", {});
+
+          case 4:
+            // gatsby-plugin-image
+            getGatsbyImageData = /*#__PURE__*/function () {
+              var _ref3 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+                var _yield$import, getGatsbyImageFieldConfig, fieldConfig;
+
+                return _regenerator["default"].wrap(function _callee2$(_context2) {
+                  while (1) {
+                    switch (_context2.prev = _context2.next) {
+                      case 0:
+                        _context2.prev = 0;
+                        _context2.next = 3;
+                        return Promise.resolve().then(function () {
+                          return _interopRequireWildcard(require('gatsby-plugin-image/graphql-utils'));
+                        });
+
+                      case 3:
+                        _yield$import = _context2.sent;
+                        getGatsbyImageFieldConfig = _yield$import.getGatsbyImageFieldConfig;
+                        fieldConfig = getGatsbyImageFieldConfig( /*#__PURE__*/function () {
+                          var _ref4 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(image, options) {
+                            return _regenerator["default"].wrap(function _callee$(_context) {
+                              while (1) {
+                                switch (_context.prev = _context.next) {
+                                  case 0:
+                                    return _context.abrupt("return", resolveGatsbyImageData({
+                                      image: image,
+                                      options: options,
+                                      cache: cache,
+                                      reporter: reporter
+                                    }));
+
+                                  case 1:
+                                  case "end":
+                                    return _context.stop();
+                                }
+                              }
+                            }, _callee);
+                          }));
+
+                          return function (_x3, _x4) {
+                            return _ref4.apply(this, arguments);
+                          };
+                        }(), {
+                          fit: {
+                            type: GraphQLString
+                          },
+                          crop: {
+                            type: GraphQLString
+                          },
+                          trim: {
+                            type: GraphQLString
+                          },
+                          pad: {
+                            type: GraphQLString
+                          },
+                          quality: {
+                            type: GraphQLInt,
+                            defaultValue: 50
+                          }
+                        });
+                        fieldConfig.type = GraphQLJSON;
+                        return _context2.abrupt("return", fieldConfig);
+
+                      case 10:
+                        _context2.prev = 10;
+                        _context2.t0 = _context2["catch"](0);
+                        reporter.panic({
+                          id: CODES.MissingDependencyError,
+                          context: {
+                            sourceMessage: "Gatsby plugin image is required. Please check https://github.com/contentstack/gatsby-source-contentstack#the-new-gatsby-image-plugin for more help."
+                          },
+                          error: _context2.t0
+                        });
+
+                      case 13:
+                      case "end":
+                        return _context2.stop();
+                    }
+                  }
+                }, _callee2, null, [[0, 10]]);
+              }));
+
+              return function getGatsbyImageData() {
+                return _ref3.apply(this, arguments);
+              };
+            }();
+
+            _context3.next = 7;
+            return getGatsbyImageData();
+
+          case 7:
+            gatsbyImageData = _context3.sent;
+            return _context3.abrupt("return", {
+              gatsbyImageData: gatsbyImageData
+            });
+
+          case 9:
+          case "end":
+            return _context3.stop();
+        }
+      }
+    }, _callee3);
+  }));
+
+  return function (_x, _x2) {
+    return _ref.apply(this, arguments);
+  };
+}();

gatsby-node.js

@@ -41,6 +41,9 @@ var _require3 = require('./fetch'),
 
 var downloadAssets = require('./download-assets');
 
+var _require4 = require('./extend-node-type'),
+    setFieldsOnGraphQLNodeType = _require4.setFieldsOnGraphQLNodeType;
+
 var references = [];
 var groups = [];
 var fileFields = [];
@@ -358,6 +361,8 @@ exports.sourceNodes = /*#__PURE__*/function () {
   };
 }();
 
+exports.setFieldsOnGraphQLNodeType = setFieldsOnGraphQLNodeType;
+
 exports.createResolvers = function (_ref6) {
   var createResolvers = _ref6.createResolvers;
   var resolvers = {};
@@ -450,12 +455,24 @@ var ERROR_MAP = (_ERROR_MAP = {}, (0, _defineProperty2["default"])(_ERROR_MAP, C
   },
   level: "ERROR",
   type: "PLUGIN"
+}), (0, _defineProperty2["default"])(_ERROR_MAP, CODES.ImageAPIError, {
+  text: function text(context) {
+    return context.sourceMessage;
+  },
+  level: "ERROR",
+  type: "PLUGIN"
+}), (0, _defineProperty2["default"])(_ERROR_MAP, CODES.MissingDependencyError, {
+  text: function text(context) {
+    return context.sourceMessage;
+  },
+  level: "ERROR",
+  type: "PLUGIN"
 }), _ERROR_MAP);
 var coreSupportsOnPluginInit;
 
 try {
-  var _require4 = require('gatsby-plugin-utils'),
-      isGatsbyNodeLifecycleSupported = _require4.isGatsbyNodeLifecycleSupported;
+  var _require5 = require('gatsby-plugin-utils'),
+      isGatsbyNodeLifecycleSupported = _require5.isGatsbyNodeLifecycleSupported;
 
   if (isGatsbyNodeLifecycleSupported('onPluginInit')) {
     coreSupportsOnPluginInit = 'stable';