时间戳

首页 > 解决方案 > 如何使用 gatsby 将值传递到 GraphQL 查询并做出反应？

reactjs - 如何使用 gatsby 将值传递到 GraphQL 查询并做出反应？

问题描述

我正在尝试通过项目 id 使用 graphql 从我的数据库中获取一些东西，但我不确定如何将一个值传递给 graphql 来获取它。


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

标签： reactjsgraphqlgatsby

解决方案

扩展@ehrencrona 的答案。使用 a 而不是标准的公共查询的主要目的staticQuery是获取静态数据是完全正确的，因此，它们不接受值以及其他限制/差异，例如：

  • 页面查询可以接受变量（通过pageContext）但只能添加到页面组件
  • StaticQuery不接受变量（因此名称为“静态”），但可以在任何组件中使用，包括页面
  • StaticQuery不适用于原始 React.createElement 调用；请使用 JSX，例如<StaticQuery />

参考：https ://www.gatsbyjs.org/docs/static-query/

然而，由于 React Hooks (since v16.8) 的出现，它们有一个巨大的好处，而不是页面查询，而且它是使用useStaticQuery钩子。尽管具有（几乎）与它们相同的限制，但staticQuery它们具有这些好处。

  • 更清洁
  • 更具可读性
  • 更加雾化

从：

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

至：

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

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

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

Gatby 的文档中有关useStaticQueryhook的更多信息。

对于答案，您应该在那里使用“硬编码”值：

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

推荐阅读