Fragments with arguments in external component - possible?

[homemdasneves]

Summary

I'd like to define a fragment in a component to reuse in several page queries. Ideally, this fragment would receive a parameter. This actually works, if the fragment with arguments is defined in the same code block as the page query. Unfortunately if I move the fragment to another graphql block, out of the page component, it won't work. In that case I get this error: "Variable "$lang" is never used in operation "GenericPageQuery" graphql/template-strings".

From my understanding of the gatsby compilation flow, all graphql queries are gathered and put together before they run, so why does it matter whether I place it on the same graphql block or on another component's graphql block?

Is there any way we can make it work?

Relevant information

Here are my queries:

The page query:

query GenericPageQuery($lang: String!, $id: ID!) {
	
  # this fragment is using the $id var and it's defined on this graphql block
  # works fine
  ...Generic
	
  # this fragment is using the $lang var and it's defined elsewhere, on another component
  # it will output the error: Variable "$lang" is never used in operation "GenericPageQuery"  graphql/template-strings
  ...MenuForLanguageQuery
}

fragment Generic on Query {
  cms {
	content {
	  byId(id: $id) {
		name
		url
		content
	  }
	}
  }
}

And the fragment I defined on an external component:

fragment MenuForLanguageQuery on Query {
  cms {
    content {
      byUrl(url: $lang) {
        id
        url
        name
      }
    }
  }
}

I also tried to make it work with no luck using the arguments and the argumentDefinitions directives as defined in the Relay docs here. Relay is used in the gatsby compilation process right? This way I got the errors: Unknown directive "arguments", Unknown directive "argumentDefinitions".

[sidharthachatterjee]

cc @freiksenet

[homemdasneves]

I just narrowed it down to this: as long as all the variables used in the fragments are present in the same graphql block as the page query, gatsby will compile successfully.

So, going back to my example, if I add a dummy query that uses the $lang var to my page query, there's no problem in having MenuForLanguageQuery defined in other component:

query GenericPageQuery($lang: String!, $id: ID!) {
        ...Generic
        ...MenuForLanguageQuery 
        
        # dummy query just to make use of the $lang var
        dummy: cms { 
            content { 
                byUrl(url: $lang) { 
                    _contentData { 
                        url }
                    }
                }
            }
    }

Shouldn't this be possible without this kind of hack?

[freiksenet]

I couldn't reproduce this error - I wonder if you are exporting your fragment in a way that it's picked up by Gatsby compiler (as show here https://www.gatsbyjs.org/docs/querying-with-graphql/#fragments).

[homemdasneves]

Yes, that's exactly how I'm exporting the fragment. I believe the gatsby compiler successfully picks up my fragment, because I can see "success" on both the: extract queries from components and run graphql queries steps, as you can see below. It'll even run the queries!...

...
success createPages — 0.230 s
success createPagesStatefully — 0.043 s
success onPreExtractQueries — 0.000 s
success update schema — 0.061 s
success extract queries from components — 0.143 s
success run graphql queries — 0.910 s — 28/28 30.83 queries/second
success write out page data — 0.035 s
success write out redirect data — 0.002 s
success onPostBootstrap — 0.000 s

info bootstrap finished - 5.605 s

Warning: React version not specified in eslint-plugin-react settings. See https://github.com/yannickcr/eslint-plugin-react#configuration .
 ERROR  Failed to compile with 1 errors                                                                                                                20:03:45

 error  in ./src/templates/genericPage.js

Module Error (from ./node_modules/eslint-loader/index.js):

C:\work\jwt\rc-galp\gatsby\src\templates\genericPage.js
  62:24  error  Variable "$url" is never used in operation "GenericPageQuery"  graphql/template-strings

✖ 1 problem (1 error, 0 warnings)

[freiksenet]

Could you send a repro case? Thanks!

[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!

[nadrane]

hmm i'm getting the exact same issue as described here. Any chance we can open this one back up? i'd be happy to provide more info

[JDDoesDev]

I also just ran into this. I have a few variables defined in my page query and I'm assuming I should be able to use them in my fragments, but when I try i get the same errors as above.

If this is duplicated somewhere else I can repost there, but it's definitely an issue.

[alexej-d]

Same here, when a query variable is used only in the fragments inside a page query I get the same error.

[hamdigatri]

@alex-tgk @JDDoesDev any solution to this ? I am getting the same error

[Petermhen]

I just narrowed it down to this: as long as all the variables used in the fragments are present in the same graphql block as the page query, gatsby will compile successfully.

So, going back to my example, if I add a dummy query that uses the $lang var to my page query, there's no problem in having MenuForLanguageQuery defined in other component:

query GenericPageQuery($lang: String!, $id: ID!) {
        ...Generic
        ...MenuForLanguageQuery 
        
        # dummy query just to make use of the $lang var
        dummy: cms { 
            content { 
                byUrl(url: $lang) { 
                    _contentData { 
                        url }
                    }
                }
            }
    }

Shouldn't this be possible without this kind of hack?

Clever find. Thanks for sharing. Unfortunately having to repeat the dummy query in every root query kinda defeats the purpose of having a fragment for me. It'd be nice if Graphql could add support for arguments in Fragments.
See issue here for anyone interested:
graphql/graphql-spec#204

[willkuerlich]

I guess it is working now (Gatsby 4.24.0) without the dummy query. At least if you insert in EVERY page (in gatsby-node's onCreatePage()) a pageContext object with all variable names you query for in your generic page queries. (Not yet thouroughly tested)