Shadowing query.ts

[soopdop]

Hi,
I wonder if it's possible to shadow the TS files including queries, templatets/feed/queries.ts, and templates/post/query.ts.
I'm trying it, but I don't know how to. Are there other ways to modify these queries?

[Vagr9K]

Yes. You can shadow any of these files (you can also use JS files to shadow TS files).

You can check out the advanced-example which shadows the templates from the theme.

Make sure to export your TemplateComponent as a default when you shadow the post query.ts.

Are there other ways to modify these queries?

Unfortunately not. The only option provided by Gatsby for modifying theme queries is shadowing.

[soopdop]

Thank you very much for your answer. However, shadowing doesn't seem to work for me.

What I want to do is just to adjust the length of the excerpt using excerpt(pruneLength: 1000). So I copied two files like the below screenshot:

For post/query.ts

I got this error,

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

Instead of:

   1 | query BlogPostBySlug {
   2 |   mdx {
   3 |     #...
   4 |   }
   5 | }
   6 |
   7 | query BlogPostBySlug {
   8 |   mdx {
   9 |     #...
  10 |   }
  11 | }

Do:

  1 | query blogPostBySlugAndBlogPostBySlug {
  2 |   mdx {
  3 |     #...
  4 |   }
  5 |   mdx {
  6 |     #...
  7 |   }
  8 | }

I'm not sure why this happens. As far as I know, shadowing in gatsby is overriding(or overwriting) existing files during the build.
Anyway, this can be solved by renaming BlogPostBySlug to MyBlogPostBySlug. Then I can see the result of a change of excerpt(pruneLength: 1000)

For feed/queries.ts

I don't think shadowing this file is working. I changed all the excerpt to excerpt(pruneLength: 1) in the shadowed file, but I couldn't see any changes on the built site.

Should I just edit theme files in the themes/advanced for this?

[Vagr9K]

I'm not sure why this happens. As far as I know, shadowing in gatsby is overriding(or overwriting) existing files during the build.
Anyway, this can be solved by renaming BlogPostBySlug to MyBlogPostBySlug. Then I can see the result of a change of excerpt(pruneLength: 1000)

That's actually fine. Gatbsy runs all the GraphQL queries before doing anything and it doesn't know that one shadows the other one, hence the error.

Even for shadowed queries the query names must differ.

I don't think shadowing this file is working. I changed all the excerpt to excerpt(pruneLength: 1) in the shadowed file, but I couldn't see any changes on the built site.

It seems like I was able to reproduce locally.

Does your console also indicate this warning?

warn The GraphQL query in the non-page component "/home/ruben/Git/gatsby-advanced-starter/src/gatsby-theme-advanced/templates/posts/query.ts" will not be run.

It seems like for some strange reason Gatsby fails to run the shadowed query.

Should I just edit theme files in the themes/advanced for this?

Honestly go for it.
If you end up modifying queries a bit more you'll need to update type definitions for them too, so may as well modify them at the core.

[soopdop]

Does your console also indicate this warning?

Yes, right.

Anyway, thank you very much for your answer and also your great job. Your kind explanation helped me a lot.