Question

我正在尝试创建一个组件，以后可以像<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

Answer 1

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

如果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不会解释该片段正在使用它。

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

1 个答案: