Bu.props.relay.setVariables kullanarak sonuçları filtrelemek için bir arama bileşeninin 'onChange'ı kullanmaya çalışıyorum ancak hiçbir şey yeniden oluşturulmuyor. Ayrıca filtre uygulandığında, Shuffle bileşenini kullanmaya devam edeceğini umuyorum. DB'nin ön tarafına bir yolculuk yapıyoruz ve tüm bu sonraki röle sorguları bir önbellekten geliyor (bunun uygun olup olmadığından emin değil).Props.relay.setVariables verilerimi nasıl günceller?
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')},
}
`,
},
});