RelayJS无限滚动

Question

我试图在我的React-Relay前端制作无限滚动分页，但没有成功。

在这一刻，我有这个阵营组件...

class List extends Component { 
    state = { loading: false }; 

    componentDidMount() { 
    window.onscroll =() => { 
     if (!this.state.loading 
       && (window.innerHeight + window.scrollY) 
       >= document.body.offsetHeight) { 

     this.setState({loading: true},() => { 
      this.props.relay.setVariables({ 
      count: this.props.relay.variables.count + 5 
      }, (readyState) => { 
      if (readyState.done) { 
       this.setState({ loading: false }); 
      } 
      }); 
     }); 
     } 
    } 
    } 

    render() { 
    return (
     <div> 
     {this.props.viewer.products.edges.map(function(product, i) { 
      return (<Item key={i} product={product.node} />); 
     })} 
     </div> 
    ); 
    } 
}; 

...包裹在接力容器

export default Relay.createContainer(List, { 
    initialVariables: { 
    count: 5 
    }, 
    fragments: { 
    viewer:() => Relay.QL` 
     fragment on Viewer { 
     products(first: $count) { 
      total 
      edges { 
      node { 
       ${Item.getFragment('product')} 
      } 
      } 
     } 
     } 
    `, 
    } 
}); 

这背后的逻辑似乎很容易。如果您达到某个scrollY的位置，请设置为count变量新增加的值，该值将扩展您的边缘列表。

但是这个概念会导致一种情况，在开始的时候我会查询数据库的前5条记录，但是最近我一直在滚动一个will查询N + 5条记录。最后，我将查询数据库中的整个表（数千条记录）！这是非常不可接受的。

所以我试图实现一个cursors，但我不知道如何从连接中获取数据并扩展结果。这种方法返回给我一个“分页”列表。

---

此外，上述代码给我此错误，当我向下滚动

resolveImmediate.js 39d8：27未捕获不变冲突：performUpdateIfNecessary：意外批号（电流19，待18）

我会非常感谢任何帮助或示例！

Answer 1

问题解决！

关于我的每滚动一遍又一遍取N + 5所记载的关注，似乎继电器是相当聪明，因为它会自动“PAGINATE”通过查询cursor和管理after ARG我联系我连接。

，并与来自graphql-sequelize一点帮助我的后端，它只是变成这个查询

SELECT ... FROM product ORDER BY product.id ASC LIMIT 5 OFFSET 10 

里面居然解决了有关性能我的第一个问题。 :)

所以我Relay.QL查询引擎盖transpiled这个

query ListPage_ViewerRelayQL($id_0:ID!) { 
    node(id:$id_0) { 
    ...F1 
    } 
} 
fragment F0 on Product { 
    id, 
    title, 
    price 
} 
fragment F1 on Viewer { 
    _products4tSFq4:products(after:"YXJyYXljb25uZWN0aW9uJDUkNA==",first:5) { 
    edges { 
     cursor, 
     node { 
     id, 
     ...F0 
     } 
    }, 
    pageInfo { 
     hasNextPage, 
     hasPreviousPage 
    } 
    }, 
    id 
} 

，当我跑我的GraphQL后端此查询，它返回我空的结果

{ 
    "data": { 
    "node": null 
    } 
} 

然后我马上意识到哪里是问题，为什么我的继电器崩溃。

问题在于重新提取查看者。我没有正确实施nodeDefinitions，当查看者ID遇到idFetcher和typeResolver时，失败并返回null。之后，在客户端，Relay无法完成对我的连接的重新访问并崩溃！

经过小修复和修复后端端，我的无限滚动就像一个魅力！ :)