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

user_4267621 0
Viewed 4870

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
graphql gatsby reactjs
2 Answers

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.

user_12478530

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
      }
    }
  `)
user_55853710
Related