我有一个简单的 react 组件,它必须在用户询问时从服务器加载数据。问题是我不知道如何传输动态变量 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 );
最佳答案
基于react-apollo
documentation ,传递给 options
函数的参数是传递给组件的 props 对象。当 react-router
渲染你的组件时,它会将 params
作为 prop 传递给它。这意味着 params
应该是传递给 options
函数的对象的属性。
export default graphql(QuerySpeaker, {
options: (props) => ({ variables: { url: props.match.params.speakerUrl } })
})( SpeakerPage );
关于javascript - Graphql,react-apollo 如何在加载组件状态时将变量传递给查询,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41026900/