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

【问题标题】：How to write GraphQL-query for fetching image from mdx-file using GatsbyJS?如何编写 GraphQL 查询以使用 GatsbyJS 从 mdx 文件中获取图像？
【发布时间】：2020-02-03 23:24:37
【问题描述】：

我正在尝试使用 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 develop 命令时，我看到以下错误经过。

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

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

提前致谢，乔迪

【问题讨论】：

您是否安装了gatsby-transformer-sharp？请将您的package.json 添加到问题中。
@ksav 是的，我做到了。见上文，我从我的 package.json 文件中添加了依赖项。谢谢你帮助我。

标签： node.js reactjs graphql gatsby

【解决方案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
            }
          }
        }
      }
    }
  }

【讨论】：