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

Question

概括

我使用 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 上也有人问过这个问题，并给出了指导。在这里阅读更多

标签： javascriptwordpressgraphqladvanced-custom-fieldsgatsby

Answer 1

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

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