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

Posted 2023-03-08

【中文标题】单个 GraphQL 查询中的多个源 (Gatsby)

【英文标题】：Multiple Sources in Single GraphQL query (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 插件生成的节点之间建立显式连接，我将如何以及在哪里执行此操作？我一直在研究类似的问题，但仍然对最有效的方法感到困惑。感谢您的帮助！

【参考方案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 发送的每张专辑的字段过滤它们。