Error when trying to shadow gatsby theme with graphQL fragments

[DWShuo]

Summary

Im trying to make some changes to the theme wkocjan/gatsby-theme-intro/ via shadowing, one of the components contain a graphQL fragment and i get the error

Found two different GraphQL fragments with identical name "ProjectFragment". Fragment names must be unique

  File: /home/user/my-site/node_modules/@wkocjan/gatsby-theme-intro/src/types/project.js
  > 1 | fragment ProjectFragment on ProjectsYaml{description icon image{childImageSharp{fluid(maxWidth:640 quality:85){...GatsbyImageSharpFluid_withWebp}}}name status tags url}
|             ^^^^^^^^^^^^^^^

  File: /home/user/my-site/src/@wkocjan/gatsby-theme-intro/types/project.js
  > 1 | fragment ProjectFragment on ProjectsYaml{description icon image{childImageSharp{fluid(maxWidth:640 quality:85){...GatsbyImageSharpFluid_withWebp}}}name status tags url iconURL}
|             ^^^^^^^^^^^^^^^

Whats the correct way to resolve this issue? Thanks in advance.

Relevant information

Below is the component i tried to shadow, i only added 2 lines indicted by the arrows.

import { graphql } from "gatsby"
import { arrayOf, shape, string, object, oneOf } from "prop-types"

export const ProjectType = {
  description: string,
  icon: oneOf(["github", "website"]),
  image: shape({
    childImageSharp: object.isRequired,
  }),
  name: string.isRequired,
  status: string,
  tags: arrayOf(string),
  url: string,
  iconURL: string,  <------ added this
}

export const query = graphql`
  fragment ProjectFragment on ProjectsYaml {
    description
    icon
    image {
      childImageSharp {
        fluid(maxWidth: 640, quality: 85) {
          ...GatsbyImageSharpFluid_withWebp
        }
      }
    }
    name
    status
    tags
    url
    iconURL <------ added this
  }
`

Environment (if relevant)

System:
OS: Linux 5.6 Manjaro Linux
CPU: (1) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
Shell: 5.0.17 - /bin/bash
Binaries:
Node: 14.4.0 - ~/.nvm/versions/node/v14.4.0/bin/node
Yarn: 1.22.4 - /usr/bin/yarn
npm: 6.14.5 - ~/.nvm/versions/node/v14.4.0/bin/npm
Languages:
Python: 3.8.3 - /usr/bin/python
Browsers:
Firefox: 78.0.1
npmPackages:
gatsby: ^2.23.14 => 2.23.14
npmGlobalPackages:
gatsby-cli: 2.12.51

File contents (if changed)

gatsby-config.js: N/A
package.json: N/A
gatsby-node.js: N/A
gatsby-browser.js: N/A
gatsby-ssr.js: N/A

[vladar]

Hi @DWShuo !

This sounds like a valid bug to me. If you're up for it, we'd very much appreciate if you could provide a minimal reproduction and we'll be able to take a look and maybe fix it if this a bug indeed.

Thanks for using Gatsby! 💜

[DWShuo]

@vladar This is the theme i am using https://www.gatsbyjs.org/packages/@wkocjan/gatsby-theme-intro/ and here is the reproducible test case https://github.com/DWShuo/graphql-shadow-bug

[DWShuo]

The work around is just to make a new fragment with a different name and use that, but i am just curious can someone confirm if this is a bug or is GraphQL fragment shadowing not supported?

[vladar]

Thanks for the repro! Yeah, shadowing GraphQL fragments is not supported at the moment. After looking at it I don't think this is a bug, it is just not implemented. So I think this is a valid feature request.

[tlgimenes]

Hello guys. I've run into the same issue here. Do you have any plans on supporting it ? I think this is a very important feature, since it allows us to shadow themes with graphql fragments.

Thanks !

[laurenskling]

It's not only fragments. Every graphql statement gets run, even if that file is shadowed.

That's why you also have warnings like:

warning The GraphQL query in the non-page component "/Users/laurenskling/sites/gatsby-monorepo/packages/gatsby-theme-pages/src/templates/contact.js" will not be run.

But surely I would love to see this fixed. I have a codebase where I shadow a fragment in every site using a theme, but I cannot put the original fragment in the theme, otherwise it will give them the error that it's duplicate. So I must shadow it in every project now, because I had comment out the original query. Even though I might not even make changes to the original fragment.