Gatsby: GraphQL error in deployment when filtering WP Posts by categories or tags

[craig-doyle-uk]

Environment

Gatsby version: 1.9.149
Node.js version: 6.12.3
Operating System: OSX 10.13.2

File contents

gatsby-config.js:

module.exports = {
  siteMetadata: {
    title: `Gatsby Default Starter`
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: 'gatsby-source-wordpress',
      options: {
        baseUrl: 'f******s.w******y.co.uk',
    protocol: 'http',
    hostingWPCOM: false,
    useACF: true,
        verboseOutput: true
    }
   },{
      resolve: `gatsby-plugin-sass`,
      options: {
        precision: 8
    }
   }]
}

package.json:

{
  "name": "gatsby-starter-default",
  "description": "Gatsby default starter",
  "version": "1.0.0",
  "author": "Kyle Mathews <[email protected]>",
  "dependencies": {
    "gatsby": "^1.9.149",
    "gatsby-image": "^1.0.27",
    "gatsby-link": "^1.6.28",
    "gatsby-plugin-react-helmet": "^1.0.8",
    "gatsby-plugin-sass": "^1.0.14",
    "gatsby-plugin-sharp": "^1.6.22",
    "gatsby-source-wordpress": "^2.0.37",
    "gatsby-transformer-sharp": "^1.6.15",
    "moment": "^2.20.1",
    "webfontloader": "^1.6.28"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "MIT",
  "main": "n/a",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --trailing-comma es5 --no-semi --single-quote --write \"src/**/*.js\"",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies": {
    "prettier": "^1.8.2"
  }
}

I have a file named news.js that pulls in the some ACF for the News landing page, along with all the posts that are categorised as News in the CMS. The query is listed shown below:

query newsQuery {
  allWordpressPost(filter: {categories: {eq: 1}}) {
    edges {
      node {
        title
        slug
        date
        author {
          ... on wordpress__wp_users {
            name
          }
        }
        excerpt
        content
        featured_media {
          localFile {
            childImageSharp {
              resize(height: 400, width: 512) {
                src
              }
            }
          }
        }
      }
    }
  }
  wordpressPage(title: {eq: "News Landing Page"}) {
    children {
      ... on WordPressAcf_hero {
        title
        style
        introduction_title
        introduction_copy
      }
    }
  }
}

Actual result

When I run gatsby develop or gatsby build on my computer, the page at /news correctly displays the hero image and text along with the posts categorised as News below. When I deploy to Netlify the deploy fails with the error GraphQL Error Argument "filter" has invalid value {categories: {eq: 1}}. In field "categories": Unknown field.

I am also able to get the categories as a node locally on the post query but when deployed it errors as well. I have tried working with tags as a workaround but the same issue persists.

I appreciate any workarounds / or bug fixes that anybody could suggest!

Thanks in advance.

...

[calcsam]

What happens if you remove node_modules locally and reinstall? Clone the repo, install node_modules, and run gatsby build? Does it still succeed? Have you tried on other providers like surge.sh?

Assuming the answers to above questions are "yes", a build that works locally but fails on Netlify sounds like a Netlify bug -- you may want to raise this with the Netlify folks.

[crgeary]

Can you run this locally? I have the exact same issue no matter where I run it (locally or Netlify) as GraphQL doesn't recognise the categories filter.

Looking at the hints, the wordpress__POSTConnection doesn't even offer categories as a suggestion that I can implement.

Edit: Sorry, didn't see the part about you running locally :/

[KyleAMathews]

@craig-doyle-uk have you tried running your query in GraphiQL?

[almorgan]

Hey guys

Same issue here I think.

Categories don't seem to appear in the hints for a filter on allWordPressPosts on the latest version.

What I found is that in version 2.0.49 categories requires a nested statement such as:

categories {
name
slug
}

I rolled back to version 2.0.0 and when you define categories it actually returns an array of IDs. You can actually seem to define categories as a filter in this version and I was able to get Craigs example filter working.

New to Gatsby (loving it though!) so I'll try and delve further.

Could it be the case that in Craigs case that Netlify or a Gatsby command updates the packages at deployment which causes the difference to local?

Thanks

[jbsmith731]

@almorgan is correct... categories returns an array of objects. Given this change how do we filter allWordpressPost by category name?

[almorgan]

Hey @jbsmith731

 query homePageQuery { 
    allWordpressPost(filter: {
      categories:{
        name:{
          eq: "anyvalue"
        }
      }
    }) {
      edges {
        node {
          title
          excerpt
          slug
          categories {
            wordpress_id
            id
            name
          }
        }
      }
    }
  }

I think it should be something like that. The nested filter seems to work for querying the author object but when I run this for categories I end up with:

"message": "innerGqConfig.type.getFields is not a function",

Not sure if I'm missing something or if it's an issue.

[jbsmith731]

@almorgan this doesn't work for me either. In the graphql explorer categories is not listed as an option for filter.

[machour]

Got the exact same case/error as @almorgan

[machour]

This quick-fix solves the problem for me:

--- gatsby/dist/schema/run-sift.js  2018-02-27 18:27:09.000000000 +0100
+++ gatsby/dist/schema/run-sift.js.patched  2018-02-27 18:27:48.000000000 +0100
@@ -116,6 +116,7 @@
             var innerSift = siftFieldsObj[k];
             var innerGqConfig = gqFields[k];
             if (_.isObject(innerSift) && v != null) {
+              if (!innerGqConfig.type.getFields) return v;
               return resolveRecursive(
                 v,
                 innerSift,

I'm able to run my GraphQL queries and retrieve posts by category using:

export const pageQuery = graphql`
  query MyQueryName {
    allWordpressPost(filter: { categories: { name: { eq: "foo" } } }) {
      edges {
        node {
          guid
          categories {
            name
          }
        }
      }
    }
  }
`;

but I'm fairly new to Gatsby and I think there's a bigger problem than that.

[machour]

Should now be fixed in 1.9.220 🎉

[KyleAMathews]

Thanks @machour!!

[jamesdbruner]

@KyleAMathews I'm still having this issue on v1.9.242 'categories' doesn't populate in graphiql for me as an option to filter.

Here's what the query I'm trying to write looks like...
{ allWordpressPost(filter: { categories: { name: { eq: "IT" } } } }

[jamesdbruner]

@machour Can you confirm that this is still working for you? I'd love to get this working properly. :)

[machour]

I'll give it a try tonight mate

[machour]

@jamesdbruner Just tried on [email protected], seems to be working fine for me:

[sebastienfi]

I suggest you filter by category id wordpress_id because the name can change.

[jamesdbruner]

@machour @sebastienfi @KyleAMathews Sorry guys, I had updated gatsby globally but had forgotten to delete my project's local copy. It looks like it's working now! Thanks so much for your help!

[agyeiarcher]

does anyone still have this problem? I get "Field "name" is not defined by type wordpressPostConnectionCategoriesQueryList_2." as an error when I try to filter by category:

query getCats{
  allWordpressPost(filter: { categories: { name: { eq: "recipes" } } }){
    edges {
      node {
        guid
        title
        excerpt
        slug
        categories{
                    name
          id
        }
      }
    }
  }
}

[agyeiarcher]

In Case it's any help, this worked for me:

query getCats ($catname: String = "Uncategorized"){
  allWordpressPost(filter: {categories: {elemMatch: {name: { eq: $catname }}}} ){
    edges {
      node {
        guid
        title
        excerpt
        slug
        categories {
              name
              id
        }
      }
    }
  }
}

[aaronaustin]

Thanks @agyeiarcher ! You just saved me a ton of work. I've been working in gatsby 2 for awhile now and after an update my queries started failing. I previously had
allWordpressPost(filter: {categories: {slug: {nin: ["event"]}}})
which was working fine until the update. Wrapping the slug with elemMatch fixed things. Can anyone explain why this works? Thanks!

[kepi0809]

In Case it's any help, this worked for me:

query getCats ($catname: String = "Uncategorized"){
  allWordpressPost(filter: {categories: {elemMatch: {name: { eq: $catname }}}} ){
    edges {
      node {
        guid
        title
        excerpt
        slug
        categories {
              name
              id
        }
      }
    }
  }
}

Thank you very much @agyeiarcher, this solved for me too, which is funny because the graphql playground throws error for it (invalid value) but it runs there too.

[SimonIMG]

Confirming @agyeiarcher has it spot on!

Adding {elemMatch: (and closing }) to the query fixes the issue.

My query was previously working until I updated my Node.js and Gatsby CLI, then deleted my node_modules and reinstalled with yarn.

Thanks.

[CoderPrans]

Confirmed !

{
    allWordpressPost(filter: { categories: { elemMatch: { name: {eq: "Marketing"} } } }){
      edges{
        node{
          id
          title
          content
          excerpt
          categories{
            name
            id
          }
          slug
          wordpress_id
       }
     }   
   }
 }

totaly worked for me. elemMatch does the trick.

[gauravadhikari1997]

In 2020,to get Posts by Category, this query is updated as:

query getPostsByCategory($catname: String = "ReactJS") {
  allWpPost(
    filter: { categories: { nodes: { elemMatch: { name: { eq: $catname } } } } }
  ) {
    edges {
      node {
        id
        slug
        excerpt
        title
        date
        content
      }
    }
  }
}

Thanks