GraphQL: don't filters work for children inside the array?

[oobidin]

Description

I've been using gatsby-source-filesystem and gatsby-transformer-json plugins to GraphQL the info from JSON files.

I have the structure:

And gatsby-config.js:

module.exports = {
  siteMetadata: {
    title: 'Gatsby Default Starter',
  },
  plugins: [
    'gatsby-plugin-react-helmet',
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: 'gatsby-starter-default',
        short_name: 'starter',
        start_url: '/',
        background_color: '#663399',
        theme_color: '#663399',
        display: 'minimal-ui',
        icon: 'src/images/gatsby-icon.png', // This path is relative to the root of the site.
      },
    },
    'gatsby-plugin-offline',
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        path: `./src/someJson/someFolder`,
      },
    },
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        path: `./src/someJson/anotherFolder`,
      },
    },
    'gatsby-transformer-json',
  ],
}

The structure of those JSONs:

{
  "SomeRootField": [
    {
      "key": "topic.getting-started",
      "title": "Getting started",
      "url": "/getting-started"
    },
    {
      "key": "topic.how-are-you",
      "title": "How are you?",
      "url": "/how-are-you"
    }
  ]
}

I expected that after that I will be able to query children fields like:

query SomeQuery {
  allSomeFolderJson(filter: {SomeRootField: {
    elemMatch: {
      key: {eq: "category.getting-started"}
    }
  }}) {
    edges {
      node {
        SomeRootField {
          key
          title
          url
        }
      }
    }
  }
}

Steps to reproduce

https://codesandbox.io/s/6j69x4o16k

Expected result

I expected that the response should be like:

{
  "data": {
    "allSomeFolderJson": {
      "edges": [
        {
          "node": {
            "SomeRootField": [
              {
                "key": "category.getting-started",
                "title": "Getting started",
                "url": "/getting-started"
              }
            ]
          }
        },
        {
          "node": {
            "SomeRootField": [
              {
                "key": "category.getting-started",
                "title": "1232",
                "url": "/getting-started"
              }
            ]
          }
        }
      ]
    }
  }
}

Actual result

The actual result of that query:

{
  "data": {
    "allSomeFolderJson": {
      "edges": [
        {
          "node": {
            "SomeRootField": [
              {
                "key": "category.getting-started",
                "title": "Getting started",
                "url": "/getting-started"
              },
              {
                "key": "question.how-are-you",
                "title": "How are you?",
                "url": "/how-are-you"
              }
            ]
          }
        },
        {
          "node": {
            "SomeRootField": [
              {
                "key": "category.getting-started",
                "title": "1232",
                "url": "/getting-started"
              },
              {
                "key": "question.how-are-you",
                "title": "Ddsdsd",
                "url": "/how-are-you"
              }
            ]
          }
        }
      ]
    }
  }
}

Is it OK or it's a bug?

[pieh]

It's not a bug - filters are only filtering out nodes and not data in nodes.

This would need separate filter feature on array types which gatsby currently doesn't support - something like this:

query SomeQuery {
  allSomeFolderJson {
    edges {
      node {
        SomeRootField(filter: { key: { eq: "category.getting-started" }) {
          key
          title
          url
        }
      }
    }
  }
}

[RIP21]

@pieh What about to add support for such filtering? Imagine you have 300 different keys under, and all of that will be fetched and added as a JSON making build of 10k pages weights around 10GB.
Or maybe any idea how to add such thing to it ourself, like a fork.

[pieh]

Array filtering would need to be done in gatsby core (if you want to use gatsby-transformer-json). But you can create custom plugin (or even in your site gatsby-node) to create separate nodes for each item in SomeRootField array and then you could use existing gatsby filtering on root level