React/Apollo fetchMore 重新加载整个页面

Posted 2023-03-10

【中文标题】React/Apollo fetchMore 重新加载整个页面

【英文标题】：React/Apollo fetchMore reloading the whole page

【发布时间】：2019-08-23 22:47:03

【问题描述】：

我在尝试为我的 web 应用程序上的数据列表执行分页/fetchMore 按钮时遇到问题。我的问题是，当我单击 fetchMore 按钮时，整个页面正在重新加载，这是老式的风格，而我只想重新加载更新的“计算”列表，而不是查询的其余部分（用户......）。

有没有办法限制 fetchMore 后更新的内容？不希望重新渲染整个 DOM。

我也尝试发送一个特定的查询，只是重新整理我需要的，但我也收到了一个错误。

这里是需要的代码部分：

export const query = gql`
    query UserAndData($limit: Int!) 
        user 
            _id,
            nom,
            prenom,
            email,
            isAdmin
        
        adminCalculations 
            _id,
            lastUpdated,
            comments
        
        adminUsers 
            _id,
            lastConnect,
            nom,
            prenom,
            email,
            societe
        
        calculs(limit: $limit) 
            _id,
            userId,
            date,
            duration,
            user 
                email
            
        
        count
    
`

class Admin extends Component 

    state = 
        limit : 100,
    

    render() 
        return(
            <Query query=query variables= limit : this.state.limit fetchPolicy="cache-and-network">
                ( loading, error, data, fetchMore ) => 
                    if (loading) return <p>Loading...</p>;
                    if (error) return <p>Error</p>;
                    console.log(data);
                    if (!data || (!data.user || !data.user.isAdmin))
                        return (<Redirect to="/" />)
                    
                    return(
                        <div className="admin">
  (lot of coding and rendering users list, calculs lists, etc...)

   <div className="bouton" onClick=() => 
       fetchMore(                               
          variables :  limit : this.state.limit + 100 ,
          updateQuery : (prev,  fetchMoreResult ) => 
          if (!fetchMoreResult) return prev;
          return Object.assign(, prev,  calculs : 
          fetchMoreResult.calculs );
      

                                                )
                                                this.setState( limit : this.state.limit + 100 )
                                            
                                                >Charger plus de calculs</div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        )
                    
                </Query>
            )
        
    

export default Admin;

【问题讨论】：

我不确定这是否是问题所在，但肯定是有问题的。不要在渲染方法中设置状态。 React 之所以称为 React，是因为它通过新的渲染对 prop 和 state 的变化做出“反应”。您的状态位于示例的根部。这么高，当状态改变时，你的 render() 方法中的所有内容都会重新渲染。

在 onClick 操作上设置的状态看不到问题所在，除非它干扰重新获取？

出于好奇，我尝试了@mrbinky3000 想法并删除了 setState 并再次尝试但没有改变任何东西。由于它是 onclick 操作的一部分，我看不出它是如何产生问题的。

具有if (!data || (!data.user || !data.user.isAdmin)) 的if 语句重定向到“\”。当 Apollo 开始获取更多数据时，将控制台登录到那里以检查 data.user 和 data.user.isAdmin 是否存在。

【参考方案1】：

实际上，我发现问题与我的查询有关。当我查询我的组件所需的全部数据时，因为我有一个

if(loading)

声明，每次更新时整个页面都会重新加载，因此整个页面都在渲染

<p>Loading...</p>

即使加载时间非常短 -> 导致我的整个页面“刷新”

为了解决这个问题，我创建了一个子组件，其中还包括一个 Apollo 查询组件，但只包含我想要重新获取的查询。带有用户、adminCalculations 和 adminUsers 查询的父组件不会毫无意义地刷新，只有需要的子查询会重新获取和重新呈现。

【讨论】：

遇到了同样的问题，感谢您分享您的解决方案

是的。我遇到的确切问题是，loading 状态在技术上会在除第一次渲染之外的每个 fetch 事件上发生更改。直到看到你的答案才意识到这一点。我们必须真正关心查询中的阿波罗状态