Graphql, reac-apollo cách chuyển biến truy vấn tại trạng thái tải thành phần

Question

Tôi có một thành phần phản ứng đơn giản phải tải dữ liệu từ máy chủ khi người dùng hỏi nó. Vấn đề là tôi không biết cách chuyển speakerUrl biến động và truy cập nó trước trạng thái tải thành phần. Chắc chắn tôi có thể truy cập nó từ this.props.params, nhưng thành phần không được tải và tôi không thể truy cập nó khi tôi thực hiện một truy vấn graphql. Truy vấn - QuerySpeaker hoạt động tốt khi tôi đặt biến url thủ công.

Router

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

Component - 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

Dựa trên react-apollodocumentation, đối số truyền cho options chức năng là các đạo cụ đối tượng truyền cho các thành phần. Khi react-router hiển thị thành phần của bạn, nó sẽ vượt qua thành phần params làm điểm tựa. Điều đó có nghĩa là params phải là tài sản của đối tượng được chuyển đến hàm options.

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