Gatsby GraphQL throwing errors on File nodes in mdx.frontmatter – `ids.push is not a function`

Question

I'm running Gatsby 4.17.2 with gatsby-plugin-mdx & gatsby-source-filesystem.

Recently I updated some outdated dependencies with npm audit fix and it has started throwing errors in GraphQL on File nodes in frontmatter

If I remove the File nodes from the GraphQL query, it works.

Here's the error:

 ERROR #85901  GRAPHQL

There was an error in your GraphQL query:

ids.push is not a function

   4 |     filter: {fileAbsolutePath: {regex: "/src/mdx/products/"}}
   5 |   ) {
   6 |     nodes {
   7 |       frontmatter {
   8 |         title
   9 |         deployments
  10 |         filter
  11 |         parent
  12 |         headline
  13 |         tagline
> 14 |         logo {
     |         ^
  15 |           publicURL
  16 |         }
  17 |         hero {
  18 |           publicURL
  19 |         }
  20 |         urls {
  21 |           migration
  22 |         }
  23 |       }
  24 |       id

File path: /Users/david/path/to/gatsby-website/src/hooks/use-products-data.js
Plugin: none


  TypeError: ids.push is not a function
  
  - node-model.js:554 LocalNodeModel.findRootNodeAncestor
    [gatsby-website]/[gatsby]/src/schema/node-model.js:554:11
  
  - node-model.js:701 ContextualNodeModel.findRootNodeAncestor
    [gatsby-website]/[gatsby]/src/schema/node-model.js:701:27
  
  - resolvers.ts:513 fileByPathResolver
    [gatsby-website]/[gatsby]/src/schema/resolvers.ts:513:46
  
  - runMicrotasks
  
  - task_queues:96 processTicksAndRejections
    node:internal/process/task_queues:96:5
  
  - async Promise.all
  
  - async Promise.all
  
  - async Promise.all
  
  - async Promise.all

Removing both the logo and hero node fixes the problem, but then I can't get my images.

If I delete /node_modules & package-lock.json and rebuild with the old dependencies, all is good again.

How do I fix this?

Aside: I'm aware of the GraphQL changes for Gatsby 5 and when updated for Gatsby 5, still get the same ids.push is not a function error message.

---

Here's my (abridged) setup:

package.json:

{
  ...
  "scripts": {
    "start": "gatsby develop",
    ...
  },
  "dependencies": {
    "@mdx-js/mdx": "^1.6.22",
    "@mdx-js/react": "^1.6.22",
    "gatsby": "^4.17.2",
    "gatsby-plugin-image": "^2.2.0",
    "gatsby-plugin-mdx": "^3.2.0",
    "gatsby-source-filesystem": "^4.2.0",
    ...
  },
  ...
}

/gatsby-config.js:

module.exports = {
  ...
  plugins: [
    'gatsby-plugin-image',
    'gatsby-plugin-mdx',
    ...
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        name: 'products',
        path: `${__dirname}/src/mdx/products`,
      },
    },
  ],
};

An example /src/mdx/products/product-name/index.mdx with some frontmatter:

---
title: 'My Product Name'
filter: 'xxx'
parent: 'parent-name'
deployments:
  - 'cloud'
  - 'free'
headline: 'Headline here'
tagline: 'tagline here'
logo: './logo.svg'
hero: './hero.svg'
urls:
  docs: 'https://example.com/#docs'
  migration: "https://example.com/#migration"
---

# Heading goes here

Paragraph text

[link](https://example.com)

The /src/hooks/use-products-data.js file:

import { graphql, useStaticQuery } from 'gatsby';

const useProductsData = () => {
  const data = useStaticQuery(
    graphql`
      query ProductsDataQuery {
        allMdx(
          sort: { fields: frontmatter___title, order: ASC }
          filter: { fileAbsolutePath: { regex: "/src/mdx/products/" } }
        ) {
          nodes {
            frontmatter {
              title
              filter
              parent
              deployments
              headline
              tagline
              logo {
                publicURL
              }
              hero {
                publicURL
              }
              urls {
                migration
              }
            }
            id
            slug
          }
        }
      }
    `
  );
  return data.allMdx.nodes;
};
export default useProductsData;