props.relay.setVariablesを使ってデータを更新するには？

Question

検索コンポーネントの 'onChange'を使用してthis.props.relay.setVariablesを使用して結果をフィルタリングしようとしていますが、何も再レンダリングされません。また、フィルターをかけてもShuffleコンポーネントが使用されることを期待しています。 私たちはDBを一番上に走らせています。これらのすべての後続のリレークエリはキャッシュから来ています（それが適切かどうかはわかりません）。

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

Answer 1

フラグメント内の変数を使用するだけで済みます。 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')}, 
     } 
    `, 
    }, 
}); 

を、リレーコンテナおよび変数here

についてのドキュメントを参照してください