Как создать одну галерею с несколькими запросами GraphQL?

Question

Я создаю галерею с отдельными разделами (на улице и в ресторане). Проблема заключается в том, как элемент lighbox разбивается на страницы между разделами.

Изображения для этих разделов хранятся в каталогах с соответствующими именами.

У меня есть два отдельных запроса GraphQL, которые извлекают изображения из этих соответствующих каталоги, которые выглядят примерно так:

outdoors: allFile(filter: { relativeDirectory: { eq: "outdoors" } } sort: { fields: name }){
      edges {
        node {
          id
          thumb: childImageSharp {
            fluid(maxWidth: 270, maxHeight:270) {
              ...GatsbyImageSharpFluid
            }
          }
          full: childImageSharp {
            fluid(
              maxWidth: 1280
              quality: 85
              srcSetBreakpoints: [576, 768, 992, 1200]
            ) {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    }

restaurant: ---similar to outdoors---

Я сопоставляю эти изображения, создаю свои полноразмерные изображения и миниатюры и передаю их в используемую библиотеку галереи ( this один из Browniebroke, хотя я ожидаю, что этот вопрос является универсальным и не из-за этой библиотеки). Вот так:

const fullSizeOutdoors = data.outdoors.edges.map(edge => edge.node.full.fluid.src)
const thumbsOutdoors = data.outdoors.edges.map(edge => edge.node.thumb.fluid)

const fullSizeRestaurant = data.restaurant.edges.map(edge => edge.node.full.fluid.src)
const thumbsRestaurant = data.restaurant.edges.map(edge => edge.node.thumb.fluid)

<div id="outdoors">Outdoors</div>
<div>
    <Gallery images={fullSizeOutdoors} thumbs={thumbsOutdoors} />
</div>

<div id="restaurant">Restaurant</div>
<div>
    <Gallery images={fullSizeRestaurant} thumbs={thumbsRestaurant} />
</div>

Все это работает очень хорошо. Однако, когда пользователь перемещается по изображениям в лайтбоксе с помощью стрелок и достигает конца изображений на открытом воздухе, они возвращаются к началу изображений на открытом воздухе. Желаемое поведение, чтобы продолжить на Ресторан изображения

Я могу понять, почему это происходит; первая созданная мной Галерея имеет знания только об изображениях на открытом воздухе, поэтому она не может передать пользователя в следующие разделы. Как мне настроить его так, чтобы он обладал этими знаниями?

Очевидный ответ - поместить все изображения в один запрос и одну Галерею. Это будет работать нормально, но тогда я потеряю отдельные div с отдельными id, которые я использую, чтобы позволить пользователю перемещаться между миниатюрами с помощью кнопок навигации.

(Выше приведено большое упрощение, но я Я думаю, это доходит до сути моей проблемы. На самом деле существует гораздо больше, чем два раздела и сотни изображений.)