Gatsby: Graphql errors don't get logged when the graphql is in a fragment

[CalebBarnes]

Description

Graphql errors don't get logged when the graphql is in a fragment, instead I get the following error

error UNHANDLED REJECTION


  Error: Invariant Violation: GraphQLCompilerContext: Unknown document `myQuery`.

  - invariant.js:42 invariant
    [tds2018]/[fbjs]/lib/invariant.js:42:15

  - GraphQLCompilerContext.js:145 GraphQLCompilerContext._get
    [tds2018]/[relay-compiler]/lib/GraphQLCompilerContext.js:145:34

  - GraphQLCompilerContext.js:116 GraphQLCompilerContext.getFragment
    [tds2018]/[relay-compiler]/lib/GraphQLCompilerContext.js:116:21

  - filterContextForNode.js:29 Object.FragmentSpread
    [tds2018]/[relay-compiler]/lib/filterContextForNode.js:29:32

  - GraphQLIRVisitor.js:35 visitIR
    [tds2018]/[relay-compiler]/lib/GraphQLIRVisitor.js:35:10

  - filterContextForNode.js:36 filterContextForNode
    [tds2018]/[relay-compiler]/lib/filterContextForNode.js:36:5

  - query-compiler.js:197 compilerContext.documents.forEach.node
    [tds2018]/[gatsby]/dist/internal-plugins/query-runner/query-compiler.js:197:54

  - Array.forEach

  - query-compiler.js:184
    [tds2018]/[gatsby]/dist/internal-plugins/query-runner/query-compiler.js:184:35

  - Generator.next

  - debuggability.js:313 Promise._execute
    [lib]/[gatsby]/[bluebird]/js/release/debuggability.js:313:9

  - promise.js:483 Promise._resolveFromExecutor
    [lib]/[gatsby]/[bluebird]/js/release/promise.js:483:18

  - promise.js:79 new Promise
    [lib]/[gatsby]/[bluebird]/js/release/promise.js:79:10

  - query-compiler.js:220 Runner.write
    [tds2018]/[gatsby]/dist/internal-plugins/query-runner/query-compiler.js:220:7

  - query-compiler.js:100
    [tds2018]/[gatsby]/dist/internal-plugins/query-runner/query-compiler.js:100:26

  - Generator.next

Steps to reproduce

I have a graphql fragment exporting from a component.
Sometimes while editing something in the same file that is unrelated to the fragment, I'll have an error. Instead of the error being logged, gatsby crashes with UNHANDLED REJECTION.

export const query = graphql`
  fragment myQuery on something {
    title
    button {
      url
      title
    }
    background_image {
      alt
      url {
        childImageSharp {
          fluid(quality: 100, maxWidth: 2560) {
            ...GatsbyImageSharpFluid_withWebp
          }
        }
      }
    }
  }
`

Expected result

It should log the error instead of crashing.

Actual result

Gatsby develop crashes and I have to gatsby develop and query everything again.

Environment

Node: 11.9.0
Yarn: 1.13.0
npm: 6.5.0

[apvarun]

I think a GQL fragment should be declared and used as a part of the query. In this case, there is no _query_ and so GraphQL will not know the operation to be performed.

[CalebBarnes]

I think a GQL fragment should be declared and used as a part of the query. In this case, there is no _query_ and so GraphQL will not know the operation to be performed.

The fragment is being exported and used in a query outside of this component.
Am I not supposed to do that? Because normally it works perfectly.

[sidharthachatterjee]

@CalebBarnes Looks similar to https://github.com/gatsbyjs/gatsby/issues/11638

Is your fragment being exported from a page or a component?

/cc @freiksenet

[CalebBarnes]

@CalebBarnes Looks similar to #11638

Is your fragment being exported from a page or a component?

/cc @freiksenet

It's being exported from a component.

[TylerBarnes]

I misread this at first but what @CalebBarnes is saying is that if there's a fragment used in a query and also the query has some error unrelated to that fragment, gatsby is blaming the error on the fragment even though there's nothing wrong with the fragment and the issue is elsewhere. Not sure if you guys read that that way.

To me the title says when there's an error within a fragment gatsby blames the fragment which would make sense, which is why I misunderstood this issue as the problem is different.

[CalebBarnes]

Even if the error is unrelated to graphql at all it's still blaming the fragment.

[pieh]

This can definitely happen if there are JS syntax error because we parse javascript file when we extract queries - if we can't do that then we will fail to extract fragment and compiling queries with missing fragment (seems to) throw error that is unhandled (so crash).

At very least we should wrap some relay compiler code in try catch and do reporter.panicOnBuild (and maybe parse error to provide more meaningful error message)

[gatsbot[bot]]

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[bot]]

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!