如何编写GraphQL查询，以便使用GatsbyJS从mdx文件中获取图像？

Question

我正试图用盖茨比创建一个博客。我遵循这个教程

https://www.gatsbyjs.org/docs/recipes/#optimizing-使用盖茨比图像查询后frontmatter中的图像

博客包含标题、特色图片和文本。

MDX文件结构如下所示。

---
title: My First Post
featuredImage: ./corgi.png
---
Post content...

并且，代码在文件gatsby节点中。像这样

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节点中编写GraphQL查询。js。我试了好几种。

const result = await graphql(`
    {
        {
            allMdx {
              edges {
                node {
                  id
                  frontmatter {
                    path
                    title
                  }
                }
              }
            }
          }                   
      `)

当我运行gatsbydevelop命令时，我看到下面的错误经过。

Field "featuredImage" must not have a selection since type "String" has no subfields

在包内配置的依赖项。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
            }
          }
        }
      }
    }
  }