False Error About a Fragment Not Being Used (Same Query Works Fine in gatsby-node ... Just Not on a Page)

Description

I’m getting an erroneous error. When I try to include a fragment in a page query, Gatsby breaks, supposedly because that fragment isn’t being used …

success onPreExtractQueries - 0.002s

ERROR #85901 GRAPHQL

There was an error in your GraphQL query:

Fragment “productFields” is never used.

GraphQL request:53:3 52 | } 53 | fragment productFields on PostGraphile_Product { | ^ 54 | title

File: src/pages/admin.js:60:3

failed extract queries from components - 0.990s

But the thing is … that fragment is being used (multiple times) in the query directly above it:

export const query = graphql`
            # parts of query you don't care about
            products {
              ...productFields
            }

Also, perhaps more importantly, I’m using the exact same query (I literally copy/pasted it) in my gatsby-node.js file, and it works perfectly fine there.

Unless there is some prohibition against using fragments in page queries this seems like a bug.

Steps to reproduce

My repo isn’t public unfortunately, but I’ve included the relevant query bits, and I’d be happy to answer any questions.

Expected result

What should happen?

I should be able to use the same exact query as an export on a page that I can already use (without the tag) in gatsby-node.js.

Actual result

See above

Environment

System: OS: Linux 5.4 Linux Mint 20 (Ulyana) CPU: (8) x64 Intel® Core™ i7-4810MQ CPU @ 2.80GHz Shell: 5.0.17 - /bin/bash Binaries: Node: 14.8.0 - /usr/bin/node npm: 6.14.7 - /usr/bin/npm Browsers: Chrome: 84.0.4147.135 Firefox: 79.0 npmPackages: gatsby: ^2.24.15 => 2.24.15 gatsby-cli: ^2.12.47 => 2.12.47 gatsby-image: ^2.4.7 => 2.4.7 gatsby-plugin-import: ^2.1.5 => 2.1.5 gatsby-plugin-manifest: ^2.4.11 => 2.4.12 gatsby-plugin-modal-routing: ^1.2.0 => 1.2.0 gatsby-plugin-offline: ^3.2.9 => 3.2.11 gatsby-plugin-react-helmet: ^3.3.4 => 3.3.4 gatsby-plugin-root-import: ^2.0.5 => 2.0.5 gatsby-plugin-s3: ^0.3.4 => 0.3.4 gatsby-plugin-sharp: ^2.6.11 => 2.6.12 gatsby-source-filesystem: ^2.3.11 => 2.3.12 gatsby-source-pg: ^0.2.1 => 0.2.1 gatsby-transformer-sharp: ^2.5.5 => 2.5.5 npmGlobalPackages: gatsby: 2.24.15

[vladar]

@machineghost Excellent investigation, thanks! So this is a very interesting edge case. We should definitely output a correct error about duplicate query names first.

If someone is willing to submit a PR with a fix - we’ll be happy to accept it! If nobody is up to this, I will do it myself when I have a chance (but no ETA as it has a relatively low impact)

[machineghost]

Yup (but you may want to skip to the TLDR at the end): I just tried it again, to “sanity check”, and …

ERROR #85901 GRAPHQL

There was an error in your GraphQL query:

Unknown fragment “productFields”.

GraphQL request:33:22 32 | products { 33 | …productFields | ^ 34 | }

To get further debugging info (since I’m being an ass and not giving you a repro case) I also tried fixing the name of the query in gatsby-node.js, assuming I’d get the same result … but I didn’t, I got the same error! (And to be clear, I’m completely restarting thet Gatsby/Webpack server every time.)

So then I tried changing the fragment name (productFields2), and … same error. This sort of shot down my namespace theory … or so I thought. But then I did a quick “find”, and realized I also had a (nascent version) of that query on yet another page, and crucially it had the same name (although, being nascent, it wasn’t really the same query: it didn’t use the fragment).

When I commented out, the error went away! So next I tried replacing the query in that file with the one in the first file, and finally I got … well I got an error, but this one at least made sense:

Multiple “root” queries found: “GetGenres” and “GetGenres”. Only the first (“GetGenres”) will be registered.

Instead of:

1 | query GetGenres { 2 | postgres { 3 | #… 4 | } 5 | } 6 | 7 | query GetGenres { 8 | postgres { 9 | #… 10 | } 11 | }

TLDR; Based on my observations (and again sorry for just giving observations and not a repro), the issue seems to be caused by having two queries in two different pages (I had index.js and admin.js), with the same names, but one of them uses fragments and the other doesn’t.

Under those conditions (and possibly still others that I haven’t noticed), it seems the correct error (“Multiple “root” queries found”) isn’t thrown … instead you get this weird error about fragments being unused.

P.S. And actually … that kind of does make sense; if:

• query #1 doesn’t use the fragment
• but it prevents query #2 with the same name (which does use the fragment) from being loaded
• however, the fragment from query #2 does get loaded

… then you wind up with query #1 and the fragment from query #2, and that would (to the parser at least) justify saying that the fragment is unused.

P.P.S. All of the above aside, it’s frustrating that I can’t re-use the same query in both a page and gatsby-node.js (because the page requires the use of the graphql tag, which can’t use interpolation, and so there’s literally no technical way to re-use a query on a page … even if you import the exact same query to both the page and gatsby-node.js).

In some sense I think that’s the truer cause of the issue here: if I could have just kept that query in a file and re-used it everywhere, I wouldn’t be copy/pasting queries all over, and never would have even discovered this bug.