Gatsby and Woocommerce API – Product category fields stopped syncing in GraphQL

Question

I am building a headless E-commerce application with Gatsby js and the gatsby-source-woocommerce plugin. Products are categorised in two main categories (Woman and Man) with a set of subcategories. Product pages and Category pages are dynamically created using Node and GraphQL.

Everything has been working perfectly but now the main category 'Woman' has suddenly stopped appearing in GraphQL which results in the page /woman being empty. The weird part is that all other categories including subcategories of woman are fine. I've added new categories in the woocommerce back-end to find the issue and nothing will sync. Changing other data works, like product name, prices or images. So basically it appears that the GraphQL is not fetching updates, but only for 'allWcProductsCategories'.

I have tried gatsby clear, i have tried reinstalling dependencies and no warnings or errors appear in run develop. And now I'm going insane. Help?

The gatsby-node.js code (which works perfectly)

const path = require('path')

module.exports.createPages = async ({ graphql, actions }) => {
    const { createPage } = actions
    const singleTemplate = path.resolve('./src/templates/single.js')
    const womanTemplate = path.resolve('./src/templates/woman.js')
    const manTemplate = path.resolve('./src/templates/man.js')
    const res = await graphql(`
        query {
            allWcProducts {
                edges {
                    node {
                        slug
                    }
                }
            }
            allWcProductsCategories {
                edges {
                    node {
                        slug
                    }
                }
            }
        }
    `)

    res.data.allWcProducts.edges.forEach((edge) => {
        createPage({
            component: singleTemplate, 
            path: `/${edge.node.slug}`, 
            context: {
                slug: edge.node.slug
            }
        })
    })

    res.data.allWcProductsCategories.edges.forEach((edge) => {

        var category = `${edge.node.slug}`;

        if (category === 'woman' ) {
            var slug = `/${edge.node.slug}`;
            createPage({
                component: womanTemplate, 
                path: slug, 
                context: {
                    slug: edge.node.slug
                }
            })
        } else if (category.startsWith('woman-')) {
            var slug = `/woman/${edge.node.slug}`;
            slug = slug.replace('woman-', '')
            createPage({
                component: womanTemplate, 
                path: slug, 
                context: {
                    slug: edge.node.slug
                }
            })
        } else if (category === 'man' ) {
            var slug = `/${edge.node.slug}`;
            createPage({
                component: manTemplate, 
                path: slug, 
                context: {
                    slug: edge.node.slug
                }
            })
        } else if (category.startsWith('man-')) {
            var slug = `/man/${edge.node.slug}`;
            slug = slug.replace('man-', '')
            createPage({
                component: manTemplate, 
                path: slug, 
                context: {
                    slug: edge.node.slug
                }
            })
        }
    })

    if (process.env.NODE_ENV === 'development') {
        process.env.GATSBY_WEBPACK_PUBLICPATH = '/'
    }
}

I don't see any obvious problems. If I were you, I'd try changing your vars to const in case the scoping is getting askew. Of course, you said it'd been working so that's probably not the issue. Sorry that I can't think of anything further right now. — Reed Dunkle
Hii, Fredrik. I'm facing trouble using gatsby-source-woocommerce. I get an error Error: connect ECONNREFUSED 127.0.0.1:8080. Could you please tell me how did you do it — Sravan Kumar

shallow.alchemy shallow.alchemy · Accepted Answer · 2019-09-22T17:54:07

try gatsby clean instead of gatsby clear and make sure you are running the latest version of the cli. gatsby clear is not a cli tool. But if it were a caching problem, you would have old data, not no data.

Other than that, did you console.log edge.node.slug (where you set it to var category)? Are there slugs set to 'woman'? Make sure it isn't 'woman/'.

Gatsby and Woocommerce API – Product category fields stopped syncing in GraphQL

1 Answers