0

我正在学习 React + Graphql + Relay ...我在这种情况下战斗了几个小时： - 我的组件看起来像这样

class Main extends React.Component {
  setLimit = (e) => {
    let newLimit = Number(e.target.value);
    this.props.relay.setVariables({ limit: newLimit });
  };
  render() {
    let content = this.props.store.linkConnection.edges.map(edge => {
      return <Link key={edge.node.id} link={edge.node} /> ;
    });
    return (
      <div>
        <h3>Links</h3>
        <select onChange={this.setLimit}>
          <option value="2" selected>2</option>
          <option value="4">4</option>
          <option value="6">6</option>
        </select>
        <ul>
          {content}
        </ul>
      </div>
    );
  };
}

Main = Relay.createContainer(Main, {
  initialVariables: {
    limit: 2
  },
  fragments: {
    store: () => Relay.QL`
      fragment on Store {
        linkConnection(first: $limit) {
          edges {
            node {
              id,
              ${Link.getFragment('link')}
            }
          }
        }
      }
    `
  }
});

如您所见，其中有一个选择正确触发了 setLimit 处理程序...在 setLimit 内我有 this.props.relay.setVariables ...虽然我没有收到任何错误，但查询没有被重新渲染

我肯定犯了一个菜鸟错误......只是不知道那是什么:)......因为我是菜鸟:)）

谢谢

4

1 回答 1

1

所以我想我会回答自己:)

  • 发生这种情况的主要原因是因为 graphql 返回 pageIngo.hasNextPage = false
  • 显然我必须修复它，我发现了两件事：
resolve: (_, args) => connectionFromPromisedArray(  
 db.collection("links").find({}).limit(args.first).toArray(),
 args
)
  1. 我正在使用上面的代码查询
  2. 如您所见，我正在限制从数据库中获取的项目
  3. 此外，connectionFromPromisedArray 函数预计将被提供整个数据数组......而不是部分响应
  4. 所以这实际上会导致 graphql 使 hasNextPage 为 false

希望这对任何人都有帮助:) ...我为此输了一天多:)

于 2016-05-22T19:40:30.367 回答