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

Question

我在尝试为我的网络应用程序上的数据列表执行分页/获取更多按钮时遇到问题。我的问题是，当我单击 fetchMore 按钮时，整个页面正在重新加载，老派风格，而我只想重新加载 'calculs' 的更新列表而不是查询的其余部分（用户...... ).

有没有办法限制 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;

Answer 1

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

if(loading)

语句，每次刷新时整个页面都在重新加载，因此整个页面都呈现

<p>Loading...</p>

即使加载时间非常短 -> 这导致我的整个页面 "refreshed"

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

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

React/Apollo fetchMore reloading the whole page

reactjs

apollo

react-apollo