Shopify Integration Fields not supporting GatsbyImageData

[dfmkraaijeveld (Dennis Kraaijeveld)]

Are there any plans that the Integration Fields will support more image optimization features? Or that we can download the images up front like we can do with all the other content?

[Fares]

Hi @dfmkraaijeveld,

Thanks for reaching out; I'm gathering some information about this subject and will get back to you soon.

Fares

[dfmkraaijeveld (Dennis Kraaijeveld)]

Thanks! Would be awesome because right now I can't optimise any of the images I get from the integration fields, which will lead to lower Lighthouse scores. I am optimising all my images during buildtime with Gatsby Image Plugin.

[angeloashmore]

Hi @dfmkraaijeveld,

Prismic does not have a built-in way to optimize these images, but you can do it within your project with some custom code. It is not straightforward, but hopefully I can give you some guidance on how to set this up.

First, install these packages:

• gatsby-source-filesystem
• gatsby-plugin-image
• gatsby-plugin-sharp
• gatsby-transformer-sharp

Next, add these plugins to your gatsby-config.js file:

// gatsby-config.js

module.exports = {
  plugins: [
    "gatsby-plugin-image",
    "gatsby-plugin-sharp",
    "gatsby-transformer-sharp",
  ],
};

Create a gatsby-node.js file with the following. If you already have a gatsby-node.js file, the contents can be merged with what you have.

Be sure to change PrismicPageDataShopifyProductIntegrationType with the name of your Shopify field. Use GraphiQL to find what the field is called. It should be something like: Prismic${customType}Data${fieldName}.

const { createRemoteFileNode } = require("gatsby-source-filesystem");

// Add a "fields.localImages" field to Shopify Product integration fields. It
// contains a list of File nodes that lets `gatsby-transformer-sharp` process
// the images.
exports.onCreateNode = async ({
  node,
  actions,
  createNodeId,
  reporter,
  cache,
  store,
}) => {
  // Look for Shopify Product integration nodes.
  if (node.internal.type === "PrismicPageDataShopifyProductIntegrationType") {
    const images = node.images;

    // For each image, use createRemoteFileNode to download the image and save
    // in a new node.
    const imageNodes = await Promise.all(
      images.map(async (image) => {
        if (image.src) {
          return await createRemoteFileNode({
            url: image.src,
            createNode: actions.createNode,
            createNodeId,
            reporter,
            cache,
            store,
          });
        }
      })
    );

    // We will reference each downloaded image node by ID.
    const imageNodeIds = imageNodes.map((node) => node.id);

    // Add a field called "fields.localImages" to the Shopify Product
    // integration node.
    actions.createNodeField({
      node,
      name: "localImages",
      value: imageNodeIds,
    });
  }
};

// Tell Gatsby that `fields.localImages` is a list of File nodes.
exports.createSchemaCustomization = ({ actions, schema }) => {
  const shopifyProductType = schema.buildObjectType({
    name: "PrismicPageDataShopifyProductIntegrationTypeFields",
    fields: {
      localImages: {
        type: "[File]",
        extensions: { link: {} },
      },
    },
  });

  actions.createTypes(shopifyProductType);
};

Now you can query gatsbyImageData for each image like the following:

query MyQuery {
  allPrismicPage {
    nodes {
      data {
        shopify_product {
          fields {
            localImages {
              childImageSharp {
                gatsbyImageData
              }
            }
          }
        }
      }
    }
  }
}

Note that localImages is nested within a fields object. This example assumes you have a custom type named "Page" with a Shopify Integration Field named "shopify_product".

This will require you to play around with the code to get the correct names. If you have any questions, please let me know.

Thanks!

[angeloashmore]

Oh, one more thing I wanted to add.

If you are using the Imgix fields rather than localFile to display your images from Prismic within Gatsby, you can still use Imgix for your Shopify fields.

You will need to setup an account with Imgix, setup a Web Proxy image source, and setup @imgix/gatsby within your Gatsby project.

Again, this isn't a straightforward setup, and this could potentially cost money. It would mean, however, that you do not need to download images to your computer/server, resulting in quicker start-up and build times.

[dfmkraaijeveld (Dennis Kraaijeveld)]

Amazing!! Thanks for the code, it is working perfect. I should have read the Gatsby docs, because I did not know it was possible to do it like this. Thanks