2016-10-29 4 views
0

コンポーネント外のルートで提供されているURLパラメータにアクセスできますか?反応ルータからコンポーネントの外部にあるURLパラメータをGraphQLクエリで使用するにはどうすればいいですか

これはもちろんwindow.locationで達成できますが、これをもっときれいにするために反応ルータ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} /> 

答えて

2

私が反応し、アポロと本当に慣れていないんだけど、私は次のようにあなたが望むものを達成するための良い方法だと思います。あなたはoptionsは、オプションを使用してオブジェクトを返す、入力としてコンポーネントの小道具を取る関数とすることができるというドキュメントで見ることができる :http://dev.apollodata.com/react/queries.html#graphql-options

だから私はあなたが行うことができると思います。上記のコードで

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

を、props.paramsは、反応ルータがルートコンポーネントに渡すパラメータです(そこには特別なものはありません)。

実行時に何か動的に行う必要がある場合は、この場合はoptionsを関数として書き込みたいとします。この場合、ルートパラメータにアクセスします。

希望します。

+0

ええと、そのトリックでした。私はドキュメントで、それを見つけていただきありがとうございました! – Jazzy

関連する問題