Gatsby: Define static query in JavaScript?

Question

So in a page, you can define a query as an object in the javascript and it is automatically passed to the component as the data prop.

In components, that doesn't happen, and the examples I've seen show the query defined declaratively as part of the markup, then handed into a render method. I really don't like that at all.

What is the gatsby way to define a graphql query in the JS of a component and then consume it in that component.

For example:

  <Img fixed={data.logo.childImageSharp.fixed} />

This is a gatsby image using the graphql data object. But that object is only available on a page, not a component. (Right now I'm passing the data prop into the component from the page, but that ain't what I want)

Can you show where you want to use that query?

Zohaib Ijaz
– Zohaib Ijaz

2020-02-13 19:44:25 +00:00
Commented Feb 13, 2020 at 19:44 — Zohaib Ijaz
– Zohaib Ijaz, Commented Feb 13, 2020 at 19:44
@ZohaibIjaz added

mtyson
– mtyson

2020-02-13 23:03:25 +00:00
Commented Feb 13, 2020 at 23:03 — mtyson
– mtyson, Commented Feb 13, 2020 at 23:03

ksav · Accepted Answer · 2020-02-14 01:09:51Z

1

Check out useStaticQuery in the docs.

import React from "react"
import { useStaticQuery, graphql } from "gatsby"
export default () => {
  const data = useStaticQuery(graphql`
    query HeaderQuery {
      site {
        siteMetadata {
          title
        }
      }
    }
  `)
  return (
    <header>
      <h1>{data.site.siteMetadata.title}</h1>
    </header>
  )
}`

answered Feb 14, 2020 at 1:09

ksav

20.9k6 gold badges52 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Gatsby: Define static query in JavaScript?

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