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

Posted 2023-03-08

【中文标题】如何编写 GraphQL 查询以使用 GatsbyJS 从 mdx 文件中获取图像？

【英文标题】：How to write GraphQL-query for fetching image from mdx-file using GatsbyJS?

【发布时间】：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 文件中添加了依赖项。谢谢你帮助我。

【参考方案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