duplicate GraphQL fragments when trying to shadow project icon

[DWShuo]

I'm trying to shadow the icon(circled in red) in the project block to make it clickable. I keep getting this error when i make the changes, isn't shadowing suppose to overwrite the default fragment?

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}
|             ^^^^^^^^^^^^^^^

All i did was add in iconURL in types/project.js and reference the new iconURL type in the appropriate files

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
  }
`

[wkocjan]

Hi David, thanks for reporting it.

I'm able to reproduce your problem. It looks like Gatsby doesn't support GraphQL fragments shadowing. I'm not able to solve it - the only way to get this working at this stage is in my opinion renaming the fragment's name and then use the new name in a query.

So:

1) In your shadowed project.js you can use different fragment's name:

fragment CustomProjectFragment on ProjectsYaml {

2) Then please shadow also templates/index.js file and replace:

projects: allProjectsYaml {
      nodes {
        ...ProjectFragment
      }
    }

with:

projects: allProjectsYaml {
      nodes {
        ...CustomProjectFragment
      }
    }

[DWShuo]

It was working for a bit then it stopped?? i'm getting this error now

/home/errorcodes/testingsite/src/@wkocjan/gatsby-theme-intro/types/project.js
  32:5  error  Cannot query field "iconURL" on type "ProjectsYaml". Did you mean "icon"?  graphql/template-strings

✖ 1 problem (1 error, 0 warnings)

File: src/@wkocjan/gatsby-theme-intro/types/project.js

Here is a repo with my files https://github.com/DWShuo/iconurl-test

[wkocjan]

I think it stopped working for you after this change in 1.0.12: https://github.com/wkocjan/gatsby-theme-intro/commit/8639af03d2927b7c5d358cddb5c1e18ed657c9c9

I've just published 1.0.13, in which you should be able to customize GraphQL types too. You'd need to define iconURL field in src/gatsby/node/sourceNodes.js file.

Hope it helps.

[DWShuo]

I updated my repo with the new changes to sourceNodes.js still running into the Cannot query field "iconURL" on type "ProjectsYaml". error.

[wkocjan]

@DWShuo It looks like shadowing gatsby-node.js isn't supported. I made a workaround in 1.0.14 - removed @dontInfer directive and it now allows you to add custom fields dynamically.

Please run yarn upgrade and remove shadowed gatsby/node directory. Just tested it in your repo (iconurl-test) and it worked.

[DWShuo]

@wkocjan yep that fixed it thank you