如何从 react-router 外部组件获取 URL 参数以在 GraphQL 查询中使用

Question

是否可以访问组件外部路由中提供的 URL 参数？

这当然可以通过 window.location 来完成，但我正在寻找 react-router API 中的一些东西来更干净地做到这一点。

此外，如果有更标准的方法来使用 GraphQL 执行此操作，那就更好了！我只是在研究 gql 的浏览器客户端和一般 gql 的新手。

示例组件：

import React from 'react';
import { graphql } from 'react-apollo';
import gql from 'graphql-tag';
import get from 'lodash.get';

const ContractComponent = (props) => {
    ...
};

const ContractQuery = gql`query ContractQuery ($contractId: String!){
  contract(id: $contractId) {
    ...
  }
}`;

const ContractWithData = graphql(ContractQuery, {
  options: { variables: { contractId: contractId } }, // <-- var i want to pull from url params
})(ContractComponent);

export default ContractWithData;

示例路线：

<Route path="contract/:contractId" component={Contract} />

Answer 1

我对 react-apollo 不是很熟悉，但我认为以下是实现您想要的好方法。 您可以在文档中看到options 可以是一个以组件道具作为输入的函数，返回一个带有选项的对象：http://dev.apollodata.com/react/queries.html#graphql-options

所以我认为你可以这样做：

const ContractWithData = graphql(ContractQuery, {
    options: props => ({ variables: { contractId: props.params.contractId } })
})(ContractComponent);

在上面的代码中，props.params 是 react-router 传递给路由组件的参数（没什么特别的）。

当您需要在运行时执行动态操作时，您希望将options 编写为函数，在这种情况下访问路由参数。

希望对你有帮助。