2016-03-28 19 views
0

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')}, 
     } 
    `, 
    }, 
}); 

cevap

2

Sadece parçanızdaki değişkeni kullanmanız gerekir. Röle Konteynerler hakkında dokümanlar ve değişkenleri here

Daha ayrıntılı bilgi edinmek için

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')}, 
     } 
    `, 
    }, 
}); 

: GraphQL olarak, değişkenler tür Bash ya da her neyse gibi, değişken adına $ prepending tarafından kullanılan

İlgili konular