Question

我正在尝试使用GatsbyJS创建博客。我遵循本教程

https://www.gatsbyjs.org/docs/recipes/#optimizing-and-querying-images-in-post-frontmatter-with-gatsby-image

博客包含标题，特色图片和文字。

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开发命令时，我看到了以下错误消息。

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"
    },
...

有人知道如何解决这个问题吗？

提前感谢，乔迪

Answer 1

您应该更改此设置：

  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编写GraphQL查询以从mdx文件中获取图像？

1 个答案: