Как создавать динамические компоненты

Я вижу возможность минимизировать передачу сетевых байтов моего веб-сайта, но не могу найти подходящего решения.

В Gatsby я использую файлы .mdx. В этих файлах я могу использовать компоненты React, такие как: <Cards id = "id_1" />

В файле .json определены десятки карточек, которые можно использовать на веб-сайте, просто вызвав этот компонент в файле mdx и передав их идентификатор.

Компонент «Карты» выглядит примерно так:

import React from 'react'
import Img from 'gatsby-image';
import { StaticQuery, graphql } from 'gatsby';


const Cards = (props) => {
    const card_id = props.id ? props.id.slice(0, 2) : []  // grab id

    return <StaticQuery
        query = {graphql`
        query Query  {
                    images: allFile(filter: { sourceInstanceName: { eq: "card-images" } }) {
                        edges {
                            node {
                                childImageSharp {
                                    fluid(maxHeight: 256, quality: 100) {
                                        ...GatsbyImageSharpFluid_withWebp
                                        ...GatsbyImageSharpFluidLimitPresentationSize
                                    }
                                }
                                name
                            }
                        }
                    }
                    allCardsJson {
                        nodes {
                            name
                            id
                        }
                    }
                }
        `}
        render = {(data) => {
            
            return(
               // returns a component by filtering 'data' by 'card_id'
            )
        }}
    />
}

Все работает нормально, но...

При использовании этого компонента полный результат StaticQuery (имеется в виду: все карточки, так как фильтрация выполняется внутри возврата, а не внутри статического запроса) отправляется посетителям страницы. Это не нужно и приводит к пустой трате пропускной способности сети, потому что, например, на странице используется только одна карта (или несколько).

Я понимаю, что StaticQuery является... статическим. Таким образом, я не могу динамически фильтровать в этом запросе, чтобы ограничить размер результата.

DynamicQuery используются при построении страниц, а не внутри компонентов.

Можно ли каким-то образом создавать компоненты с динамическим содержимым (определенным где-то еще), но ограничиваться только необходимыми данными? (например, предоставив идентификатор, как я пробовал)

Я думаю о создании отдельного файла для каждой карты. Затем импортируйте необходимые карты в файл mdx и передайте его компоненту. Мысли?

Документации по моему варианту использования нет. Это заставляет меня задаться вопросом, использую ли я его по назначению.

🤔 А знаете ли вы, что...
JavaScript был первоначально создан для улучшения интерактивности веб-страниц.