如何从 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 写成一个函数，在这种情况下访问路由参数。

希望对您有所帮助。

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

How do you get URL parameters from react-router outside components to use in GraphQL query

reactjs

react-router

graphql