我有一个简单的react组件,当用户提出请求时,必须从服务器加载数据.问题是我不知道如何传输动态变量speakerUrl并在组件加载状态之前访问它.当然我可以从this.props.params访问它,但是组件未加载,当我进行graphql查询时我无法访问它.查询 – 当我手动设置url变量时,QuerySpeaker工作正常.
路由器
<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 );
解决方法
基于react-apollo
documentation,传递给options函数的参数是传递给组件的props对象.当react-router呈现你的组件时,它会将params作为prop传递给它.这意味着params应该是传递给options函数的对象的属性.
export default graphql(QuerySpeaker,{
options: (props) => ({ variables: { url: props.match.params.speakerUrl } })
})( SpeakerPage );
