0

検索コンポーネントの「onChange」を使用して、this.props.relay.setVariables を使用して結果をフィルタリングしようとしていますが、何も再レンダリングされません。また、フィルター処理を行った場合でも、Shuffle コンポーネントが引き続き使用されることを期待しています。DB への 1 回のトリップを前もって行っており、これらの後続のリレー クエリはすべてキャッシュからのものです (それが適切かどうかはわかりません)。

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

1 に答える 1

2

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

詳細については、こちらのリレー コンテナと変数に関するドキュメントを参照してください。

于 2016-03-28T21:35:08.747 に答える