How do I pass a value into an GraphQL query using gatsby and react?

Question

I am trying to grab something from my database using graphql by the items id, and I am not sure how to pass a value into graphql to grab it.


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

const MyCustomComponent = (props) => {
  // How do I pass this value
  let theValueIWantToPass = 5

  // into this query
  const data = useStaticQuery(graphql`
    query MyQuery {
      mongodbItems(id: {eq: "5"}){
        id
      }
    }
  `)


  return (
    <div>

    </div>
  )
}


export default MyCustomComponent

static query is for dev/build time, not run time - gatsbyjs.org/docs/data-fetching - for dynamic queries use "normal" graphql client (apollo, axios, fetch) as usual in react apps — xadm
– xadm, Commented Jul 8, 2020 at 13:55

ehrencrona · Accepted Answer · 2020-07-08 14:10:03Z

3

Static queries are called "static" because the have a single, unchanging value that is calculated when you run gatsby build. So by their very nature they cannot not take variables.

Depending on what you're trying to achieve you might use a page query. It can take parameters but these parameters are fixed for each page (in other words: a single query is executed for each page when you run gatsby build, so you must know your variables for each page at build time).

It is not possible to execute Gatsby Graph QL queries after the build step. If, for example, your something entered by the user, you can not use Gatsby queries for that use case.

answered Jul 8, 2020 at 14:10

ehrencrona

7,0221 gold badge23 silver badges29 bronze badges

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

Comments

Ferran Buireu · Accepted Answer · 2020-07-08 20:30:59Z

Extending @ehrencrona' answer. It's completely right that the main purpose to use a staticQuery rather than a standard common query is to fetch static data and because of this, they don't accept values plus other limitations/differences such as:

Page queries can accept variables (via pageContext) but can only be added to page components
StaticQuery does not accept variables (hence the name "static"), but can be used in any component, including pages
StaticQuery does not work with raw React.createElement calls; please use JSX, e.g. <StaticQuery />

Reference: https://www.gatsbyjs.org/docs/static-query/

However, they have a huge benefit rather than a page query due to the appearance of React Hooks (since v16.8) and it's the use of useStaticQuery hook. Despite having (almost) the same limitations as the staticQuery they have these benefits.

Much more cleaner
Much more readable
Much more atomized

From:

<StaticQuery
  query={graphql`
    query {
      site {
        siteMetadata {
          title
        }
      }
    }
  `}
  render={data => (
    <header>
      <h1>{data.site.siteMetadata.title}</h1>
    </header>
  )}
/>

To:

const Header = () => {
  const { title } = useSiteMetadata()

  return (
    <header>
      <h1>{title}</h1>
    </header>
  )
}

Reference: https://www.gatsbyjs.org/blog/2019-02-20-introducing-use-static-query/

More information in Gatby's documentation about useStaticQuery hook.

For the answer, you should use a "hardcoded" value there:

  const data = useStaticQuery(graphql`
    query MyQuery {
      mongodbItems(id: {eq: "5"}){
        id
      }
    }
  `)

Collectives™ on Stack Overflow

How do I pass a value into an GraphQL query using gatsby and react?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related