localFileResolver

gatsby-node.js

exports.createResolvers = async ({
  actions,
  cache,
  createNodeId,
  createResolvers,
  store,
  reporter,
}) => {
  const { createNode } = actions;
  const localFileResolver = async source => {
    if (process.env.SKIP_BUILD_IMAGES === "yes") {
      // reporter.info(
      //   `skipped: ${_get(source, "id", "missing id")} ${_get(
      //     source,
      //     "url",
      //     "missing url"
      //   )}`
      // );
      return null;
    }
    try {
      return await createRemoteFileNode({
        url: encodeURI(source.url),
        store,
        cache,
        createNode,
        createNodeId,
        reporter,
      });
    } catch (e) {
      reporter.warn(e);
      return null;
    }
  };

  await createResolvers({
    File: {
      svgTrace: {
        type: GraphQLString,
        resolve: async (parent, args, context, info) => {
          if (process.env.SKIP_BUILD_IMAGES === "yes") {
            return null;
          }

          const filename = `${_get(parent, "name")}.${_get(
            parent,
            "extension"
          )}`;

          const cacheKey = `${_get(
            parent,
            "internal.contentDigest"
          )}/${filename}`;
          let trace = await cache.get(cacheKey);

          if (validTrace(trace)) {
            return trace;
          }

          if (!["jpeg", "jpg", "png"].includes(_get(parent, "extension"))) {
            reporter.warn(`Skipped: ${filename} is an unsupported file type.`);
            return null;
          }
          try {
            trace = await traceSVG({
              file: parent,
              cache,
              reporter,
            });

            if (validTrace(trace)) {
              await cache.set(cacheKey, trace);
              return trace;
            }

            return null;
          } catch (e) {
            reporter.warn(`Error: failed to trace ${filename}. ${e}`);
            return null;
          }
        },
      },
    },
    uploads_Asset: {
      imageFile: {
        type: `File`,
        resolve: localFileResolver,
      },
    },
  });
};

Image.js

import React from "react";
import _get from "lodash.get";
import GatsbyImage from "gatsby-image";

const fallbackUrl = "/fallback-image.svg";
const placeholderSVG = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cdefs/%3E%3Cpath fill='%23eee' d='M0 0h10v10H0z'/%3E%3C/svg%3E`;

const Image = ({ src, srcset, id, imageFile, sizes, ...props }) => {
  const width = _get(props, "width");
  const height = _get(props, "height");
  const svgTrace = _get(imageFile, "svgTrace");

  const fallBackImage = {
    fluid: {
      aspectRatio: width && height ? width / height : 1,
      srcSet,
      src,
      sizes: "(max-width: 1400px) 100vw, 1400px",
    },
  };

  const { fluid, fixed } = _get(imageFile, "childImageSharp") || fallBackImage;
  const image = fixed ? { ...fixed, sizes: sizes || `${width}px` } : fluid;

  return (
    <GatsbyImage
      fluid={{ ...image, tracedSVG: svgTrace || placeholderSVG }}
      alt=""
      fadeIn
      {...props}
    />
  );
};

export default Image;