react, gatsby - how to access GraphQL query data in react class component

Question

I've a react component named 'Header' in /src/components directory in gatsby defined as below:

import React, { Component } from "react"
import { Link } from 'gatsby'
import { StaticQuery, graphql } from 'gatsby'
import Img from "gatsby-image"
import "./header.css"

class Header extends Component {

        constructor(props) {
            super(props);
        }

        render() {
            return(
                <Img fixed={data.file.childImageSharp.fixed} />
            )
        }
    }

    export default Header

    export const query = graphql`
      query {
        file(relativePath: { eq: "logo.png" }) {
          childImageSharp {
            # Specify the image processing specifications right in the query.
            # Makes it trivial to update as your page's design changes.
            fixed(width: 125, height: 125) {
              base64
            }
          }
        }
      }
    `

I tried to use StaticQuery with function component but it didn't work. So, I want to stick to the class component syntax.

Here, the query executes fine in http://localhost:8001/___graphql

How do I access query data in react class component ?

@BenBachem yes and got TypeError: Cannot read property 'file' of undefined error — Valay
– Valay, Commented Jan 29, 2019 at 15:47
Throw a console.log(this) into your render function. I think you'll find the data prop has this info nested in it. Probably this.props.data.file I think. — serraosays
– serraosays, Commented Jan 29, 2019 at 20:31
Hey @Valay, you have to use StaticQuery with components. Global query (like you're using in this example) will be ignored by gatsby in non-page component. What is the problem that you have with StaticQuery? — Derek Nguyen
– Derek Nguyen, Commented Jan 29, 2019 at 22:55
also, if it were in a page component, you'd need to get it from props, so this.props.data.file... like @staypuftman pointed out — Derek Nguyen
– Derek Nguyen, Commented Jan 29, 2019 at 22:59
@Derek Nguyen yes you are right. I used StaticQuery and {...props} and it's working fine now. But got another issue- as I have functional component how do I add window scroll event listener. Previously I was using class component and window scroll was working fine in componentDidMount. — Valay
– Valay, Commented Jan 29, 2019 at 23:05

brettinternet · Accepted Answer · 2019-09-19 14:50:59Z

Only page component files can export a query variable to query like your example shows. See Use a page query in the Gatsby documentation.

Here's an example of StaticQuery usage with a class component. You have to wrap the class component with a functional component to make it work.

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

class CoolThing extends React.Component {
  render () {
    console.log(this.props)
    return (
      <div>
        {this.props.site.siteMetadata.title}

        {/* conditionally render directories */}
        {this.props.directories.edges && (
          <ul>
            {this.props.directories.edges.map((directory) => {
              return <li key={directory.node.id}>{ directory.node.name }</li>
            })}
          </ul>
        )}
      </div>
    )
  }
}

export default () => (
  <StaticQuery
    query={graphql`
      query {
        site {
          siteMetadata {
            title
          }
        }
        allDirectory {
          edges {
            node {
              id
              name
            }
          }
        }
      }
    `}
    render={(data) => (
      <CoolThing site={data.site} directories={data.allDirectory} />
    )}
  />
)

Here is a related discussion on the topic.

You may also consider using Gatsby's useStaticQuery hook.

Collectives™ on Stack Overflow

react, gatsby - how to access GraphQL query data in react class component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related