Gatsby WordPress Source — гибкие макеты контента игнорируются graphql, когда они не используются

Резюме

Я настроил около 15 различных макетов в WordPress, используя функцию гибкого содержимого в ACF. Поскольку их так много, это означает, что некоторые из них не используются автором контента. Когда 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

Опять же, не уверен, что это возможно, но наверняка решит много проблем.

Проблема с гитхабом

Этот вопрос также был задан в репозитории Gatsby Github, и были даны рекомендации. Подробнее здесь

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
0
189
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

По состоянию на 1 марта 2019 года невозможно динамически создавать запросы graphql. Решение этой проблемы состоит в том, чтобы иметь «фиктивную» страницу со всеми вашими макетами контента и игнорировать ее в вашем запросе graphql. Хотя вы игнорируете это, ваша схема graphql будет содержать все структуры макета.

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

Другие вопросы по теме