中继 setVariables 不触发查询

Question

我正在学习 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')}
            }
          }
        }
      }
    `
  }
});

如您所见，那里有一个 select 可以正确触发 setLimit 处理程序...在 setLimit 中我有 this.props.relay.setVariables ...虽然我没有收到任何错误查询未被重新呈现

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

谢谢

Answer 1

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

发生这种情况的主要原因是因为 graphql 正在返回 pageIngo.hasNextPage = 假
显然我必须修复它并且我发现了两件事：

resolve: (_, args) => connectionFromPromisedArray(  
 db.collection("links").find({}).limit(args.first).toArray(),
 args
)

我正在使用上面的代码查询
如您所见，我正在限制从数据库中获取的项目
此外，connectionFromPromisedArray 函数预计是提供了整个数据数组......而不是部分响应
所以这实际上会导致 graphql 将 hasNextPage 设置为 false

希望这对任何人都有帮助 :) ...我为此浪费了一天多的时间 :)

中继 setVariables 不触发查询

relay setVariables not trigger the query

relay

reactjs

graphql