GraphQL query in component directory

[exrishu]

Hi All,
I have made a component inside src/components and used graphQl for rendering the content.
But when I am calling component in src/pages it is showing the error.

// in src/components/service.js

import React from 'react'
import Link from 'gatsby-link'

class Service extends React.PureComponent{
   render(){
      const data = this.props
       return(
        <section className="services">
        <div class="container">
          <div class="row">
              <div class="col-lg-12 text-center">
                  <h2 class="section-heading">{data.allServiceYaml.edges[0].node.heading}</h2>
                  <hr class="primary"/>
              </div>
          </div>
      </div>
      
      <div className="container">
       <div className="row">
        <div className="col-lg-3 col-md-6 text-center">
          <div className="service-box">
           <i className="fa fa-4x"></i>
              <h3></h3>
              <p className="text-muted"></p>
           </div>
          </div>
        </div>
      </div>
      
  </section>
     )

   }
}
export default Service
export const query = graphql`
query ServiceQuery{
    allServiceYaml{
      edges{
        node{
          heading
          list{
            title
            icon
            description
          }
        }
      }
    }
  }

`
// in src/pages/index.js  

import React from 'react'
import Link from 'gatsby-link'
import Banner from '../components/Banner'
import Service from '../components/Service'


const IndexPage = ({data}) => (
  <div>
    <Banner/>
    <Service data = {data} />
  </div>
)

export default IndexPage

IS there is anyway I can pass the data along with component

[jquense]

Hey there, queries aren't supported in components that aren't "top level" ones, you need to use fragment composition, we recently just improved the documentation and error around this, check out: #3786

[jquense]

also: https://www.gatsbyjs.org/docs/querying-with-graphql/#fragments

[exrishu]

@jquense Thanks, Implemented and worked :)

[franva]

Hi @exrishu can you please share how did you do it?

Thanks