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可以是将组件props作为输入的函数，返回带有选项的对象：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传递给路由组件的params（没有什么特别之处）。

当你需要在运行时动态处理某些东西时，你想把options写成一个函数，在这种情况下访问路径参数。

希望它有所帮助。

如何从反应路由器外部组件获取URL参数以在GraphQL查询中使用

1 个答案: