Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Error when using gatsby-image plugin #5060

Closed
bogdancss opened this issue Apr 20, 2018 · 6 comments
Closed

Error when using gatsby-image plugin #5060

bogdancss opened this issue Apr 20, 2018 · 6 comments
Labels
type: question or discussion Issue discussing or asking a question about Gatsby

Comments

@bogdancss
Copy link
Contributor

bogdancss commented Apr 20, 2018

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 m-allanson added the type: question or discussion Issue discussing or asking a question about Gatsby label Apr 20, 2018
@m-allanson
Copy link
Contributor

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
Copy link
Contributor

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
Copy link
Contributor Author

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
Copy link
Contributor Author

bogdancss commented Apr 20, 2018

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
Copy link
Contributor Author

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

@danielwrobert
Copy link

danielwrobert commented Jun 20, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
type: question or discussion Issue discussing or asking a question about Gatsby
Projects
None yet
Development

No branches or pull requests

3 participants