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
}
`
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent