Shadowing errors

[neo01124]

Hi @nehalist Thanks for this awesome theme! It has all the things I was looking for in such a theme - search, toc, tags, seo, etc.

I'm running into problems setting up shadowing. Steps

1. gatsby new tmp && cd tmp
2. yarn add @nehalist/gatsby-theme-nehalem
3. Modify the code till gatsby develop works i.e. get the site working on localhost:8000 without errors. Did this by following https://nehalem.netlify.app/getting-started and adding siteMetadata.
4. mkdir ./src/@nehalist/gatsby-theme-nehalem
5. cp node_modules/@nehalist/gatsby-theme-nehalem/src/* ./src/@nehalist/gatsby-theme-nehalem - basically copying everything from the theme's src to the site's src.
6. gatsby clean && gatsby develop - This fails with Log 1 below.
7. I next unshadowed the 3 erring components from Log 1 (bio, tag-list and post), resolved the deps using the import { Bio } from "@nehalist/gatsby-theme-nehalem"; format and rerun clean & develop. That throws a different error - Log 2 below

Questions:

1. My aim is to get all the theme's code in a modifiable state and once my understanding of the theme's code improves then unshadow most of it. Is it possible to do this or maybe my understanding of shadowing is just poor?
2. Any tips to resolve the errors below are appreciated :)

Thanks!

Log 1

Failed to compile
Multiple "root" queries found: "MetadataQuery" and "MetadataQuery".
Only the first ("MetadataQuery") will be registered.

Instead of:

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

Do:

  1 | query metadataQueryAndMetadataQuery {
  2 |   site {
  3 |     #...
  4 |   }
  5 |   site {
  6 |     #...
  7 |   }
  8 | }

This can happen when you use two page/static queries in one file. Please combine those into one query.
If you're defining multiple components (each with a static query) in one file, you'll need to move each component to its own file.

File: /Users/vjewalik/code/tmp/node_modules/@nehalist/gatsby-theme-nehalem/src/components/bio/index.tsx

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

Instead of:

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

Do:

  1 | query tagsAndTags {
  2 |   allTags {
  3 |     #...
  4 |   }
  5 |   allTags {
  6 |     #...
  7 |   }
  8 | }

This can happen when you use two page/static queries in one file. Please combine those into one query.
If you're defining multiple components (each with a static query) in one file, you'll need to move each component to its own file.

File: /Users/vjewalik/code/tmp/node_modules/@nehalist/gatsby-theme-nehalem/src/components/tag-list/index.tsx

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

Instead of:

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

Do:

  1 | query primaryTagAndPrimaryTag {
  2 |   markdownRemark {
  3 |     #...
  4 |   }
  5 |   markdownRemark {
  6 |     #...
  7 |   }
  8 | }

This can happen when you use two page/static queries in one file. Please combine those into one query.
If you're defining multiple components (each with a static query) in one file, you'll need to move each component to its own file.

File: /Users/vjewalik/code/tmp/node_modules/@nehalist/gatsby-theme-nehalem/src/templates/post.tsx

Log 2

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `PostsPage`.
▶ 21 stack frames were collapsed.
(anonymous function)
/Users/vjewalik/code/tmp-faang/.cache/app.js:94
  91 | const preferDefault = m => (m && m.default) || m
  92 | let Root = preferDefault(require(`./root`))
  93 | domReady(() => {
> 94 |   renderer(<Root />, rootElement, () => {
  95 |     apiRunner(`onInitialClientRender`)
  96 |   })
  97 | })

[nehalist]

I've created a starter at https://github.com/nehalist/gatsby-starter-nehalem - this includes a shadowing example. Using the starter should make it easier to get started :)

[neo01124]

Thanks @nehalist. I've reproduced the same error (as Log 1 above) with the starter theme.

Steps:

1. gatsby new your-site-name https://github.com/nehalist/gatsby-starter-nehalem . gatsby-develop works.
2. cd your-site-name && cp ./node_modules/@nehalist/gatsby-theme-nehalem/src/* ./src/@nehalist/gatsby-theme-nehalem - basically copying everything from the theme's src to the site's src.
3. gatsby clean && gatsby develop fails with the following error.

Failed to compile
GraphQL Error There was an error while compiling your site's GraphQL queries.
  Error: RelayParser: Encountered duplicate defintitions for one or more documents: each document must have a unique name. Duplicated documents:
- Tags
- MetadataQuery
- PrimaryTag

This error occurred during the build time and cannot be dismissed.

Questions:

1. Can this kind of shadowing be done?
2. Any tips to resolve the errors below are appreciated :)

[nehalist]

Seems like Gatsby is pretty unhappy with shadowed components using graphql queries which use the same name as their parents.

To fix this change the queries accordingly. The queries are located in:

• src/@nehalist/gatsby-theme-nehalem/templates/post.tsx#312
• src/@nehalist/gatsby-theme-nehalem/components/tag-list/index.tsx#19
• src/@nehalist/gatsby-theme-nehalem/components/bio/index.tsx#35

On these lines you should find the queries, e.g. query MetaQuery or query Tags. Simply rename them to something like ShadowedMetaQuery, ShadowedTags - or whatever you want, just so that they have a different name that their parents.

[nehalist]

I suppose this is fixed by now, hence closing this issue.