如何让 props.relay.setVariables 更新我的数据？答案

【问题标题】：How to make props.relay.setVariables update my data?如何让 props.relay.setVariables 更新我的数据？
【发布时间】：2016-07-15 22:40:21
【问题描述】：

我正在尝试使用搜索组件的“onChange”来使用 this.props.relay.setVariables 过滤结果，但没有重新渲染。我也希望当它过滤时，它仍然会使用 Shuffle 组件。我们正在预先访问数据库，所有这些后续中继查询都来自缓存（不确定这是否相关）。

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

【问题讨论】：

标签： reactjs relayjs relay

【解决方案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的文档

【讨论】：