目次
gatsby-node.jsでGatsbyImageを利用した時、エラーになったため、その対応方法をまとめました。
gatsby-image 公式サイト
gatsby-node.jsでエラーになる記述
GraphQLError: Unknown fragment "GatsbyImageSharpFluid".
query {
file(relativePath: { eq: "{FILE_PATH}" }) {
childImageSharp {
fixed(width: 1200) {
...GatsbyImageSharpFluid
}
}
}
}GraphQLError: Unknown fragment "GatsbyImageSharpFixed".
query {
file(relativePath: { eq: "{FILE_PATH}" }) {
childImageSharp {
fixed(width: 1200) {
...GatsbyImageSharpFixed
}
}
}
}gatsby-node.jsでエラーにならない記述
gatsby/fragments.js at master · gatsbyjs/gatsby
gatsby-node.jsでは、fragments.jsが利用できません。上記リポジトリのソースに指定されているフィールドを、個別で指定することで同様のことが実現できます。
GatsbyImageSharpFluidのフィールドの指定方法
query {
file(relativePath: { eq: "{FILE_PATH}" }) {
childImageSharp {
fixed(width: 1200) {
base64
aspectRatio
src
srcSet
srcWebp
srcSetWebp
sizes
}
}
}
}GatsbyImageSharpFixedのフィールドの指定方法
query {
file(relativePath: { eq: "{FILE_PATH}" }) {
childImageSharp {
fixed(width: 1200) {
base64
width
height
src
srcSet
}
}
}
}その他
他のものはGitHubを参考に、個別で指定してください。