Gatsby.js-allMarkdownRemark中的GraphQL查询pdf文件

时间:2019-01-24 16:24:14

标签: javascript reactjs graphql gatsby

我目前正在为一个学校项目建立一个盖茨比站点,并且遇到了我自己无法解决的问题。

基本上我有一些markdown文件。它们包含一个名为“ file”的前题字段,并带有另一个文件名(例如:“ test.pdf”)作为值。 我需要知道这些文件的公共URL。

我试图这样写查询:

     query SiteQuery{
           publications: allMarkdownRemark(
               filter: { fileAbsolutePath: {regex : "/publications/"} },
               sort: { order: DESC, fields: [frontmatter___date] },
           ){
             edges {
               node {
                 frontmatter {
                   date(formatString: "MMMM DD, YYYY"),
                   title,
                   file{
                     publicURL                   
                   }
                 }
              }
            }
         }
    }

但是它总是将字段'file'解释为字符串,我认为这很奇怪,因为我已经对以下图像执行了相同的过程:

...
    node {
      frontmatter {
        date(formatString: "MMMM DD, YYYY"),
        title,
        picture {
          childImageSharp {
            fluid{
              ...GatsbyImageSharpFluid
            }
          }
        }
      } 
    } 
...

我已经搜索了答案,但是我能找到的最有用的结果是在此网站上:https://www.gatsbyjs.org/docs/adding-images-fonts-files/

但是我无法使其工作。

有人可以告诉我我在做什么错吗?

当然,我总是可以使用'allFile'编写第二个查询,然后通过绝对路径将markdown文件与pdf文件进行匹配,但是我希望有一个更好的解决方案。

1 个答案:

答案 0 :(得分:2)

这是您想使用mapping的时候,但是对于非Markdown或JSON文件的任何内容,它的记录都不够完善。

gatsby-config.js -映射

// NOTE: the frontmatter `file` and property `base` must have unique values
// That is, don't allow any files to have the same name if mapping `base`
mapping: {
    'MarkdownRemark.frontmatter.file' : 'File.base',
}

因此,您现在可以成功做到:

query SiteQuery{
    publications: allMarkdownRemark(
        filter: { fileAbsolutePath: {regex : "/publications/"} }
        sort: { order: DESC, fields: [frontmatter___date] }
    ){
       edges {
           node {
               frontmatter {
                   date(formatString: "MMMM DD, YYYY")
                   title
                   file {
                       publicURL                   
                   }
               }
           }
       }
    }
}