Gatsby: working with images in an array context, something changed in the latest gatsby version

Created on 20 Mar 2019  路  3Comments  路  Source: gatsbyjs/gatsby

Description

Today I updated gatsby from 2.1.39 to latest 2.2.2, and now gatsby wont recognize some images as files anymore, only as strings.

After updating gatsby, I get this error now:
error GraphQL Error Field "logo" must not have a selection since type "String" has no subfields.

Steps to reproduce

This is my json file (partner.json):

{
    "title": "Our Clients",
    "h1": "foobar...",
    "description": "foobar...",
    "content" : "content.md",
    "background": "../images/backgrounds/clients.jpg",
    "clients": [
      {
        "title": "foobar 1",
        "url": "https://www.foobar.com/",
        "logo": "./logos/foobar1.png"
      },
      {
        "title": "foobar 2",
        "url": "https://www.foo-bar.com/",
        "logo": "./logos/foobar2.png"
      }
    ]
}

My query:

{
  partnerJson {
    title
    h1
    description
    background {
      id
    }
    content {
      childMarkdownRemark {
        html
      }
    }
    clients {
      title
      url
      logo {
        id
      }
    }
  }
}

/content - folder:
image

gatsby-config.json:

module.exports = {
    siteMetadata: {
        title: `foobar`,
        description: `foobar`,
        author: `foobar`
    },
    plugins: [
        `gatsby-plugin-react-helmet`,
        `gatsby-plugin-offline`,
        {
            resolve: `gatsby-source-filesystem`,
            options: {
                name: `content`,
                path: `${__dirname}/content`
            }
        },
        {
            resolve: `gatsby-source-filesystem`,
            options: {
                name: `images`,
                path: `${__dirname}/src/images`
            }
        },
        `gatsby-plugin-sharp`,
        `gatsby-transformer-sharp`,
        `gatsby-plugin-catch-links`,
        `gatsby-transformer-remark`,
        `gatsby-transformer-json`,
        {
            resolve: `gatsby-plugin-manifest`,
            options: {
                name: `gatsby-starter-default`,
                short_name: `starter`,
                start_url: `/`,
                background_color: `#ffffff`,
                theme_color: `#000000`,
                display: `minimal-ui`,
                icon: `src/images/favicon.png` // This path is relative to the root of the site.
            }
        },
        `gatsby-plugin-sass`
    ]
};

Expected result

With Gatsby 2.1.39 I get this result, where the images get recognized as files and I could use them for gatsby-image (gatsby-transformer-sharp / gatsby-plugin-sharp).

{
  "data": {
    "partnerJson": {
      "title": "Our Clients",
      "h1": "foobar...",
      "description": "foobar...",
      "background": {
        "id": "ae565340-5814-5d28-ba39-6dbf4b2f35d1"
      },
      "content": {
        "childMarkdownRemark": {
          "html": "<div>some content...</div>"
        }
      },
      "clients": [
        {
          "title": "foobar 1",
          "url": "http://www.foobar.com/",
          "logo": {
            "id": "8160f9c2-4c68-5006-8499-87fadcab587f"
          }
        },
        {
          "title": "foobar 2",
          "url": "https://www.foo-bar.com/",
          "logo": {
            "id": "fda96686-8e29-5796-b287-90710e19e02e"
          }
        }
      ]
    }
  }
}

Actual result

With 2.2.2 I get this result, without having changed anything in my code:

{
  "errors": [
    {
      "message": "Field \"logo\" must not have a selection since type \"String\" has no subfields.",
      "locations": [
        {
          "line": 17,
          "column": 12
        }
      ]
    }
  ]
}

I also changed my json and played around a little bit, used the same file outside of array context:

{
    "title": "Our Clients",
    "h1": "foobar...",
    "description": "foobar...",
    "content" : "content.md",
    "background": "../images/backgrounds/clients.jpg",
    "test": "./logos/foobar1.png",
    "clients": [
      {
        "title": "foobar 1",
        "url": "https://www.foobar.com/",
        "logo": "./logos/foobar1.png"
      },
      {
        "title": "foobar 2",
        "url": "https://www.foo-bar.com/",
        "logo": "./logos/foobar2.png"
      }
    ]
}

Test query:

{
  partnerJson {
    title
    h1
    description
    background {
      id
    }
    test{
      id
    }
  }
}

The same image get recognized as file again:

{
  "data": {
    "partnerJson": {
      "title": "Our Clients",
      "h1": "foobar...",
      "description": "foobar...",
      "background": {
        "id": "ae565340-5814-5d28-ba39-6dbf4b2f35d1"
      },
      "test": {
        "id": "8160f9c2-4c68-5006-8499-87fadcab587f"
      }
    }
  }
}

Environment

I tried it on different Environments, some examples:

Works:

  System:
    OS: Windows 10
    CPU: (4) x64 Intel(R) Core(TM) i5-4690K CPU @ 3.50GHz
  Binaries:
    npm: 6.4.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 42.17134.1.0
  npmPackages:
    gatsby: 2.1.39 => 2.1.39
    gatsby-background-image: ^0.2.73 => 0.2.73
    gatsby-image: ^2.0.34 => 2.0.34
    gatsby-plugin-catch-links: ^2.0.13 => 2.0.13
    gatsby-plugin-manifest: ^2.0.24 => 2.0.24
    gatsby-plugin-nprogress: ^2.0.10 => 2.0.10
    gatsby-plugin-offline: ^2.0.25 => 2.0.25
    gatsby-plugin-react-helmet: ^3.0.10 => 3.0.10
    gatsby-plugin-sass: ^2.0.11 => 2.0.11
    gatsby-plugin-sharp: ^2.0.29 => 2.0.29
    gatsby-plugin-web-font-loader: ^1.0.4 => 1.0.4
    gatsby-source-filesystem: ^2.0.27 => 2.0.27
    gatsby-transformer-json: ^2.1.11 => 2.1.11
    gatsby-transformer-remark: ^2.3.7 => 2.3.7
    gatsby-transformer-sharp: ^2.1.17 => 2.1.17

Works:

System:
    OS: Linux 4.15 Ubuntu 18.04.1 LTS (Bionic Beaver)
    CPU: (1) x64 Intel(R) Xeon(R) CPU E5-2650L v3 @ 1.80GHz
    Shell: 4.4.19 - /bin/bash
  Binaries:
    Node: 8.10.0 - /usr/bin/node
    npm: 3.5.2 - /usr/bin/npm
  Languages:
    Python: 2.7.15 - /usr/bin/python
  npmPackages:
    gatsby: 2.1.39 => 2.1.39
    gatsby-background-image: ^0.2.73 => 0.2.73
    gatsby-image: ^2.0.34 => 2.0.34
    gatsby-plugin-catch-links: ^2.0.13 => 2.0.13
    gatsby-plugin-manifest: ^2.0.24 => 2.0.24
    gatsby-plugin-nprogress: ^2.0.10 => 2.0.10
    gatsby-plugin-offline: ^2.0.25 => 2.0.25
    gatsby-plugin-react-helmet: ^3.0.10 => 3.0.10
    gatsby-plugin-sass: ^2.0.11 => 2.0.11
    gatsby-plugin-sharp: ^2.0.29 => 2.0.29
    gatsby-plugin-web-font-loader: ^1.0.4 => 1.0.4
    gatsby-source-filesystem: ^2.0.27 => 2.0.27
    gatsby-transformer-json: ^2.1.11 => 2.1.11
    gatsby-transformer-remark: ^2.3.7 => 2.3.7
    gatsby-transformer-sharp: ^2.1.17 => 2.1.17
  npmGlobalPackages:
    gatsby: 2.2.2

Dont work:

  System:
    OS: Windows 10
    CPU: (4) x64 Intel(R) Core(TM) i5-4690K CPU @ 3.50GHz
  Binaries:
    npm: 6.4.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 42.17134.1.0
  npmPackages:
    gatsby: ^2.2.2 => 2.2.2
    gatsby-background-image: ^0.2.73 => 0.2.73
    gatsby-image: ^2.0.34 => 2.0.34
    gatsby-plugin-catch-links: ^2.0.13 => 2.0.13
    gatsby-plugin-manifest: ^2.0.24 => 2.0.24
    gatsby-plugin-nprogress: ^2.0.10 => 2.0.10
    gatsby-plugin-offline: ^2.0.25 => 2.0.25
    gatsby-plugin-react-helmet: ^3.0.10 => 3.0.10
    gatsby-plugin-sass: ^2.0.11 => 2.0.11
    gatsby-plugin-sharp: ^2.0.29 => 2.0.29
    gatsby-plugin-web-font-loader: ^1.0.4 => 1.0.4
    gatsby-source-filesystem: ^2.0.27 => 2.0.27
    gatsby-transformer-json: ^2.1.11 => 2.1.11
    gatsby-transformer-remark: ^2.3.7 => 2.3.7
    gatsby-transformer-sharp: ^2.1.17 => 2.1.17

Dont work:

  System:
    OS: Linux 4.15 Ubuntu 18.04.1 LTS (Bionic Beaver)
    CPU: (1) x64 Intel(R) Xeon(R) CPU E5-2650L v3 @ 1.80GHz
    Shell: 4.4.19 - /bin/bash
  Binaries:
    Node: 8.10.0 - /usr/bin/node
    npm: 3.5.2 - /usr/bin/npm
  Languages:
    Python: 2.7.15 - /usr/bin/python
  npmPackages:
    gatsby: ^2.1.32 => 2.2.2
    gatsby-background-image: ^0.2.43 => 0.2.73
    gatsby-image: ^2.0.33 => 2.0.34
    gatsby-plugin-catch-links: ^2.0.13 => 2.0.13
    gatsby-plugin-manifest: ^2.0.24 => 2.0.24
    gatsby-plugin-nprogress: ^2.0.10 => 2.0.10
    gatsby-plugin-offline: ^2.0.25 => 2.0.25
    gatsby-plugin-react-helmet: ^3.0.9 => 3.0.10
    gatsby-plugin-sass: ^2.0.11 => 2.0.11
    gatsby-plugin-sharp: ^2.0.28 => 2.0.29
    gatsby-plugin-web-font-loader: ^1.0.4 => 1.0.4
    gatsby-source-filesystem: ^2.0.25 => 2.0.27
    gatsby-transformer-json: ^2.1.10 => 2.1.11
    gatsby-transformer-remark: ^2.3.3 => 2.3.7
    gatsby-transformer-sharp: ^2.1.17 => 2.1.17
  npmGlobalPackages:
    gatsby: 2.2.2

PS: I also made sure the file extensions are correct because of this issue #4123 I used other files and so on, didn't changed anything.

picture ciruz
👍6

Most helpful comment

Same here. Reverting to 2.1.39 worked as a temporary fix.

picture ooloth on 20 Mar 2019
👍3

All 3 comments

Exactly the same problem.

tadeas22 picture tadeas22 on 20 Mar 2019
👍2

Same here. Reverting to 2.1.39 worked as a temporary fix.

ooloth picture ooloth on 20 Mar 2019
👍3

Could you provide a testing repo to reproduce the error? Or try if the fix in #12704 works for you? That would be very helpful! Thanks!

stefanprobst picture stefanprobst on 20 Mar 2019
Was this page helpful?
0 / 5 - 0 ratings

Related issues

benstr picture benstr  路  3Comments
andykais picture andykais  路  3Comments
timbrandin picture timbrandin  路  3Comments
theduke picture theduke  路  3Comments
hobochild picture hobochild  路  3Comments