Gatsby: Field "image" must not have a selection since type "String" has no subfields.

[ycruzb]

Description

I'm trying to manage my data from a json file using gatsby-transformer-json but I can't get the image urls properly.

Steps to reproduce

I've created a new gatsby site and here you can see the most important files related to the issue.

gatsby-config.js

module.exports = {

  plugins: [
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `./src/images`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `projectimages`,
        path: `./src/images/projects`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `projects`,
        path: `./src/data`,
      },
    },
    `gatsby-transformer-json`,
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      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.
      },
    },
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.dev/offline
    `gatsby-plugin-offline`,
  ],
}

package.json

{
  "name": "gatsby-starter-default",
  "private": true,
  "description": "A simple starter to get up and developing quickly with Gatsby",
  "version": "0.1.0",
  "author": "Kyle Mathews <[email protected]>",
  "dependencies": {
    "gatsby": "^2.3.16",
    "gatsby-image": "^2.0.37",
    "gatsby-plugin-manifest": "^2.0.28",
    "gatsby-plugin-offline": "^2.0.25",
    "gatsby-plugin-react-helmet": "^3.0.12",
    "gatsby-plugin-sharp": "^2.0.32",
    "gatsby-source-filesystem": "^2.0.29",
    "gatsby-transformer-json": "^2.1.11",
    "gatsby-transformer-sharp": "^2.1.17",
    "prop-types": "^15.7.2",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-helmet": "^5.2.0"
  },
  "devDependencies": {
    "prettier": "^1.16.4"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "MIT",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write src/**/*.{js,jsx}",
    "start": "npm run develop",
    "serve": "gatsby serve",
    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\""
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/gatsbyjs/gatsby-starter-default"
  },
  "bugs": {
    "url": "https://github.com/gatsbyjs/gatsby/issues"
  }
}

src/data/projects.json

[
    { 
        "name": "Sendtinel",
        "tags": ["React", "Redux", "Node.js", "Express", "Shopify"],
        "description": "Email marketing app for Shopify. Rebates and back to stock alerts per product/variant, with auto email notifications. Real-time custom email campaigns, modern and fully editable widgets at your storefront.",
        "url": "https://sendtinel.com",
        "image": "../images/projects/sendtinel.jpg"
    },
    { 
        "name": "Puffingston",
        "tags": ["HTML5", "CSS3", "Javascript", "PHP", "WordPress"],
        "description": "Presentation design for professionals. Website developed in WordPress implementing a custom theme.",
        "url": "https://puffingston.com",
        "image": "../images/projects/29-puffingston.jpg"
    }

]

graphql query

Expected result

I expect to get the urls of the images generated properly using fluid mode in order to use it with gatsby-image.

Actual result

I get this error on the query:

Environment

System:
OS: Linux 4.19 Manjaro Linux undefined
CPU: (4) x64 Intel(R) Core(TM) i3-7100U CPU @ 2.40GHz
Shell: 5.0.0 - /bin/bash
Binaries:
Node: 11.11.0 - /usr/bin/node
Yarn: 1.13.0 - /usr/bin/yarn
npm: 6.9.0 - /usr/bin/npm
Languages:
Python: 3.7.2 - /usr/bin/python
Browsers:
Firefox: 65.0.2
npmPackages:
gatsby: ^2.3.16 => 2.3.16
gatsby-image: ^2.0.37 => 2.0.37
gatsby-plugin-manifest: ^2.0.28 => 2.0.28
gatsby-plugin-offline: ^2.0.25 => 2.0.25
gatsby-plugin-react-helmet: ^3.0.12 => 3.0.12
gatsby-plugin-sharp: ^2.0.32 => 2.0.32
gatsby-source-filesystem: ^2.0.29 => 2.0.29
gatsby-transformer-json: ^2.1.11 => 2.1.11
gatsby-transformer-sharp: ^2.1.17 => 2.1.17
npmGlobalPackages:
gatsby-cli: 2.5.7

[jonniebigodes]

@ycruzb based on your issue description and based on my experience with similar issues, what is happening is that if the image is not a sibling, or in other words in the same folder as the json file the appropriate plugins will resolve them to strings, as it does not actually "knows" where the file is located. Otherwise it will resolve the files to a File node. You can confirm this by issuing gatsby develop, open http://localhost:8000/___graphql and on the right side, on the docs, go through the hierarchy of nodes. and you'll see that is actually a string, but if you move the images to the same folder and make the necessary adjustments, issue gatsby clean to purge all cached items and re issue gatsby develop and open a new window to http://localhost:8000/___graphql, you'll see that the now the item is actually a File node. and you can use that query. If you dont' mind the wait, i can come up with a reproduction for you detailing how to solve this, sounds good?

[ycruzb]

Hi @jonniebigodes, thanks for your reply. I'll change my code according to your thought and will let you know. It would be nice if you can reproduce the situation.

Regards

[ycruzb]

@jonniebigodes your suggestion doesn't works. I've moved the images to the json folder and changed the json code but the error persists.

new json code

[
    { 
        "name": "Sendtinel",
        "tags": ["React", "Redux", "Node.js", "Express", "Shopify"],
        "description": "Email marketing app for Shopify. Rebates and back to stock alerts per product/variant, with auto email notifications. Real-time custom email campaigns, modern and fully editable widgets at your storefront.",
        "url": "https://sendtinel.com",
        "image": "./sendtinel.jpg"
    },
    { 
        "name": "Puffingston",
        "tags": ["HTML5", "CSS3", "Javascript", "PHP", "WordPress"],
        "description": "Presentation design for professionals. Website developed in WordPress implementing a custom theme.",
        "url": "https://puffingston.com",
        "image": "./29-puffingston.jpg"
    }

]

What can I do now ?

[Jamoverjelly]

I'm currently having the same issue trying to pull images out of a JSON object I collected from Yelp's API.

One thing I found in the Gatsby docs, however, is that GraphiQL does not handle the GraphQL query fragments which are utilized by gatsby-image, starting at childImageSharp. In my case though, I'm receiving the same error report in my browser when trying to run the query in my component to programmatically pull an image from the JSON source:

GraphQL Error Field "image_url" must not have a selection since type "String" has no subfields.

Reviewed my JSON source based on this thread where some users evidently had success resolving this issue after eliminating any empty image fields from the JSON object, but mine has no empty fields either and can't reconcile.

My query:

export const query = graphql`
  query {
    allDataJson {
      edges {
        node {
          businesses {
            name
            price
            image_url {
              childImageSharp {
                fluid {
                  ...GatsbyImageSharpFluid
                }
              }
            }
          }
        }
      }
    }
  }
`;

[stefanprobst]

@ycruzb Could you provide a repo to reproduce the error? This would be very helpful, thanks! (In a quick test here this worked as expected)

[ycruzb]

You can try with this repo:

https://github.com/ycruzb/portfolio

[stefanprobst]

@ycruzb In your projects.json you have the wrong file ending: "sendtinel.jpg" should be "sendtinel.png".

What happens is that Gatsby checks if the File path exists and if not treats the field as a basic string field.

[ycruzb]

WTF!!! Sorry guys, my bad !!! it works !!

thanks to all of you ;)

[radhasatam]

I had named it all correctly. It's kind of erratic in my repo somehow, like it shows up sometimes randomly when I change the graphql query. The only solution that has worked for me was to run gatsby clean first before running npm start.

[Zuodu]

Hi,
Just to help other people having the same problem but not being able to succeed :
I had my project built on netlify and was getting this error only on the distant platform. On my local build everything was fine. I finally found out that the image file was not committed to the repo so graphql could not determine image was a File type.
Please check that your files are correctly named and committed to the repo !

[thelovesmith]

Can anyone help out with a solution to this error but with sourcing images from an api?

[jonniebigodes]

@thelovesmith if you could share more insights on this it would be great. Better even if you supplied a reproduction following these steps so that it can be better looked at. But based what you said, depending on the api you're using how you're fetching the data, the image(s) will need to be "physically" present in your environmnent. But once again a reproduction would go a long way.

[seblemeur]

gatsby clean worked for me after hours of debug !

[olegKusov]

gatsby clean worked for me after hours of debug !

it doesnt help me (

[sujinleeme]

@olegKusov Perhaps, you can check image filename, extension, or path is correct.
"image": "../images/projects/sendtinel.jpg"

[olegKusov]

../images/

now it works. i tried "./image.jpg" but it was neccecary to use "../images/image.jpg". I think we need to correct offficial documentation, where path is wrong "image.jpg", or make some notes about it. I spent 2 days on this problem.

[emmadigital]

I had to add back slash at the start to make it work
image: /../static//img/training-classes.jpg

[bytrangle]

Surprisingly, gatsby clean worked for me. I know it doesn't work for everyone, but if you come across this dreaded Field image must not have a selection, try that command first before wasting several hours 🙂. Good luck