Gatsby WordPress来源-GraphQl在不使用时忽略了灵活的内容布局

Question

Summary

I've setup ~15 different layouts in WordPress using the Flexible Content feature in ACF. Because there are so many it means that some are not used by the content author. When gatsby pulls in the content and generates the graphql data structure, it will create the structure based on the layouts that have been used. When I set up my queries to pull in all the layouts I get an error because some layouts are queried that aren't present in the graphql structure (because they are not being used by the author). Here is an example of the query.

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
    }
}

Question

How can I set up my graphql queries that it will be "future proof " for when the author decides to use an unused layout.

Potential solution

This is a solution that I have thought of but I am not sure if it is possible. If I can just query the __typename , which will return an array. Then dynamically construct the graphql query based on the present layouts.

// __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

Again, not sure if this is possible, but it would solve a lot of problems for sure.

Github Issue

This question was also asked on the Gatsby Github repo and guidance has been given. Read more here

Answer 1

As of 1st of March 2019 it is not possible to dynamically create the graphql queries. The solution for this problem is to have a "dummy" page with all your content layouts and ignoring it in your graphql query. Although you are ignoring it, your graphql schema will contain all the layout structures.

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