feat: download image assets (#27)

* cherrypick

* add images to schema

* chore: use new schema customization for linked file nodes

* chore: set default publicKey

* fix: add to assetIds if imageNode is defined

* chore: use const vs let

* chore(deps): update gatsby monorepo

* refactor: tidy up gatsby config

* docs: add downloadImageAssets config example

* docs: add image assets instructions

* fix: set empty images array

Co-authored-by: Renovate Bot <[email protected]>

demo/gatsby-config.js

@@ -2,11 +2,16 @@ require('dotenv').config();
 
 module.exports = {
   plugins: [
+    'gatsby-plugin-sharp',
     {
       resolve: '@chec/gatsby-source-chec',
       options: {
-        publicKey: process.env.CHEC_PUBLIC_KEY,
+        publicKey:
+          process.env.CHEC_PUBLIC_KEY ||
+          'pk_184625ed86f36703d7d233bcf6d519a4f9398f20048ec',
+        downloadImageAssets: true,
       },
     },
+    'gatsby-transformer-sharp',
   ],
 };

demo/package.json

@@ -13,6 +13,9 @@
   "dependencies": {
     "gatsby": "2.24.60",
     "@chec/gatsby-source-chec": "*",
+    "gatsby-image": "2.4.16",
+    "gatsby-plugin-sharp": "2.6.30",
+    "gatsby-transformer-sharp": "2.5.13",
     "react": "16.13.1",
     "react-dom": "16.13.1"
   }

demo/src/pages/index.js

@@ -1,9 +1,33 @@
 import React from 'react';
-import { graphql, useStaticQuery, Link } from 'gatsby';
+import { graphql, Link } from 'gatsby';
 
 import ProductList from '../components/ProductList';
 
-const pageQuery = graphql`
+export default function IndexPage({
+  data: { merchant, products, categories },
+}) {
+  return (
+    <React.Fragment>
+      <h1>{merchant.name}</h1>
+
+      <h3>Categories</h3>
+
+      <ul>
+        {categories.nodes.map(({ name, slug }) => (
+          <li key={slug}>
+            <Link to={`/categories/${slug}`}>{name}</Link>
+          </li>
+        ))}
+      </ul>
+
+      <h3>Products</h3>
+
+      <ProductList products={products.nodes} />
+    </React.Fragment>
+  );
+}
+
+export const pageQuery = graphql`
   {
     merchant: checMerchant {
       name: business_name
@@ -27,29 +51,3 @@ const pageQuery = graphql`
     }
   }
 `;
-
-const IndexPage = () => {
-  const { merchant, products, categories } = useStaticQuery(pageQuery);
-
-  return (
-    <React.Fragment>
-      <h1>{merchant.name}</h1>
-
-      <h3>Categories</h3>
-
-      <ul>
-        {categories.nodes.map(({ name, slug }) => (
-          <li key={slug}>
-            <Link to={`/categories/${slug}`}>{name}</Link>
-          </li>
-        ))}
-      </ul>
-
-      <h3>Products</h3>
-
-      <ProductList products={products.nodes} />
-    </React.Fragment>
-  );
-};
-
-export default IndexPage;

demo/src/templates/ProductPage.js

@@ -1,11 +1,21 @@
 import React from 'react';
 import { graphql } from 'gatsby';
+import Img from 'gatsby-image';
 
 export default function ProductPage({ data: { product } }) {
+  const { name, price, images } = product;
+  const [mainImage] = images;
+
   return (
     <React.Fragment>
-      <h1>{product.name}</h1>
-      <p>{product.price.formatted_with_symbol}</p>
+      {mainImage && (
+        <Img
+          fluid={mainImage.childImageSharp.fluid}
+          style={{ maxWidth: '50%' }}
+        />
+      )}
+      <h1>{name}</h1>
+      <p>{price.formatted_with_symbol}</p>
     </React.Fragment>
   );
 }
@@ -18,6 +28,13 @@ export const pageQuery = graphql`
       price {
         formatted_with_symbol
       }
+      images {
+        childImageSharp {
+          fluid(maxWidth: 560) {
+            ...GatsbyImageSharpFluid
+          }
+        }
+      }
     }
   }
 `;

gatsby-source-chec/README.md

@@ -17,6 +17,7 @@ plugins: [
     resolve: `@chec/gatsby-source-chec`,
     options: {
       publicKey: '...',
+      downloadImageAssets: true, // false by default
     },
   },
 ];
@@ -52,3 +53,11 @@ plugins: [
   }
 }
 ```
+
+## Downloading image assets
+
+This plugin provides you the option to download product asset images, and cache them in your Gatsby project. This works great with [`gatsby-image`](https://www.gatsbyjs.org/packages/gatsby-image).
+
+Add `downloadImageAssets: true` to your plugin options.
+
+These assets will be added as `images` to the `ChecProduct` nodes.

gatsby-source-chec/gatsby-node.js

@@ -1,2 +1,4 @@
+exports.onPreBootstrap = require('./gatsby/node/onPreBootstrap');
 exports.sourceNodes = require('./gatsby/node/sourceNodes');
 exports.createSchemaCustomization = require('./gatsby/node/createSchemaCustomization');
+exports.onCreateNode = require('./gatsby/node/onCreateNode');

gatsby-source-chec/gatsby/node/createSchemaCustomization.js

@@ -2,6 +2,7 @@ const createSchemaCustomization = ({ actions: { createTypes } }) => {
   createTypes(`
     type ChecProduct implements Node {
       categories: [ChecCategory] @link
+      images: [File] @link
     }
 
     type ChecCategory implements Node {

gatsby-source-chec/gatsby/node/onCreateNode.js

@@ -0,0 +1,49 @@
+const { createRemoteFileNode } = require('gatsby-source-filesystem');
+
+const withPluginOptions = require('../../plugin-options');
+
+const onCreateNode = async (
+  { node, actions: { createNode }, createNodeId, store, cache },
+  pluginOptions
+) => {
+  const { downloadImageAssets } = withPluginOptions(pluginOptions);
+
+  node.images = [];
+
+  if (
+    downloadImageAssets &&
+    node.internal.type === 'ChecProduct' &&
+    node.assets
+  ) {
+    const getImageAssets = async () => {
+      const assetIds = [];
+
+      const processImageAssets = node.assets.map(async (asset) => {
+        if (!asset.is_image) return;
+
+        try {
+          const imageNode = await createRemoteFileNode({
+            url: encodeURI(asset.url),
+            store,
+            cache,
+            createNode,
+            createNodeId,
+            parentNodeId: node.id,
+          });
+
+          if (imageNode) assetIds.push(imageNode.id);
+        } catch (e) {
+          console.error('gatsby-source-chec: ERROR', e);
+        }
+      });
+
+      await Promise.all(processImageAssets);
+
+      return assetIds;
+    };
+
+    node.images = await getImageAssets();
+  }
+};
+
+module.exports = onCreateNode;

gatsby-source-chec/gatsby/node/onPreBootstrap.js

@@ -0,0 +1,12 @@
+const withPluginOptions = require('../../plugin-options');
+
+const onPreBootstrap = ({ reporter }, pluginOptions) => {
+  const { publicKey } = withPluginOptions(pluginOptions);
+
+  if (!publicKey)
+    return reporter.panicOnBuild(
+      `@chec/gatsby-source-chec: You must provide a 'publicKey' for your Chec store`
+    );
+};
+
+module.exports = onPreBootstrap;

gatsby-source-chec/gatsby/node/sourceNodes.js

@@ -4,11 +4,6 @@ const sourceNodes = async (
   { actions, createContentDigest, reporter },
   { publicKey }
 ) => {
-  if (!publicKey)
-    return reporter.panicOnBuild(
-      `@chec/gatsby-source-chec: You must provide a 'publicKey' for your Chec store`
-    );
-
   const { createNode } = actions;
 
   const commerce = new Chec(publicKey);

gatsby-source-chec/plugin-options.js

@@ -0,0 +1,6 @@
+const pluginOptions = (options) => ({
+  downloadImageAssets: false,
+  ...options,
+});
+
+module.exports = pluginOptions;