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

Question

我正在尝试使用搜索组件的 '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')},
      }
    `,
  },
});

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 更新我的数据？

How to make props.relay.setVariables update my data?

relay

reactjs

relayjs