title: How to create dynamic components
body: <p>I see opportunities to minimize network bytes transfer of my website, but can't come up with a proper solution.</p>
  <p>In Gatsby, I make use of .mdx files. In these files I can use React Components, such as:
  <code>&lt;Cards id=&quot;id_1&quot; /&gt;</code></p>
  <p>There are dozens of cards defined in a .json file, which can be used across the website by just calling this component in de mdx file and passing their id.</p>
  <p>The Cards component looks like somewhat like this:</p>
  <pre><code>import React from 'react'
  import Img from 'gatsby-image';
  import { StaticQuery, graphql } from 'gatsby';
  
  
  const Cards = (props) =&gt; {
      const card_id = props.id ? props.id.slice(0, 2) : []  // grab id
  
      return &lt;StaticQuery
          query={graphql`
          query Query  {
                      images: allFile(filter: { sourceInstanceName: { eq: &quot;card-images&quot; } }) {
                          edges {
                              node {
                                  childImageSharp {
                                      fluid(maxHeight: 256, quality: 100) {
                                          ...GatsbyImageSharpFluid_withWebp
                                          ...GatsbyImageSharpFluidLimitPresentationSize
                                      }
                                  }
                                  name
                              }
                          }
                      }
                      allCardsJson {
                          nodes {
                              name
                              id
                          }
                      }
                  }
          `}
          render={(data) =&gt; {
              
              return(
                 // returns a component by filtering 'data' by 'card_id'
              )
          }}
      /&gt;
  }
  </code></pre>
  <p>Everything works fine, but...</p>
  <p>When this component is used, the <strong>full result of StaticQuery</strong> (meaning: all cards since filtering is done inside the return, not inside the staticquery) is send to visitors of the page. This is unnecessary and a waste of network bandwidth, because for example only one card (or a few) is used on the page.</p>
  <p>I understand that a StaticQuery is .. static. Thus, I cannot dynamically filter within this query to limit the size of the result.</p>
  <p>DynamicQuerys are used when building pages, not inside components.</p>
  <p>Is it possible to somehow create components with dynamic content (defined elsewhere), but limited to just the required data? (like by providing an id like I've tried)</p>
  <p>I am thinking about creating a seperate file for each Card. Then import the Cards needed into the mdx file and passing it to the component. Thoughts?</p>
  <p>There is no documentation about my use case. This makes me wonder if I'm using it as intended.</p>