Использование frontmatter в файле разметки для запроса изображений в запросе страницы

Question

Я использую GraphQL из проекта Gatsby. У меня есть набор файлов разметки для блогового раздела сайта. В передней части каждого файла уценки есть свойство image.

Я бы хотел использовать 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
          }
        }
      }
    }
  }
`

Насколько я понимаю, я не могу использовать интерполяцию строк в запросе stati c в компоненте, в котором изображение фактически используется, поэтому мне нужно получить его здесь, в запросе страницы. Возможно ли то, что я пытаюсь сделать? Есть ли лучший способ справиться с этим?

Answer 1

Эта «связь» между строкой image вашего фронтмейтера и фактическим узлом файла изображения (обработанным с помощью Sharp) называется взаимосвязью внешнего ключа .

Создание отношений внешнего ключа в Gatsby

Это можно сделать двумя способами:

1. Использование сопоставлений в gatsby-config.js
2. Использование GraphQL @link директива через настройку схемы Гэтсби (начиная с v2.2)

Я рекомендую второй вариант, так как это больше GraphQL способ делать что-то и происходит в gatsby-node.js, где большинство узлов операции идут. Однако, если вы начинаете с Gatsby и GraphQL, первый вариант может быть проще настроить.

Реализация директивы @link в gatsby- node.js

В вашем случае используя директиву @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)
}

Если вы хотите увидеть пример в дикой природе, проверьте gatsby-node.js в robinmetral/eaudepoisson.com.

Запрашивать обработанные изображения через ваш frontmatter

Наконец, вы сможете запросить, как это:

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