Gatsby WordPress Source - 不使用时被 graphql 忽略的灵活内容布局答案

【问题标题】：Gatsby WordPress Source - Flexible Content layouts ignored by graphql when not usedGatsby WordPress Source - 不使用时被 graphql 忽略的灵活内容布局
【发布时间】：2019-07-21 22:21:32
【问题描述】：

总结

我使用 ACF 中的灵活内容功能在 WordPress 中设置了大约 15 种不同的布局。因为有这么多，这意味着内容作者没有使用一些。当 gatsby 拉入内容并生成 graphql 数据结构时，它会根据已经使用的布局创建结构。当我设置查询以提取所有布局时，我收到一个错误，因为查询了一些在 graphql 结构中不存在的布局（因为它们没有被作者使用）。这是一个查询示例。

acf {
    content_layouts_page {
        __typename
        ... on WordPressAcf_pullout_lead_with_list {
             ...plwlFragment
        }
        ... on WordPressAcf_client_list {
            ...clFragment
        }
        ... on WordPressAcf_titled_list_with_item_description {
             ...tlwidFragment
        }
        ...more layouts defined
    }
}

问题

我如何设置我的 graphql 查询，以便在作者决定使用未使用的布局时“面向未来”。

可能的解决方案

这是我想到的解决方案，但我不确定是否可行。如果我可以查询__typename，它将返回一个数组。然后根据当前布局动态构造graphql查询。

// __typename array = ['WordPressAcf_pullout_lead_with_list', 'on WordPressAcf_client_list']
let queryString = ''
__typename.forEach(layout => {
    switch (layout) {
        case 'WordPressAcf_pullout_lead_with_list':
            queryString += '...on WordPressAcf_pullout_lead_with_list { ...plwlFragment }'
            break;
        ....
    }
})

// Use queryString in graphql query

同样，不确定这是否可能，但它肯定会解决很多问题。

Github 问题

Gatsby Github repo 上也有人问过这个问题，并给出了指导。阅读更多here

【问题讨论】：

标签： javascript wordpress graphql advanced-custom-fields gatsby

【解决方案1】：

自 2019 年 3 月 1 日起，无法动态创建 graphql 查询。这个问题的解决方案是有一个包含所有内容布局的“虚拟”页面，并在你的 graphql 查询中忽略它。尽管您忽略了它，但您的 graphql 架构将包含所有布局结构。

allWordpress(Page|Post)(filter:{slug:{ne:"dummy-page"}}) {
    edges {
        node {
            ...
        }
    }
}

【讨论】：