[gatsby-source-shopify] — Limit products in ShopifyCollection

Summary

Wouldn’t it be great to limit the number of products pulled in when querying a collection in the gatsby-source-shopify plugin? This would reduce the size of the generated page-data.json files, making page load and prefetching even faster.

Basic example

myCollection: shopifyCollection(handle: { eq: "kitchen" }) {
  handle
  products(limit: 18) {
    edges {
      node {
        id
      }
    }
  }
}

Motivation

Speed. And thrift.

Right now the plugin pulls in all the products in a collection. Say you only want to tease a collection by showing two or three products on a shop overview page and give the user the option to drill deeper. Right now i get rather largish page-data.json files that include all the queried data, although i will never use it.

We could do the same for images as well. Sometimes i don’t need more than one image of a product or category.

[angeloashmore]

As an aside, it would be nice to have generic resolvers that allowed limit, sort, skip, etc. on array values. Something like a @listOperators directive:

type ShopifyCollection {
  products: [ShopifyProduct] @listOperators
}

Something like that could benefit other source plugins.

[connordowson]

I got this to work using this

exports.createResolvers = ({ createResolvers }) => {
  createResolvers({
    ShopifyCollection: {
      // Add products from the selected section(s)
      products: {
        args: {
          limit: `Int`,
        },
        resolve: async (root, args, context, info) => {
          const allProductsInCollection =
            (await info.originalResolver(root, args, context, info)) || []

          return args.limit
            ? allProductsInCollection.slice(0, args.limit)
            : allProductsInCollection
        },
      },
    },
  })
}