I have a problem trying to do a pagination / fetchMore button for a list of data on my webapp. My problem is that when I click on the fetchMore button the whole page is reloading, old school style, while I would like only the updated list of 'calculs' to be reloaded but not the rest of the query (users...).

Is there a way to limit what is updated after a fetchMore ? Don't want the whole DOM to be rerendered.

I also tried to send a specific query, only refecthing what I need, but I got an error as well.

Here is the needed part of the code:

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;

1 Answers

0
Ivo On Best Solutions

Actually, I found out the problem was linked to my query. As I was querying the whole needed data for my Component and as I had a

if(loading)

statement, the whole page was loading again each time the refecthing was taking place and therefore the whole page was rendering the

<p>Loading...</p>

even if the loading time was very small -> that caused my full page "refreshed"

In order to solve this issue I have created a child component that include also an Apollo Query component but only the query that I want to be refetched. The parent component with the user, adminCalculations and adminUsers query is not pointlessly refreshed and only the needed child query refetches and rerenders.