gatsby-source-etsy 🛍
Downloads listing info and images from your Etsy 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: {
api_key: 'your api key here',
shop_id: 'your shop id here',
language: 'en',
translate_keywords: true,
keywords: 'coffee',
sort_on: 'created',
sort_order: 'up',
min_price: 0.01,
max_price: 999.99,
color: '#333333',
color_accuracy: 0,
tags: 'diy,coffee,brewing',
taxonomy_id: 18,
include_private: true,
},
},
],
}
This plugin supports the options specified in Etsy's documentation under findAllShopListingsActive.
For information on the language
and translate_keywords
properties, please see Searching Listings.
Example GraphQL queries
Listing info:
{
allEtsyListing(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):
{
allEtsyListing(sort: { fields: featured_rank, order: ASC }, limit: 4) {
nodes {
childrenEtsyListingImage {
rank
childFile {
childImageSharp {
fluid {
base64
tracedSVG
aspectRatio
src
srcSet
srcWebp
srcSetWebp
originalName
originalImg
presentationHeight
presentationWidth
sizes
}
}
}
}
}
}
}
Queryable entities
- allEtsyListing
- allEtsyListingImage
- etsyListing
- etsyListingImage
Usage with gatsby-image
Install the necessary packages:
npm install gatsby-image gatsby-plugin-sharp gatsby-transformer-sharp
Query:
{
etsyListing {
childrenEtsyListingImage {
childFile {
childImageSharp {
fluid {
...GatsbyImageSharpFluid
}
}
}
}
}
}
See gatsby-image
for more.