Gatsby: childImageSharp is null when using allMarkdownRemark filter query

[crutchcorn]

Description

I have a repo that has a JSON file with author data for a blog I am making inside a folder /src/data:

[
  {
    "id": "crutchcorn",
    "name": "Corbin Crutchley",
    "description": "Is a person who exists",
    "profileImg": "./crutchcorn.png"
  }
]

Inside that same folder exists the file crutchcorn.png

I am mapping this author data to the frontmatter by adding this into the gatsby-config.js:

mapping: {
  "MarkdownRemark.frontmatter.author": `AuthorsJson`,
}

I noticed that when I was using filter query on allMarkdownRemark, I am not able to query the author profile picture childImageSharp, but I am when using sort. EG, when running:

{
  allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }) {
    edges {
      node {
        frontmatter {
          author {
            name
            profileImg {
              childImageSharp {
                fixed(width: 60, height: 60) {
                  base64
                }
              }
            }
          }
        }
      }
    }
  }
}

I get the base64 value I expect. However if I change the query to read:

  allMarkdownRemark(filter: {frontmatter:{author: {id: {eq: "crutchcorn"}}}}) {

I am only returned nulls for the profileImg. This is true both in the UI and in the GraphiQL

I have made a repo to reproduce the issue in question (though have not included a UI to reproduce, so GraphiQL will be able to verify the problem):

https://github.com/crutchcorn/reproduce-gatsby-childsharp-bug

Environment

Run gatsby info --clipboard in your project directory and paste the output here.

Environment Info

 OS: macOS High Sierra 10.13.6
    CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 8.16.0 - ~/.nvm/versions/node/v8.16.0/bin/node
    Yarn: 1.16.0 - /usr/local/bin/yarn
    npm: 6.9.0 - ~/.nvm/versions/node/v8.16.0/bin/npm
  Languages:
    Python: 2.7.16 - /usr/local/bin/python
  Browsers:
    Chrome: 74.0.3729.169
    Safari: 12.1.1
  npmPackages:
    gatsby: ^2.9.4 => 2.9.4
    gatsby-image: ^2.1.4 => 2.1.4
    gatsby-plugin-feed: ^2.2.3 => 2.2.3
    gatsby-plugin-google-analytics: ^2.0.21 => 2.0.21
    gatsby-plugin-manifest: ^2.1.1 => 2.1.1
    gatsby-plugin-offline: ^2.1.3 => 2.1.3
    gatsby-plugin-react-helmet: ^3.0.12 => 3.0.12
    gatsby-plugin-sharp: ^2.1.5 => 2.1.5
    gatsby-plugin-typography: ^2.2.13 => 2.2.13
    gatsby-remark-copy-linked-files: ^2.0.13 => 2.0.13
    gatsby-remark-images: ^3.0.16 => 3.0.16
    gatsby-remark-prismjs: ^3.2.11 => 3.2.11
    gatsby-remark-responsive-iframe: ^2.1.1 => 2.1.1
    gatsby-remark-smartypants: ^2.0.9 => 2.0.9
    gatsby-source-filesystem: ^2.0.39 => 2.0.39
    gatsby-transformer-json: ^2.1.11 => 2.1.11
    gatsby-transformer-remark: ^2.4.0 => 2.4.0
    gatsby-transformer-sharp: ^2.1.21 => 2.1.21

[stefanprobst]

Thanks for the report and the reproduction!!

This is indeed a bug in Gatsby - although it does not seem to be about filter vs sort, but more about whether linked fields (on author fields in this case) are included in filter/sort.

[crutchcorn]

I admittedly didn't quite have the time to dive deeper into finding a solution (especially given my relative inexperience with GraphQL and Gatsby - first project here! 😅 ), so I wasn't quite sure where it lied.

Glad the reproduction was able to help though, I was admittedly afraid it was a misunderstanding I had but included either way just in case :)

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contributefor more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[freiksenet]

Should be fixed now in [email protected]. Thank you @stefanprobst!

[MWalid]

I don't think it's fixed

{
  allFile(filter:{fields:{isOctoberCMSImage: {eq:true}}}) {
    edges {
      node {
        fields {
          url
        }
        childImageSharp {
          id
        }
      }
    }
  }
}

Returns null for childImageSharp, my version is:

Gatsby CLI version: 2.7.17
Gatsby version: 2.13.19
  Note: this is the Gatsby version for the site at: /Users/me/Projects/project/frontend

[MWalid]

Very dirty workaround is

export default ({ url }) => {
    const data = useStaticQuery(graphql`
        query {
            allImageSharp {
                edges {
                    node {
                        id
                        fluid(maxWidth: 900) {
                            ...GatsbyImageSharpFluid
                        }
                        parent {
                            ... on File {
                                fields {
                                    url
                                }
                            }
                        }
                    }
                }
            }
        }
    `)
    const image = data.allImageSharp.edges.find(
        e =>
            e.node.parent &&
            e.node.parent.fields &&
            e.node.parent.fields.url === url
    ).node

    return <Image fluid={image.fluid} />
}

But while the database grows, the performance will be a problem.

[stefanprobst]

@MWalid Could you provide a minimal reproduction for this issue? Thanks!

[MWalid]

@stefanprobst While creating the reproduction repo for this issue, I realized that the real reason was related to cleaning my local cache rather than an issue with gatsby itself.

I had to clean the cache before every develop task so I change npm develop task to:

gatsby clean && gatsby develop

BTW I have my own source plugin (not using markdown transformer).

[anonimoconiglio]

I just found this problem on my new installation.

The only way to solved it was removing the sort option under allMarkdownRemark.

Could it be related to the fact that I'm nesting my markdown files on subfolders? For example this new website has this structure:

src/sourced-folder/
|
|_firs-folder
|    |_ post1.md
|    |_image1.jpg
|
|_second-folder
    |_post2.md
    |_image2.jpg

The curious thing is that if I remove the second-folder and run develop just with the first-folder (so only post1) this problem doesn't happen at all.
Do you have any guess?

my gatsby-source-plugin has this config:

{
    resolve: 'gatsby-source-filesystem',
    options: {
        name: `posts`,
        path: `${__dirname}/src/posts`,
    }
},