如何将参数传递给组件查询（非静态）？答案

【问题标题】：How to pass an argument to a components query (non-static)?如何将参数传递给组件查询（非静态）？
【发布时间】：2019-12-09 20:18:08
【问题描述】：

我正在尝试创建一个以后可以在我的网站上重复使用的组件，例如<TimeToRead id={someId}/>。我的想法是将该 id 进一步向下传递到查询中。

但这不起作用并最终出现在：TypeError: Cannot read property 'edges' of undefined。为什么会这样，我在这里做错了什么？

createPage(... context: id: someId) 在 gatsby-node.js 中是传递参数的唯一方法吗？但这仅适用于模板...

如何将参数传递给组件？

import React from "react"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { faClock } from "@fortawesome/free-solid-svg-icons"
import { graphql } from "gatsby"

const TimeToRead = ({id}) => {
  console.log(id)

  return (
    <React.Fragment>
      <FontAwesomeIcon icon={faClock} /> {timeToReadQuery.allMarkdownRemark.edges.node.timeToRead} ~ min.
    </React.Fragment>
  )
}

export const timeToReadQuery = graphql`
  query timeToReadQuery($id: String!) {
    allMarkdownRemark(
      filter: { id: { eq: $id } }
    ) {
      edges {
        node {
          timeToRead
        }
      }
    }
  }
`

export default TimeToRead

【问题讨论】：

不是 gatsby 用户，所以只是一个假设 based on docs：这是一个静态查询，所以 cannot take variables
有open ticket在静态查询中添加变量的支持，仍然开放一年
感谢您的回复，但我的查询并不是静态的，据我所知
"为了让 Gatsby 以不同的方式处理静态和普通查询，它会在 babel-plugin-remove-graphql-queries 中查找 3 个特定情况：" 以及稍后的 "3. 使用 gql 标记的模板表达式标签”。我相信这正是您在 const timeToReadQuery 中所做的

标签： reactjs graphql gatsby

【解决方案1】：

在 Gatsby 中有两种类型的查询。页面查询只能在页面组件中定义并接受在createdPage() 中作为context 传递的参数，以及不访问变量且可以在任何地方使用但每个文件限制为一个的静态查询。

如果您TimeToRead 组件文件不是页面组件，那么您有 2 个选项：

使用a static query - 你不能在其中包含变量。
定义一个用于父页面组件的 graphql 片段。

// in child component 
export const remarkTimeToReadFragment = graphql`
fragment RemarkTimeToRead on Query {
  postTimeToRead: markdownRemark(id: { eq: $id }) {
    timeToRead
  }
}`

// in page component
export const pageQuery = graphql`
query PageQuery($id: String!) {
  ...RemarkTimeToRead
}
`

此特定示例可能会产生警告，因为 $id 参数未直接在页面查询中使用，并且 linter 不会考虑它被片段使用。

【讨论】：