[gatsby-source-graphql] | Handle server errors during query in gatsby build

[aamorozov]

There are ~ 150 queries in build time in my project and the server might respond with 500 error on one of them, but since there is no way to debug and/or suppress that error the whole build fails. It would be very helpful if gatsby's graphql could either log a more verbose output or provide the way to suppress such errors. It does output the template which the query fails on.

$ gatsby build
success open and validate gatsby-configs — 0.008 s
success load plugins — 0.168 s
success onPreInit — 0.463 s
success delete html and css files from previous builds — 0.004 s
success initialize cache — 0.005 s
success copy gatsby files — 0.012 s
success onPreBootstrap — 0.004 s
success source and transform nodes — 0.668 s
success building schema — 0.082 s
success createPages — 0.568 s
success createPagesStatefully — 0.029 s
success onPreExtractQueries — 0.000 s
success update schema — 0.059 s
success extract queries from components — 0.184 s
error 
The GraphQL query from /home/dev/app/frontend/src/templates/templateName.js failed.

Errors:
  Unexpected token < in JSON at position 0

Looks like it's throwing from query-runner here

gatsby/packages/gatsby/src/internal-plugins/query-runner/query-runner.js

Line 58 in 2cd7bfa

The GraphQL query from ${queryJob.componentPath} failed.

Environment

  System:
    OS: macOS 10.14
    CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 11.4.0 - /usr/local/bin/node
    Yarn: 1.12.3 - /usr/local/bin/yarn
    npm: 6.4.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 71.0.3578.98
    Firefox: 64.0
    Safari: 12.0
  npmGlobalPackages:
    gatsby-cli: 2.4.6
    gatsby: 2.0.67

[freiksenet]

I've tried to replicate this - I might be missing something, but the error seems to be quite verbose:

error 
The GraphQL query from /home/freiksenet/Work/gatsby/gatsby/examples/using-gatsby-source-graphql/src/pages/index.js failed.

Errors:
  Unexpected token < in JSON at position 0
  
  GraphQL request (10:5)
   9:   codesandbox {
  10:     hello
          ^
  11:   }
  
URL path:
  /
Context:
  {}
Plugin:
  none
Query:
  query homeFreiksenetWorkGatsbyGatsbyExamplesUsingGatsbySourceGraphqlSrcPagesIndexJs3159151412 {
    cms {
      blogPosts(where: {status: PUBLISHED}, orderBy: createdAt_DESC) {
        title
        createdAt
        slug
      }
    }
    codesandbox {
      hello
    }
  }

What kind of info do you want in the log?

[aamorozov]

I was thinking it will be useful to say whether the error is thrown because the server is not responding or because the field is missing.
@freiksenet

[gatsbot]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

Thanks for being a part of the Gatsby community! 💪💜

[gatsbot]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

Thanks again for being part of the Gatsby community!

[mkrn]

@aamorozov It would be nice to see what exactly is returned from the server in this case. < is likely a begining of html or xml tag.

It seems to happen to me because the multiple sites are being built in CI at once and hammering my GraphQL backend staging instance pretty hard, but exact response is hard to debug since this error only occasionally happens.

[akkie]

In my opinion, the plugin should handle the HTTP status code from the GraphQL API. If it's a non 2xx status code, it should show the status code and the response instead of the Unexpected token < in JSON at position 0 error.

[antoinerousseau]

any update on this? the errors are too obscur as is

[antoinerousseau]

I used the fetch option of the plugin to add some logging, fyi:

import nodeFetch, { HeadersInit, RequestInfo, RequestInit } from "node-fetch"

interface GraphQLRequestInit extends RequestInit {
  method: "POST"
  headers: HeadersInit
  body: string
}

const fetch = async (uri: RequestInfo, options: GraphQLRequestInit) => {
  const response = await nodeFetch(uri, options)
  if (response.status < 400) {
    return response
  }

  const { query, variables } = JSON.parse(options.body)

  throw new Error(`Source GraphQL API HTTP error ${response.status} ${response.statusText}

Query:
${query}

Variables:
${JSON.stringify(variables, null, 2)}
`)
}

{
  resolve: "gatsby-source-graphql",
  options: {
    typeName: "Foo",
    fieldName: "foo",
    url: process.env.GATSBY_API_ENDPOINT,
    fetch,
  },
},

[antoinerousseau]

I could open a PR to edit the default fetch in gatsby-source-graphql if it makes sense? At lease to see the fetch error details when it happens...

[KyleAMathews]

That'd be great. We should print out good errors by default.