Graphql、react-apolloコンポーネントの状態をロードするときに変数をクエリに渡す方法

Question

私は、ユーザがそれを求めるときにサーバからデータをロードする必要がある単純な反応コンポーネントを持っています。問題は、私は動的変数speakerUrlを転送する方法を知らないし、コンポーネント負荷状態の前にそれにアクセスすることです。確かに私はthis.props.paramsからアクセスすることができますが、コンポーネントがロードされていないので、私はgraphqlクエリを作成するときにアクセスできません。クエリ - QuerySpeakerはうまくいきました。マニュアルでurl変数を設定しました。

ルータ

<Route path="/speaker/:speakerUrl" component={SpeakerPage} /> 

コンポーネント - SpeakerPage

import React from 'react'; 
import { graphql } from 'react-apollo'; 

import { QuerySpeaker } from '../redux/graphql/querys'; 

class SpeakerPage extends React.Component { 
    render() { 
     console.log(this.props); 
     return (
      <div className="ui container"> 
       <div className="ui grid"> 
        <div className="row"> 
         Hello 
        </div> 
       </div> 
      </div> 
     ) 
    } 
} 

export default graphql(QuerySpeaker, { 
    options: ({ url }) => ({ variables: { url } }) <- here is my problem, how can i set this url variable? 
})(SpeakerPage); 

Answer 1

react-apollodocumentationに基づいて、options関数に渡される引数は、小道具がコンポーネントに渡されるオブジェクトです。 react-routerがコンポーネントをレンダリングするとき、それはparamsを支柱として渡します。つまり、paramsは、options関数に渡されるオブジェクトのプロパティでなければなりません。

export default graphql(QuerySpeaker, { 
    options: (props) => ({ variables: { url: props.match.params.speakerUrl } }) 
})(SpeakerPage);