如何编写用于使用GatsbyJS从mdx文件中获取图像的GraphQL查询？
我正在尝试使用GatsbyJS创建博客。我遵循本教程
博客包含标题，特色图片和文本。
MDX文件结构看起来像这样。
---
title: My First Post
featuredImage: ./corgi.png
---
Post content...
而且，像这样的文件gatsby-node.js中的代码
exports.createPages = async ({ graphql, actions }) => {
const { createPage } = actions
// query for all markdown
result.data.allMdx.edges.forEach(({ node }) => {
createPage({
path: node.fields.slug,
component: path.resolve(`./src/components/markdown-layout.js`),
context: {
slug: node.fields.slug,
},
})
})
}
在模板中，将使用此查询提取图像。
query PostQuery($slug: String) {
markdown: mdx(fields: { slug: { eq: $slug } }) {
id
frontmatter {
image {
childImageSharp {
fluid {
...GatsbyImageSharpFluid
}
}
}
}
}
}
我的主要问题是在gatsby-node.js中编写GraphQL查询。我尝试过服务器式的
const result = await graphql(`
{
{
allMdx {
edges {
node {
id
frontmatter {
path
title
}
}
}
}
}
`)
当我运行gatsby development命令时，我看到了以下错误。
Field "featuredImage" must not have a selection since type "String" has no subfields
在package.json中配置的依赖项。
...
"dependencies": {
"@emotion/core": "^10.0.17",
"@emotion/styled": "^10.0.17",
"@mdx-js/mdx": "^1.5.0",
"@mdx-js/react": "^1.5.0",
"axios": "^0.19.0",
"babel-plugin-styled-components": "^1.10.6",
"express": "^4.17.1",
"gatsby": "^2.15.14",
"gatsby-image": "^2.2.24",
"gatsby-plugin-emotion": "^4.1.6",
"gatsby-plugin-express": "^1.1.6",
"gatsby-plugin-manifest": "^2.2.16",
"gatsby-plugin-mdx": "^1.0.47",
"gatsby-plugin-offline": "^2.2.10",
"gatsby-plugin-react-helmet": "^3.1.7",
"gatsby-plugin-sharp": "^2.2.28",
"gatsby-plugin-styled-components": "^3.1.5",
"gatsby-remark-images": "^3.1.25",
"gatsby-source-filesystem": "^2.1.23",
"gatsby-transformer-remark": "^2.6.22",
"gatsby-transformer-sharp": "^2.2.20",
"prop-types": "^15.7.2",
"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-helmet": "^5.2.1",
"styled-components": "^4.3.2",
"typeface-source-sans-pro": "0.0.75"
},
...
有人知道如何解决该问题吗？
谢谢，乔迪
回答如下：您应该更改此： query PostQuery($slug: String) {
markdown: mdx(fields: { slug: { eq: $slug } }) {
id
frontmatter {
image {
childImageSharp {
fluid {
...GatsbyImageSharpFluid
}
}
}
}
}
}
收件人：
query PostQuery($slug: String) { markdown: mdx(fields: { slug: { eq: $slug } }) { id frontmatter { featuredImage { // here is a mistake childImageSharp { fluid { ...GatsbyImageSharpFluid } } } } } }
如何编写用于使用GatsbyJS从mdx文件中获取图像的GraphQL查询？
我正在尝试使用GatsbyJS创建博客。我遵循本教程
博客包含标题，特色图片和文本。
MDX文件结构看起来像这样。
---
title: My First Post
featuredImage: ./corgi.png
---
Post content...
而且，像这样的文件gatsby-node.js中的代码
exports.createPages = async ({ graphql, actions }) => {
const { createPage } = actions
// query for all markdown
result.data.allMdx.edges.forEach(({ node }) => {
createPage({
path: node.fields.slug,
component: path.resolve(`./src/components/markdown-layout.js`),
context: {
slug: node.fields.slug,
},
})
})
}
在模板中，将使用此查询提取图像。
query PostQuery($slug: String) {
markdown: mdx(fields: { slug: { eq: $slug } }) {
id
frontmatter {
image {
childImageSharp {
fluid {
...GatsbyImageSharpFluid
}
}
}
}
}
}
我的主要问题是在gatsby-node.js中编写GraphQL查询。我尝试过服务器式的
const result = await graphql(`
{
{
allMdx {
edges {
node {
id
frontmatter {
path
title
}
}
}
}
}
`)
当我运行gatsby development命令时，我看到了以下错误。
Field "featuredImage" must not have a selection since type "String" has no subfields
在package.json中配置的依赖项。
...
"dependencies": {
"@emotion/core": "^10.0.17",
"@emotion/styled": "^10.0.17",
"@mdx-js/mdx": "^1.5.0",
"@mdx-js/react": "^1.5.0",
"axios": "^0.19.0",
"babel-plugin-styled-components": "^1.10.6",
"express": "^4.17.1",
"gatsby": "^2.15.14",
"gatsby-image": "^2.2.24",
"gatsby-plugin-emotion": "^4.1.6",
"gatsby-plugin-express": "^1.1.6",
"gatsby-plugin-manifest": "^2.2.16",
"gatsby-plugin-mdx": "^1.0.47",
"gatsby-plugin-offline": "^2.2.10",
"gatsby-plugin-react-helmet": "^3.1.7",
"gatsby-plugin-sharp": "^2.2.28",
"gatsby-plugin-styled-components": "^3.1.5",
"gatsby-remark-images": "^3.1.25",
"gatsby-source-filesystem": "^2.1.23",
"gatsby-transformer-remark": "^2.6.22",
"gatsby-transformer-sharp": "^2.2.20",
"prop-types": "^15.7.2",
"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-helmet": "^5.2.1",
"styled-components": "^4.3.2",
"typeface-source-sans-pro": "0.0.75"
},
...
有人知道如何解决该问题吗？
谢谢，乔迪
回答如下：您应该更改此： query PostQuery($slug: String) {
markdown: mdx(fields: { slug: { eq: $slug } }) {
id
frontmatter {
image {
childImageSharp {
fluid {
...GatsbyImageSharpFluid
}
}
}
}
}
}
收件人：
query PostQuery($slug: String) { markdown: mdx(fields: { slug: { eq: $slug } }) { id frontmatter { featuredImage { // here is a mistake childImageSharp { fluid { ...GatsbyImageSharpFluid } } } } } }