![](/img/trans.png)
[英]Loading indicator after this.props.relay.setVariables triggered fetch?
[英]How to make props.relay.setVariables update my data?
我正在嘗試使用搜索組件的'onChange'使用this.props.relay.setVariables過濾結果,但沒有任何內容被重新呈現。 我也希望當它進行過濾時,仍將使用Shuffle組件。 我們正在一次訪問數據庫,而所有這些后續中繼查詢都來自緩存(不確定是否相關)。
const GamesScreen = React.createClass({
propTypes: {
viewer: PropTypes.object,
},
search (e) {
let searchStr = e.target.value;
this.props.relay.setVariables ({ query: searchStr}, onFetch);
},
onFetch (){
// does something need to happn in here to actually filter and re-render?
},
getSubjects ()
{
return this.props.viewer.subjects.edges;
},
render ()
{
const games = this.getSubjects().map(game => {
return (
<div className="Game-container" key={game.node.name}>
<Game game={game.node} />
</div>
);
});
return (
<div className="GamesScreen">
<TopContainer>
<TopBar viewer={this.props.viewer} />
</TopContainer>
<MidBar viewer={this.props.viewer} />
<input type="search" placeholder="Search" onChange={this.search} />
<div className="GamesScreen-container">
<Shuffle duration={300} fade>
{games}
</Shuffle>
</div>
</div>
);
},
});
export default Relay.createContainer(GamesScreen, {
initialVariables: {
query: '',
},
fragments: {
viewer: () => Relay.QL`
fragment on Viewer {
subjects(query: "", first: 5)
{
edges {
node {
name
}
}
},
${TopBar.getFragment('viewer')},
}
`,
},
});
您只需要在片段中使用變量。 在GraphQL中,通過在變量名前加$
來使用變量,有點像bash或其他名稱:
export default Relay.createContainer(GamesScreen, {
initialVariables: {
query: '',
},
fragments: {
viewer: () => Relay.QL`
fragment on Viewer {
subjects(query: $query, first: 5) // <-- USE $query TO MODIFY FRAGMENT AT RUNTIME
{
edges {
node {
name
}
}
},
${TopBar.getFragment('viewer')},
}
`,
},
});
有關更多詳細信息,請參見此處的有關中繼容器和變量的文檔。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.