Graphql, react-apollo 변수로드시 구성 요소 상태를 쿼리에 전달하는 방법

Question

사용자가 요청할 때 서버에서 데이터를로드해야하는 간단한 반응 구성 요소가 있습니다. 문제는 동적 변수 speakerUrl을 전달하고 구성 요소로드 상태 이전에 액세스하는 방법을 모르겠다는 것입니다. 물론 내가 this.props.params에서 액세스 할 수 있지만 구성 요소가로드되지 않으며 내가 graphql 쿼리를 만들 때 액세스 할 수 없습니다. 쿼리 - QuerySpeaker 잘 수동으로 url 변수를 설정할 때 작동합니다.

라우터

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

는 요소 - SpeakerPage

react-apollo documentation 기준

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

상기 options 함수에 전달 된 인수는 소품 부품으로 전달 목적으로한다. react-router이 구성 요소를 렌더링하면 params을 받침으로 전달합니다. 즉, params은 options 함수에 전달 된 객체의 속성이어야합니다.

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