Question

如果我有这样的路线：

<Route path="/something/:id" component={Something} />

我有这样的查询

const somethingQuery = gql`query getSomething {
  something(id:1) {
    name
  }
}`

export default compose(
  graphql(somethingQuery),
)(Something)

现在，这始终会something id 1。

如何将网址参数:id传递给查询id？

Answer 1

我相信你需要使用箭头功能来选择

const somethingQuery = gql`query getSomething {
  something(id:$id) {
    name
  }
}`

const somethingWithData = graphql(somethingQuery, {
  options: (ownProps) => {
    variables: {
      id: ownProps.params.id
    }
  }
})(Something)

export default somethingWithData

另外，对我来说，params在props.match中找到，所以它看起来像这样（在React Router 4中）。哦，我还将($id: ID!)参数传递给查询

const somethingQuery = gql`query getSomething($id: ID!) {
  something(id:$id) {
    name
  }
}`

const somethingWithData = graphql(somethingQuery, {
  options: (ownProps) => {
    variables: {
      id: ownProps.match.params.id
    }
  }
})(Something)

export default somethingWithData

Answer 2

要为id引入变量，您应该使用GraphQL表示法来查询变量。首先将$ id参数添加到查询参数并将其分配给id参数

const somethingQuery = gql`query getSomething {
  something(id:$id) {
    name
  }
}`

const somethingWithData = graphql(somethingQuery, {
  options: (ownProps) {
    variables: {
      id: ownProps.params.id
    }
  }
})(Something)

export default somethingWithData

您也可以像在示例中一样使用compose in export，但我喜欢这样;）

如何从prop-router / url传递prop到graphql查询？

2 个答案: