title: How to use GraphQL queries in a container class component
body: <p></p>
  
  <p>My current <strong>GatsbyJS</strong> project is a one pager with a carousel and some other content. </p>
  
  <p><strong>Background</strong></p>
  
  <p>The carousel should be filled with information about some products. My goal is to let the carousel build itself by iterating through all markdown files, picking the ones with these three lines at the top of the file:</p>
  
  <pre><code>---
  type: product
  ---
  </code></pre>
  
  <p>So I've created a <code>CarouselContainer</code> (class component) and a <code>Carousel</code> component (functional component). The Container should load the markdown via GraphQL query and pass the resulting products object to it's nested component. Then the component should map over the object and create the carousel.</p>
  
  <p>But there are also other markdown files for menu lists, text modals and so on. They have the <code>type: page</code>. I thought preparing a few GraphQL queries would be the solution. But it turned out to be more difficult than expected... </p>
  
  <p>The container component is a class component, so I am not able to call the query directly in it (<a href="https://github.com/gatsbyjs/gatsby/issues/3991#issuecomment-364939030" rel="noreferrer">https://github.com/gatsbyjs/gatsby/issues/3991#issuecomment-364939030</a>).</p>
  
  <p>Then I thought putting multiple queries into the <code>pages/index.js</code> could be the solution. </p>
  
  <pre class="lang-js prettyprint-override"><code>export const indexQuery = graphql`
  query IndexQuery {
    allMarkdownRemark(filter: {frontmatter: {type: {eq: "page"}}}) {
      edges {
        node {
          frontmatter {
            title
            text
          }
        }
      }
    }
  }
  `
  
  export const productsQuery = graphql`
  query ProductsQuery {
    allMarkdownRemark(filter: {frontmatter: {type: {eq: "product"}}}) {
      edges {
        node {
          id
          frontmatter {
            title
            content
          }
        }
      }
    }
  }
  `
  </code></pre>
  
  
  
  <p>Nope again. Using GraphQL fragments should be a solution... </p>
  
  <p><strong>Q</strong> Can someone tell me how to prepare fragments for that purpose <strong>and/or</strong> have another idea how to get the markdown content right into my container?</p>
  
  <p>Thanks for reading.</p>