score:8

Accepted answer

That's because you can't use graphql like this in your component.

To use graphql in a component, you've got two options : useStaticQuery function or StaticQuery component, both from graphql

for useStaticQuery :

import React from "react"
import { useStaticQuery, graphql } from "gatsby"

const MyElement = () => {
  const data = useStaticQuery(graphql`
     query About {
       prismicAbout {
         data {
           intro_headline {
             text
           }
           intro_paragraph {
             text
           }
         }
       }
     }
   `)

   return (
      <StyledIntro>
        <h3>About</h3>
        <h1>{this.props.data.prismicAbout.data.intro_headline.text}</h1>
      </StyledIntro>
   )
}

export default MyElement

with staticQuery

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

const MyElement = () => {
   return(
      <StaticQuery
            query About {
              prismicAbout {
                data {
                   intro_headline {
                       text
                       }
                       intro_paragraph {
                          text
                       }
                   }
                }
             }
         `}
         render={data => (
            <StyledIntro>
               <h3>About</h3>
               <h1>{this.props.data.prismicAbout.data.intro_headline.text}</h1>
            </StyledIntro>
         )}
      />
   )
}

export default MyElement

Hope that helps you!

score:0

If you need to render the query in a class based component. This worked for me:

import React, { Component } from 'react';
import { StaticQuery, graphql } from 'gatsby';

class Layout extends Component {
  render() {
    return (
      <StaticQuery
        query={graphql`
          query SiteTitleQuery {
            site {
              siteMetadata {
                title
              }
            }
          }
        `}
        render={data => {
          return (
            <main>
              {!data && <p>Loading...</p>}
              {data && data.site.siteMetadata.title}
            </main>
          )
        }}
      />
    );
  }
}

score:4

You can only use a query like that in a page component. One option would be to just query it in the page and then pass the data in to your component as a prop. Another is to use a static query in the component.

If your query has variables in it then you can't use a static query. In that case you should either query it all in the page and then pass it in, or you can put the part of the query related to that component in a fragment within that component's file and then use that fragment in the page query.

Example of using fragments in a component and then passing the data into the component:

// MyComponent.js
import React from "react"
import { graphql } from 'gatsby'

const MyComponent = (props) => {

  const { myProp: { someData } }  = props

  return (
    <div>
        my awesome component
    </div>
  )
}

export default MyComponent

export const query = graphql`
  fragment MyAwesomeFragment on Site {
     someData {
         item
     }
  }
`
// MyPage.js
import React from "react"
import { graphql } from "gatsby"

import MyComponent from "../components/MyComponent"

export default ({ data }) => {
  return (
    <div>
      {/*
        You can pass all the data from the fragment
        back to the component that defined it
      */}
      <MyComponent myProp={data.site.someData} />
    </div>
  )
}
export const query = graphql`
  query {
    site {
      ...MyAwesomeFragment
    }
  }
`

Read more about using fragments in Gatsby docs.


Related Query

More Query from same tag