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

【问题标题】：React/Apollo fetchMore reloading the whole pageReact/Apollo fetchMore 重新加载整个页面
【发布时间】：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 是否存在。

标签： reactjs apollo react-apollo

【解决方案1】：

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

if(loading)

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

<p>Loading...</p>

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

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

【讨论】：

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