ThomasDotCodes/gatsby-source-etsy

Gatsby.js plugin that sources an Etsy shop's featured listings. 🛍

gatsby-source-etsy 🛍

Downloads featured listing info and images for your shop!

Installation

Install the package from npm:

npm i gatsby-source-etsy

Next, add the plugin to your gatsby-config.js file:

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-source-etsy',
      options: {
        apiKey: 'your api key here',
        shopId: 'your shop id here',
        language: 'en', // optional
      },
    },
  ],
};

Example GraphQL queries

Listing info:

{
  allFeaturedEtsyListing(
    sort: { fields: featured_rank, order: ASC }
    limit: 4
  ) {
    nodes {
      currency_code
      title
      listing_id
      price
      url
    }
  }
}

Query transformed/optimized images for a listing (e.g. for use with gatsby-image - see below):

{
  allFeaturedEtsyListing(
    sort: { fields: featured_rank, order: ASC }
    limit: 4
  ) {
    nodes {
      childrenEtsyListingImage {
        rank
        childFile {
          childImageSharp {
            fluid {
              base64
              tracedSVG
              aspectRatio
              width
              height
              src
              srcSet
              srcWebp
              srcSetWebp
              originalName
            }
          }
        }
      }
    }
  }
}

Queryable entities

• allFeaturedEtsyListing
• allEtsyListingImage
• featuredEtsyListing
  • childrenEtsyListingImage
• etsyListingImage
  • childFile

Usage with gatsby-image

Install the necessary packages:

npm install gatsby-image gatsby-plugin-sharp gatsby-transformer-sharp

Query:

{
  featuredEtsyListing {
    childrenEtsyListingImage {
      childFile {
        childImageSharp {
          fluid {
            ...GatsbyImageSharpFluid
          }
        }
      }
    }
  }
}

See gatsby-image for more.