Question

我试图使用搜索组件＆＃39; onChange＆＃39;使用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

的文档

如何使props.relay.setVariables更新我的数据？

1 个答案: