// In gatsby-config.js
plugins:[
  {       
    resolve: '@pasdo501/gatsby-source-woocommerce',
    options: {
      // Base URL of Wordpress site
      api: 'wordpress.domain',

      // set to false to not see verbose output during build 
      // default: true
      verbose: true,

      // true if using https. otherwise false.
      https: false,
      api_keys: {
        consumer_key: <key>,
        consumer_secret: <secret>,
      },
      // Array of strings with fields you'd like to create nodes for...
      fields: ['products', 'products/categories', 'products/attributes'],
      // Send the API keys as query string parameters instead of using the authorization header
      // OPTIONAL: defaults to false
      query_string_auth: false,
      // Version of the woocommerce API to use
      // OPTIONAL: defaults to 'wc/v3'
      api_version: 'wc/v3',
      // OPTIONAL: How many results to retrieve *per request*
      per_page: 100,
      // OPTIONAL: Custom WP REST API url prefix, only needed if not using 
      // the default prefix ('wp-json').
      // wpAPIPrefix: 'wp-json',
      // OPTIONAL: Support for URLs with ports, e.g. 8080; defaults to no port
      // port: '8080',
      // OPTIONAL: Encoding; default to 'utf8'
      encoding: 'utf8',
      // OPTIONAL: Custom Axios config (see https://github.com/axios/axios) - note that this can override other options.
      axios_config: {
        // Axios config options
      }
    }
  }
]

{
  allWcProducts {
    edges {
      node {
        id
        wordpress_id
        name
        categories {
          wordpress_id
        }
        images {
          localFile {
            // childImageSharp ... etc
          }
        }
      }
    }
  }
}

{
  allWcProductsAttributes {
    nodes {
      name
      wordpress_id
      order_by
      position
      slug
      type
      has_archives
      attribute_options {
        count
        description
        menu_order
        name
        slug
      }
    }
  }
}

{
  allWcProductsCategories {
    edges {
      node {
        id
        wordpress_id
        name
        slug
        image {
          localFile {
            // childImageSharp ... etc
          }
        }
      }
    }
  }
}

{
  wcProducts(wordpress_id: {eq: 12}) {
    name
    price
    related_ids
  }
}

{
  wcProducts(wordpress_id: {eq: 12}) {
    name
    price
    related_products {
      name
      // etc - same fields as a normal product
    }
  }
}

{
  wcProducts(wordpress_id: {eq: 12}) {
    name
    price
    grouped_products_nodes {
      name
      // etc - same fields as a normal product
    }
  }
}

{
  wcProducts(wordpress_id: {eq: 12}) {
    wordpress_id
    name
    price_html
    product_variations {
      # Note: ID, not wordpress_id
      id 
      # Note: no price_html inside variations
      price 
      description
      attributes {
        # The compination of attributes making up this variation. Missing attribute = any
        name
        option
      }
    }
    
  }
}

{
  wcProductsCategories(wordpress_id: {eq: 20}) {
     name
     slug
     products {
       name
       price
       images {
         localFile {
           // childImageSharp ... etc
         }
       }
     }
   }
}

{
  allWcProductsTags {
    nodes {
      name
      count
      products {
        name
      }
    }
  }
}

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

plugins: [`gatsby-transformer-sharp`, `gatsby-plugin-sharp`]

import React from "react"
import { graphql } from "gatsby"
import Img from "gatsby-image"

export default ({ data }) => (
  <div>
    <h1>Hello gatsby-image</h1>
    <Img fluid={data.wcProducts.images[0].localFile.childImageSharp.fluid} alt={data.wcProducts.images[0].alt} />
  </div>
)

export const query = graphql`
  query allProducts {
     wcProducts (slug: {
        eq: "test-product"
      }) {
        id
        name
        images {
          alt
          localFile {
            childImageSharp {
              fluid {
                ...GatsbyImageSharpFluid
              }
            }
          }
        }
      }
  }
`

{
  wcProducts (slug: {
    eq: "test-product"
  }) {
    id
    name
    images {
      alt
      localFile {
        childImageSharp {
          fluid (maxWidth: 800, cropFocus: CENTER) {
            ...GatsbyImageSharpFluid
          }
        }
      }
    }
  }
}

{
  wcProducts (slug: {
    eq: "test-product"
  }) {
    id
    name
    images {
      alt
      localFile {
        childImageSharp {
          fixed (width: 800, toFormat: JPG) {
            ...GatsbyImageSharpFixed
          }
        }
      }
    }
  }
}

{
  wcProducts (slug: {
    eq: "test-product"
  }) {
    id
    name
    images {
      alt
      localFile {
        childImageSharp {
          resize (width: 800, height: 600, cropFocus: CENTER, quality: 80) {
            src
          }
        }
      }
    }
  }
}