单个 GraphQL 查询中的多个源 (Gatsby)答案

【问题标题】：Multiple Sources in Single GraphQL query (Gatsby)单个 GraphQL 查询中的多个源 (Gatsby)
【发布时间】：2021-07-16 06:04:22
【问题描述】：

我是 GraphQL 和 Gatsby 的新手，希望了解在我的 Gatsby 项目中“连接”来自两个不同来源的数据的编程方法。我有一个 Albums.json 文件，我正在查询如下：

query MyQuery {
  allAlbumsJson(sort: {fields: releaseDate, order: DESC}) {
    edges {
      node {
        id
        title
        slug
        releaseDate
      }
    }
  }
}

我还为每个动态生成路径的专辑创建了一个降价文件。我怎样才能将我的 markdown 文件中的字段提取到上面的查询中，例如，title 字段，它是 markdown 的 frontmatter 的一部分？

如果我必须在 gatsby-transformer-json 插件生成的节点和 gatsby-transformer-remark 插件生成的节点之间建立显式连接，我将如何以及在哪里执行此操作？我一直在研究类似的问题，但仍然对最有效的方法感到困惑。感谢您的帮助！

【问题讨论】：

标签： json graphql markdown gatsby

【解决方案1】：

您不需要进行额外的显式连接。 gatsby-node.js API 允许您在执行操作时创建动态页面。在这种情况下，您的 JSON 将是生成相册页面的来源。比如：

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions
  const result = await graphql(`
   query {
     allAlbumsJson(sort: {fields: releaseDate, order: DESC}) {
       edges {
         node {
           id
           title
           slug
           releaseDate
         }
       }
     }
   }
 `)
  result.data.allAlbumsJson.edges.forEach(({ node }) => {
    createPage({
      path: `/album/${node.fields.slug}`,
      component: path.resolve(`./src/templates/album.js`),
      context: {
        title: node.fields.title,
      },
    })
  })
}

修改自：https://www.gatsbyjs.com/docs/tutorial/part-seven/

使用上面的 sn-p，您可以通过 GraphQL 查询所有专辑，并根据 /album/${node.fields.slug} 中的 slug 字段为每个专辑创建页面。然后，您将告诉 Gatsby 哪个模板将保存您的模板逻辑 (/templates/album.js)。 Gatsby 允许您使用 pageContext (context) 将数据发送到页面和模板，这将用于过滤降价。在这种情况下，正如您所说，我们正在发送标题。

在您的模板中，现在您只需要获取传递的字段并获取数据：

import React from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout"

export default function Album({ data }) {
  const album = data.markdownRemark;
  console.log("your album data is", data);

  return (
    <Layout>
      <div>
        <h1>{album.frontmatter.title}</h1>
      </div>
    </Layout>
  )
}
export const query = graphql`
  query($title: String!) {
    markdownRemark(fields: { title: { eq: $title } }) {
      html
      frontmatter {
        title
      }
    }
  }
`

*注意：查询可能会有所不同，因为我在不知道您的数据结构的情况下根据 Gatsby 的教程修改代码。在 localhost:8000/___graphql* 的 GraphQL 操场上测试它

关键部分在 GraphQL 查询端。您告诉 GraphQL 将收到一个不可为空的（如要求的，带有感叹号，!）字符串，即$title。如果文件系统设置正确，Gatsby 在构建时将能够生成 GraphQL 节点 (markdownRemark)，您可以根据您为 gatsby-node.js 发送的每张专辑的字段过滤它们。

【讨论】：