Gatsby: Help with importing shadowed template component (query is not run)

[laradevitt]

Summary

I've only been working with themes a short while so it's likely there is something I'm just not getting here.

The docs seem to indicate that importing shadowed components is OK. See Importing the shadowed component (Gatsby docs).

And yet when I import the component instead of copying it over, I'm not getting any data from the page query.

Possibly related?

• Theming: Page query in template is not shadowed #14611
• Shadowing templates doesn't allow you to override the page query #16927
• (Both apparently fixed in https://github.com/gatsbyjs/gatsby/pull/17681)

Steps to reproduce

Go to this demo repo: https://github.com/laradevitt/demo-gatsby-shadow-template

See Issue #1 in the README for details on reproducing.

Thanks!

Environment

  System:
    OS: Windows 10 10.0.17763
    CPU: (8) x64 Intel(R) Core(TM) i7-6700 CPU @ 3.40GHz
  Binaries:
    Node: 12.13.0 - ~\AppData\Local\Temp\yarn--1575659192406-0.508817745209361\node.CMD
    Yarn: 1.19.1 - ~\AppData\Local\Temp\yarn--1575659192406-0.508817745209361\yarn.CMD
    npm: 6.12.0 - C:\Program Files\nodejs\npm.CMD
  Languages:
    Python: 3.7.2 - /c/Users/r2dfoo/AppData/Local/Programs/Python/Python37/python
  Browsers:
    Edge: 44.17763.831.0

[classicmatsuo]

@laradevitt I believe i have resolved issue1 and issue 2 in your repo, i've gone ahead and submitted a pull request. fixes issue #19980

[laradevitt]

@classicmatsuo That would be great. Can you link to the PR?

[classicmatsuo]

@laradevitt its a PR on your repo.

[classicmatsuo]

tested on macOS
issue#1 not resolved.

System:
   OS: macOS 10.14.5
   CPU: Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
Binaries:
   Node: 10.1.16
   Yarn: 1.9.4
   npm: 6.9.0 
Languages:
   Python 2.7.15
Browsers:
   Chrome: 78.0.3904.97

[LekoArts]

Hi!

Plase provide a minimal reproduction that isn't using Prismic's source plugin but something like e.g. markdown files. I can see it working on my projects and it was added to the docs as it should work.

Thanks for using Gatsby! 💜

[laradevitt]

@LekoArts - I think this is as minimal as it can be considering it demonstrates theme component shadowing, but if not let me know: https://github.com/laradevitt/demo-gatsby-shadow-template

I also updated the steps in the README. Thanks -

[github-actions[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!
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

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

[laradevitt]

Updated packages on demo repo and issue still exists. If there is anything else I can provide let me know.

[LekoArts]

I've also ran into the issue myself yesterday. Will let the @gatsbyjs/themes team know.

[github-actions[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!
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

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

[paveli]

Hi, any updates on this issue?
I am having the same problem with queries and shadowed templates.

[laradevitt]

Hi @paveli - Can you tell us more? Is the shadowed component being imported? That's what this issue is about.

[paveli]

Hi @paveli - Can you tell us more? Is the shadowed component being imported? That's what this issue is about.

@laradevitt right, maybe my case is more general.
When I try to shadow any component with GraphQL queries inside I receive errors like that:

 ERROR #85910  GRAPHQL

Multiple "root" queries found in file: "SearchIndexQuery" and "SearchIndexQuery".
Only the first ("SearchIndexQuery") will be registered.

Instead of:
1 | query SearchIndexQuery {
2 |   bar {
3 |     #...
4 |   }
5 | }
6 |
7 | query SearchIndexQuery {
8 |   foo {
9 |     #...
10 |   }
11 | }

Do:
1 | query searchIndexQueryAndSearchIndexQuery {
2 |   bar {
3 |     #...
4 |   }
5 |   foo {
6 |     #...
7 |   }
8 | }

It seems to be the same issue as #Issue-2 in your demo repo.
I found one way to solve it - rename the query in shadowed component. But it still looks like an issue/bug for me.

[laradevitt]

Ah, you're right, it does look the same. I posted about that one here (it looks like you've already found it) but I think it's a different issue and probably not windows-specific. I agree that it seems buggy.

It's been awhile so I'll run my demo with updated packages to see if the error still exists.

[laradevitt]

Confirming that the issue still exists in the demo repo with updated packages. Another workaround (but only if you are coming at this as a theme developer) is to remove the query name altogether from the component being shadowed; unique names will be generated for each query. Not very intuitive though! Especially given that importing the component doesn't work. 🤷‍♀

[johno]

Thanks for opening up the issue @laradevitt!

The problem that you're encountering is that you're using a page query in your blog post template but when you use it as an import and compose it into another component it's no longer top level. Page queries have to be at the top level in order to be run, so a directly rendered page or a template that's rendered from gatsby-node. If you want to perform that query in the template and compose it with other components you need to use a StaticQuery or add the layout directly to your template.

• https://www.gatsbyjs.org/docs/static-query/#how-staticquery-differs-from-page-query
• https://www.gatsbyjs.org/docs/page-query/

I'm going to go ahead and close this because the second issue you've raised has an open issue https://github.com/gatsbyjs/gatsby/issues/23729.

Let me know if you have any questions!

[laradevitt]

Thanks @johno. Although I recognize that StaticQuery and page query are different, I guess I wasn't fully grasping that this creates a limitation when it comes to importing a component in order to shadow it. Your explanation helps with that. I'm wondering if the docs should be updated to point out that components with page queries can't be imported as described here. This issue was open for a long time which makes me wonder if a bit of clarity there might be helpful.

Anyway- thanks again, I appreciate your attention to this!