Community Plugin

Note

Please note: the original author of this package is Marc Glasser — see the the original repo and package.

gatsby-source-woocommerce

Source plugin for Gatsby. Pulls in data from protected routes via the WooCommerce REST API with credentials.

Install
How to Use
Currently Supported Fields
GraphQL Query Examples
Integration with gatsby-image
Changelog

Install

npm install --save @pasdo501/gatsby-source-woocommerce

yarn add @pasdo501/gatsby-source-woocommerce

How to Use

// In gatsby-config.js
plugins:[
  {       
    resolve: '@pasdo501/gatsby-source-woocommerce',
    options: {
	   // Base URL of Wordpress site
      api: 'wordpress.domain',
      // true if using https. false if nah.
      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'],
      // Version of the woocommerce API to use
      // OPTIONAL: defaults to 'wc/v1'
      api_version: 'wc/v3',
      // OPTIONAL: How many results to retrieve
      per_page: 100
    }
  }
]

Currently Supported Fields

Definitive:

Products
Customers
Orders
Reports
Coupons

Note: If following the endpoint layout from the WooCommerce REST API docs, all fields that do not contain a wildcard should be supported.

For example, to get product categories: including ‘products/categories’ in fields will show up as allWcProductsCategories / wcProductsCategories

Some GraphQL Query Examples

All products (with associated images):

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

All product categories (with associated image):

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

Specific product by wordpress ID:

{
  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
    }
  }
}

Specific grouped product by wordpress ID, with links to each product grouped:

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

Specific product, with variations:

{
  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
      }
    }
    
  }
}

Specific product category (with associated products):

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

All Product Tags and their associated products:

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

Integration with `gatsby-image`

You can use images coming from this plugin with gatsby-image. gatsby-image is a React component specially designed to work seamlessly with Gatsby’s GraphQL queries. It combines Gatsby’s native image processing capabilities with advanced image loading techniques to easily and completely optimize image loading for your sites.

To use this, you will first need to install and configure it and its dependencies.

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

Then add these plugins to gatsby-config.js:

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

You can then use the gatsby-image component:

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
              }
            }
          }
        }
      }
  }
`

Some example queries for the fixed and fluid types are below.

Responsive Fluid

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

Responsive Fixed

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

Resize

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

You can visit gatsby-image for more information, and to learn about the different types of queries.

Changelog

0.6.2: Fix race condition when adding sharp images to products
0.6.1: Add Gatsby Image support (localFile field) to product variations images.
0.6.0: Properly support product variations, accessible through the product_variations field on products.
0.5.0: Added grouped_products_nodes field to products. Points to the node of each grouped product (or an empty array if not a grouped product). Grouped product nodes found under grouped_products_nodes rather than grouped_products to allow for backwards compatibility.
0.4.0: Also map related products as product nodes, rather than just an array of IDs
0.3.5: Gatsby Image related documentation c/o Travis Reynolds
0.3.4: Mapping products & tags to each other
0.3.3: Fixing issues related to product - category mapping, API version. (Thank you Travis Reynolds). Product categories IDs can now also be accessed with wordpress_id when no category nodes are pulled in. This is to keep access consistent, whether or not categories are used. Previously, without the ‘products/categories’ field, product category ID was accessed as product.categories.id (an integer), while with the ‘products/categories’ field, it was product.categories.wordpress_id (since categories.id is now the node ID - a string).
0.3.2: Mapping products & categories to each other
0.3.0: Associated products & product categories with local file images downloaded during the build process to allow use of image transform plugins.