Error when using gatsby-image plugin

[bogdancss]

Following the minimal setup for the gatsby-image plugin and I am getting the following error after adding the query to the index page:

GraphQL Error Unknown field 'imageSharp' on type 'RootQueryType'

What am I missing? I have this in my config file:

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

This is the query:

  query FrontPageQuery {
    imageSharp(id: { regex: "/caseStudyPlaceholder/" }) {
      sizes(maxWidth: 1500, rotate: 180) {
        ...GatsbyImageSharpSizes
      }
    }
  }

[m-allanson]

Have you tried using the graphQL explorer to test your query? When running gatsby develop it should be available at http://localhost:8000/___graphql

[m-allanson]

There's some new docs on using images with Gatsby, they're still being reviewed but you can preview them here: https://github.com/melissamcewen/gatsby/blob/b8f19c22b60cd6c58472bb16ea264b54366e1b47/docs/docs/working-with-images.md

[bogdancss]

so, running in GraphiQL:

{
    imageSharp(id: { regex: "/caseStudyPlaceholder/" }) {
      sizes(maxWidth: 1500, rotate: 180) {
        ...GatsbyImageSharpSizes
      }
    }
  }

and I'm getting this:

{
  "errors": [
    {
      "message": "Cannot query field \"imageSharp\" on type \"RootQueryType\".",
      "locations": [
        {
          "line": 2,
          "column": 5
        }
      ]
    },
    {
      "message": "Unknown fragment \"GatsbyImageSharpSizes\".",
      "locations": [
        {
          "line": 4,
          "column": 12
        }
      ]
    }
  ]
}

[bogdancss]

OK, I tried the query from the docs mentioned above:

export const query = graphql`
  query indexQuery {
    fileName:file(relativePath: { eq: "assets/caseStudyPlaceholder.jpg" }) {
      childImageSharp {
        sizes(maxWidth: 400, maxHeight: 250) {
          ...GatsbyImageSharpSizes
        }
      }
    }
  }
`;

and am getting

GraphQL Error Unknown field `file` on type `RootQueryType`

[bogdancss]

I cleaned all node_modules and the package.lock file, reinstalled and it seems to be working now.

[danielwrobert]

I'm getting this exact same issue. Removing node_modules and package-lock.json then reinstalling did not seem to fix anything.

Same errors you mentioned above, depending on the query structure. ☹️

Running the following versions on macOS High Sierra (10.13.5):

gatsby-starter-default@1.0.0
├── babel-plugin-styled-components@1.5.1
├── gatsby@1.9.272
├── gatsby-image@1.0.54
├── gatsby-link@1.6.44
├── gatsby-plugin-react-helmet@2.0.11
├── gatsby-plugin-sharp@1.6.48
├── gatsby-plugin-styled-components@2.0.11
├── gatsby-source-filesystem@1.5.39
├── gatsby-transformer-sharp@1.6.27
├── prettier@1.13.5
├── react-helmet@5.2.0
└── styled-components@3.3.2