Gatsby 的 GraphQL 查询 - 具有灵活内容模型的内容设置

Question

我有一个 gatsby 网站，其中包含 contentful 插件 和 graphql 查询（设置正常）。

[编辑] 我的 gatsby 设置使用 pageCreate 功能动态提取数据。并填充我的模板组件，即我在下面共享的根 graphql 查询。如果内容页面遵循以下查询中给出的结构，我可以使用设置创建多个页面。 [/编辑]

我的问题是关于我似乎遇到的一个限制，或者只是不知道足够的 grpahql 来理解这一点。

我的高级内容模型“BasicPageLayout”包含通过字段“Section”对其他内容类型的引用。因此，在“BasicPageLayout”中包含哪些内容类型以及添加它们的顺序方面，它是灵活的。

根页面查询

export const pageQuery = graphql`
query basicPageQuery {
contentfulBasicPageLayout(pageName: {eq: "Home"}) {

    heroSection {
        parent {
            id
        }
        ...HeroFields
    }

    section1 {
        parent {
            id
        }
        ...ContentText

    }

    section2 {
        parent {
            id
        }
        ...ContentTextOverMedia
    }

    section3 {
        parent {
            id
        }
        ...ContentTextAndImage
    }

    section4 {
        parent {
            id
        }
        ...ContentText
    }
  }
}

内容类型片段都存在于各自的 UI 组件中。 上述查询和设置工作正常。

现在，我对“Home”进行了硬编码，因为我无法创建灵活的可重用查询。我在创建模型时利用了 contentful 的灵活特性，但还没有找到一种方法在 graphql 查询中为其创建这种灵活性。

我所知道的： Graphql 查询是在运行时解析的，因此需要获取的所有内容都应该在该查询中。它不能是“动态的”。

问题： basicPageLayout 中的“Section”字段可以链接到任何内容类型。所以我们可以混合和匹配粒度级别的内容类型。如何添加内容类型片段（如 ContentTextAndImage 与 ContentText），使其适合该部分实例（查询中的“Section”字段）？

换句话说 我希望根查询获取可能有 4 个部分的“主页”数据，所有类型 - ContentTextOverMedia 以及可能也有 4 个部分但类型交替的“关于”数据 - ContentText 和 ContentTextAndImage

这是目标，因为我想通过在内容上混合匹配内容类型来创建内容（页面），而无需在每次创建新页面时更新代码。这就是为什么 Contentful 很有用并且首先被选中的原因。

到目前为止我的想法：

A.连续运行两个查询。一个获取每个部分的 parent.id 并保存内容类型信息。第二次使用适当的片段获取数据。

B.通过 Contentful API 分别获取 basicPageLayouts 内容实例（例如“Home”）的 JSON 文件，并使用该 JSON 文件创建要在每个实例中使用的 graphql 字符串（因此，Home、About 等不同的布局） 这需要更多的实验，不确定它是否可行，也可能比它需要的更复杂。

所以，请分享我正在探索的上述路径或我没有考虑使用 graphql 或 gatsby 功能的其他解决方案的想法。

这是我关于 SO btw 的第一个问题，我花了一些时间来完善它并尝试遵循指南，但请务必在 cmets 中给我反馈，这样即使您没有我的答案，我也可以改进题。 提前致谢。

Answer 1

如果我理解正确，您想根据来自 Contentful 的数据动态创建页面。

您可以使用 Gatsbyjs 节点 API 特别是 createPage 来实现这一点。

在您的gatsby-node.js 文件中，您可以拥有类似的内容

const fs = require('fs-extra')
const path = require('path')

exports.createPages = ({graphql, boundActionCreators}) => {
  const {createPage} = boundActionCreators
  return new Promise((resolve, reject) => {
    const landingPageTemplate = path.resolve('src/templates/landing-page.js')
    resolve(
      graphql(`
        {
          allContentfulBesicPageLayout {
            edges {
              node {
                pageName
              }
            }
          }
        }
      `).then((result) => {
        if (result.errors) {
          reject(result.errors)
        }
        result.data.allContentfulBesicPageLayout.edges.forEach((edge) => {
          createPage ({
            path: `${edge.node.pageName}`,
            component: landingPageTemplate,
            context: {
              slug: edge.node.pageName // this will passed to each page gatsby create
            }
          })
        })
        return
      })
    )
  })
}

现在在你的src/templates/landing-page.js

import React, { Component } from 'react'
const LandingPage = ({data}) => {
    return (<div>Add you html here</div>)

}
export const pageQuery = graphql`
query basicPageQuery($pageName: String!) {
contentfulBasicPageLayout(pageName: {eq:  $pageName}) {

    heroSection {
        parent {
            id
        }
        ...HeroFields
    }

    section1 {
        parent {
            id
        }
        ...ContentText

    }

    section2 {
        parent {
            id
        }
        ...ContentTextOverMedia
    }

    section3 {
        parent {
            id
        }
        ...ContentTextAndImage
    }

    section4 {
        parent {
            id
        }
        ...ContentText
    }
  }
}

注意$pageName 参数，这是在创建页面时传递给组件上下文的内容。 这样，您最终将创建任意数量的页面。 请注意：代码的反应部分没有经过测试，但我希望你明白。

更新： 要进行灵活的查询，而不是将内容类型作为单个 ref 字段，您可以拥有一个名为 section 的字段，您可以按您想要的顺序在其中添加您想要的部分。 您的查询将如下所示

    export const pageQuery = graphql`
    query basicPageQuery($pageName: String!) {
    contentfulBasicPageLayout(pageName: {eq:  $pageName}) {
       sections {
         ... on ContentfulHeroFields {
           internal {
              type
        }
    }
}         

}

哈立德