Содержимое GraphQL, деструктурирующее фрагменты в массиве

Возникла проблема с фрагментами в запросе графа для сайта Гэтсби, над которым я работаю, который использует Contentful в качестве CMS:

Рассмотрим следующий запрос:

export const query = graphql`
    query ComposablePageQuery($slug: String!) {
        contentfulPage(slug: { eq: $slug }) {
            __typename
            contentful_id
            slug
            sections {
                __typename
                contentful_id
                ... on ContentfulModelA {
                    fieldA
                    fieldB
                }
                ... on ContentfulModelB {
                    fieldC
                    fieldD
                }
            }
        }
    }
`;

Теперь переменная разделов представляет собой массив, который может принимать разные ссылки на модели. В моем случае у меня есть две модели, ModelA и ModelB, с тривиальными полями ради этого вопроса.

Проблема в том, что если хотя бы один экземпляр каждого из них не включен в массив разделов на конкретной странице, я получаю следующую ошибку:

There was an error in your GraphQL query:

Fragment cannot be spread here as objects of type "ContentfulModelA" can never be of type "ContentfulModelB".

Если в массиве разделов присутствуют экземпляры обеих моделей, проблем нет.

Итак, как это можно решить? Я хочу, чтобы запрос обрабатывал случай, когда ModelA OR ModelB может присутствовать в списке, но без гарантии. Это кажется разумным запросом, учитывая, что в веб-дизайне можно предвидеть, что конкретная страница может быть богата одной конкретной моделью и полностью лишена другой, а другая страница наоборот, а другая страница может сочетать в себе обе модели.

Я также пробовал явно объявлять фрагменты и заменять использование встроенных фрагментов, как показано выше, но та же ошибка сохраняется.

--

Примечание. Одним из обходных путей является создание экземпляров фиктивных записей для каждой модели и включение их в массив. модели будут изменены, чтобы включить логическую переменную, чтобы продемонстрировать, что ее на самом деле не следует использовать, а затем эти фиктивные экземпляры отфильтровываются во внешнем интерфейсе. Однако это придется делать на каждой странице, и этот подход похож на попытку заправить иголку кувалдой. Конечно, есть лучший обходной путь. Что происходит, когда в массив можно добавить десятки различных моделей?

--

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
0
52
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Я думаю, вы захотите определить тип Section как союзContentfulModelA и ContentfulModelB

union Section = ContentfulModelA | ContentfulModelB

Спасибо, это помогло, хотя мне пришлось придумать, как указать такое объединение и как связать его в функции createSchemaCustomization, экспортированной из файла gatsby-node.ts. Тем не менее, ваше предложение сработало.

Nicholas Hamilton 15.06.2024 12:43

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