Gatsby: TypeError: data is undefined

[cheomanigua]

I'm following this article:

• Documentation: https://www.gatsbyjs.org/tutorial/gatsby-image-tutorial/

Summary

After following above article, I get error "TypeError: Data is undefinded" in the browser when adding an image query snippet in my code. Visual Studio Code builds fine with no errors.
Also, I can query with no issue with GraphiQL

Error

GraphiQL

Code

gatsby-config.js

module.exports = {
  plugins: [
    `gatsby-plugin-react-helmet`,
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    { 
      resolve: `gatsby-source-filesystem`,
      options: {      
        path: `${__dirname}/src/images/`,
      } 
    }
  ],
}

services.js

import React from "react"
import { graphql } from "gatsby"
import Img from "gatsby-image"

const Services = ({data}) => {
  return (
    <section id="services">
      <Img fluid={data.file.childImageSharp.fluid} />
    </section>
  )
}

export const query = graphql`
query {
  file(relativePath: {eq: "desarrolloweb.jpeg"}) {
    childImageSharp {
      fluid (maxWidth: 500) {
        ...GatsbyImageSharpFluid_withWebp
      }
    }
  }
}
`
export default Services

Relevant information

Environment

Editor:
Visual Studio Code: 1.41.0

  System:
    OS: Linux 4.19 Debian GNU/Linux 9 (stretch) 9 (stretch)
    CPU: (4) x64 Intel(R) Core(TM) i5-4690 CPU @ 3.50GHz
    Shell: 4.4.12 - /bin/bash
  Binaries:
    Node: 10.17.0 - /usr/bin/node
    npm: 6.11.3 - /usr/bin/npm
  Languages:
    Python: 2.7.13 - /usr/bin/python
  Browsers:
    Firefox: 71.0 
  npmPackages:
    gatsby: ^2.18.12 => 2.18.12
    gatsby-background-image: ^0.9.12 => 0.9.12
    gatsby-image: ^2.2.37 => 2.2.37
    gatsby-plugin-react-helmet: ^3.1.18 => 3.1.18
    gatsby-plugin-sharp: ^2.3.10 => 2.3.10
    gatsby-source-filesystem: ^2.1.43 => 2.1.43
    gatsby-transformer-sharp: ^2.3.9 => 2.3.9
  npmGlobalPackages:
    gatsby-cli: 2.8.16

File contents (if changed)

gatsby-config.js: N/A
package.json:

{
  "name": "gatsby-starter-hello-world",
  "private": true,
  "description": "A simplified bare-bones starter for Gatsby",
  "version": "0.1.0",
  "license": "MIT",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write \"**/*.{js,jsx,json,md}\"",
    "start": "npm run develop",
    "serve": "gatsby serve",
    "clean": "gatsby clean",
    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
  },
  "dependencies": {
    "gatsby": "^2.18.12",
    "gatsby-background-image": "^0.9.12",
    "gatsby-image": "^2.2.37",
    "gatsby-plugin-react-helmet": "^3.1.18",
    "gatsby-plugin-sharp": "^2.3.10",
    "gatsby-source-filesystem": "^2.1.43",
    "gatsby-transformer-sharp": "^2.3.9",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-helmet": "^5.2.1"
  },
  "devDependencies": {
    "prettier": "^1.19.1"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/gatsbyjs/gatsby-starter-hello-world"
  },
  "bugs": {
    "url": "https://github.com/gatsbyjs/gatsby/issues"
  }
}

gatsby-node.js: N/A
gatsby-browser.js: N/A
gatsby-ssr.js: N/A

[lannonbr]

So the issue here is you are trying to use a page query in a file that is not a page. If you copy that query and use it in something like StaticQuery or useStaticQuery then it should work as you expect.

[LekoArts]

Thank you for opening this!

As correctly stated by Benjamin you'll need to use a StaticQuery or useStaticQuery :)

We're marking this issue as answered and closing it for now but please feel free to comment here if you would like to continue this discussion. We also recommend heading over to our communities if you have questions that are not bug reports or feature requests. We hope we managed to help and thank you for using Gatsby!