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

Question

如果我有这样的路线：

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

我有一个这样的查询

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

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

现在这总是将something 与1 的id 拉在一起。

如何将url参数: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

另外，对我来说，参数可以在 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，但我喜欢这种方式 ;)