在markdown文件中使用frontmatter在页面查询中查询图像

Question

我正在Gatsby项目中使用GraphQL。对于网站的类似博客的部分，我有一组markdown文件。在每个降价文件的最前面，都有一个image属性。

我想做的是使用Gatsby的精美图片API将图片加载到前端。当查看单个帖子（通过createPage api创建的帖子）时，这很好用，因为我可以在上下文中提供frontmatter.image。该查询如下所示。

export const pageQuery = graphql`
  query($slug: String!, $image: String) {
    markdownRemark(frontmatter: { slug: { eq: $slug } }) {
      html
      frontmatter {
        date(formatString: "MMMM DD, YYYY")
        slug
        title
        image
      }
    }
    coverImage: file(relativePath: { eq: $image }) {
        childImageSharp {
          fluid(maxWidth: 1440) {
            ...GatsbyImageSharpFluid
          }
        }
      }
  }
`

在我要显示所有这些帖子的索引页面上，我想显示此图像的较小版本。我可以很容易地从一开始就获得image，但是我不确定如何将其集成到查询中。

export const pageQuery = graphql`
  query {
    allMarkdownRemark(sort: { order: DESC, fields: [frontmatter___date] }) {
      edges {
        node {
          id
          excerpt(pruneLength: 250)
          frontmatter {
            date(formatString: "MMMM DD, YYYY")
            slug
            title
            image # <--- want to use this in a file query
          }
        }
      }
    }
  }
`

据我了解，我不能在实际使用图像的组件的静态查询中使用字符串插值，因此需要在页面查询中将其获取。我想做的事可能吗？有更好的方法来解决这个问题吗？

Answer 1

在前题的image字符串和实际的图像文件节点（由Sharp进行处理）之间的这种“链接”称为外键关系。

在盖茨比中创建外键关系

有两种方法：

1. Using mappings in gatsby-config.js
2. Using a GraphQL @link directive通过Gatsby的模式自定义（来自v2.2）

我推荐第二个选项，因为它是一种更GraphQL的处理方式，它发生在发生大多数节点操作的gatsby-node.js中。但是，如果您刚开始使用Gatsby和GraphQL，则第一个选项可能更易于设置。

在gatsby-node.js中实现@link指令

在您的情况下，使用@link GraphQL指令，您可能会在gatsby-node.js中得到类似的结果：

exports.createSchemaCustomization = ({ actions }) => {
  const { createTypes } = actions
  const typeDefs = [
    `type MarkdownRemark implements Node { frontmatter: Frontmatter }`,
    `type Frontmatter {
      # you may need to adapt this line depending on the node type and key
      # that you want to create the relationship for
      image: File @link(by: "relativePath")
    }`
  ]
  createTypes(typeDefs)
}

如果您想在野外看到一个示例，请在robinmetral/eaudepoisson.com中查看gatsby-node.js。

通过前台查询处理过的图像

最后，您将可以这样查询：

{
  allMarkdownRemark {
    edges {
      node {
        frontmatter {
          date
          slug
          title
          # image now points to the image file node
          image {
            childImageSharp {
              fluid(maxWidth: 1024) {
                ...GatsbyImageSharpFluid
              }
            }
          }
        }
      }
    }
  }
}