reactjs - 如何将 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与idof拉扯1。

如何将 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，但我喜欢这种方式；）