Catch graphql errors from the graphql function and pretty-print errors

[KyleAMathews]

Description

If in your gatsby-node.js you send a bad graphql query to the graphql function (this is commonly done to query data to create pages), you won't get any error. Instead you'll generally get an error that you can't access expected data from the graphql result e.g.

Ideally we'd catch errors return from the graphql function and create structured errors for common problems.

Steps to reproduce

Create a site add add the following code to your gatsby-node.js:

exports.createPages = ({ graphql, actions }) => {
  return graphql(
    `
      query HomePageQuery {
        site {
          # Typo here
          siteMetadat {
            description
          }
        }
      }
    `
  ).then(result => {
    const doesthisexist = result.data.siteMetadat
  })
}

If you run gatsby build, it'll give an error like the following:

It should instead show that there was an error with your graphql query including what file/line number it happened in and the GraphQL error message.

Category

Categorize the error. Is it from GraphQL, Webpack, or something else?

GraphQL

Grade

Give the error a grade according to the key at the bottom of this issue.

0

[KyleAMathews]

We could also validate queries in Relay Compiler (as I suggested here: #1595)

That'd give us richer error messages potentially.