Gatsby / Drupal 8 - 使用媒体模块时获取图像（Acquia Lightning 安装）答案

【问题标题】：Gatsby / Drupal 8 - getting an image when using the media module (Acquia Lightning install)Gatsby / Drupal 8 - 使用媒体模块时获取图像（Acquia Lightning 安装）
【发布时间】：2019-07-28 16:43:18
【问题描述】：

在使用节点中的图像的标准 Drupal 8 安装中，通过 GraphQL 获取图像相当容易。这里有很好的例子： https://github.com/gatsbyjs/gatsby/tree/master/examples/using-drupal

使用 Acquia Lightning 安装配置文件（或者如果您只是使用我期望的媒体模块）媒体添加图像的方式不同，在 GraphiQL 中我看到关系中的媒体字段，其中唯一的子字段是 __typename

    {
      allNodeBlog {
        edges {
          node {
            relationships {
              field_media {
                __typename
              }
            }
          }
        }
      }
    }

我还可以查看 allMediaImage（或类似的），我可以在其中访问图像本身。我也可以在“关系”中包含所有节点信息，但我当然需要节点数据作为主要信息。我真的不明白将查询与节点联系在一起的最佳方式。

{
  allMediaImage {
    edges {
      node {
        relationships {
          image {
            localFile {
              childImageSharp {
                fluid {
                  ...
                }
              }
            }
          }
          node__blog {
            id
          }
        }
      }
    }
  }
}

我希望我可以以不同的方式创建 JSON，以便更轻松地访问图像。否则，首先获取节点 ID，然后使用它来选择适当的媒体。任何想法

【问题讨论】：

奇怪的是，如果我查看特定页面，我可以通过媒体图像（这只是一个节点，而不是我所追求的一般节点类型）{ nodeBlog { 关系 { node__landing_page { 关系 { field_media {关系 { 图像 { localFile { id childImageSharp { ... } } } } } } } } } }

标签： drupal drupal-8 gatsby acquia

【解决方案1】：

看起来你已经解决了。但我正在为其他试图弄清楚这一点的人发布回复。

在 Gatsby 中使用 Drupal 节点需要您深入了解节点和媒体实体之间的关系，然后了解媒体实体和文件之间的关系。

我正在使用启用核心媒体和（实验性）媒体库的简单 Drupal 8.6.15 安装。我在我的 Article 内容类型中添加了一个名为 Image Asset 的媒体字段（图像参考）（我删除了正常的 Image 字段）。

这就是我的 graphql 查询的样子...

query ArticleQuery{
  allNodeArticle {
    edges {
      node {
        # Use the node ID for the key in GatsbyJS
        drupal_internal__nid
        # Access the Article's text info
        created(formatString: "DD MMMM YYYY")
        title
        body {
          value
          summary
        }
        # Here is where I access the Image Asset field
        relationships {
          field_image_asset {
            relationships {
              field_media_image {
                localFile {
                  childImageSharp {
                    fluid(maxWidth:1200) {
                      ...GatsbyImageSharpFluid
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

【讨论】：