Implementing pagination via fetchMore in graphql_flutter package re-renders the whole GridView

Question

I am new to flutter. I am trying to implement infinite scroll with the help of fetchMore() using the graphql_flutter package. I want to display a gridview of products of a particular category. This is my query string. Here I am passing the categoryId and currrentPage dynamically. Pagesize is static (10). ->

static const query = r"""
  query GetProductByCategory($categoryId: String, $currentPage: Int) {
    products(filter: {
      category_uid: {
        eq: $categoryId
      }
    }, pageSize: 10, currentPage: $currentPage) {
      items {
        name
        sku
        description {
          html
        }
        image {
          url
        }
        price_range {
          minimum_price {
            final_price {
              currency
              value
            }
            discount {
              percent_off
            }
            regular_price {
              currency
              value
            }
          }
        }
        media_gallery {
          url
        }
      }
    }
  }
  """;

Here is the Query widget from graphql_flutter package. In this, I have written the logic for builder function and fetchMore(). I have taken reference from this ->

Query(
        options: QueryOptions(document: gql(query), variables: {
          'categoryId': widget.categoryId.toString(),
          'currentPage': currentP,
        }),
        builder: (QueryResult result,
            {VoidCallback? refetch, FetchMore? fetchMore}) {
          if (result.hasException) {
            return Text(result.exception.toString());
          }

          if (result.isLoading) {
            
            return Center(child: Text('Loading'));
          }
          
          items = result.data?['products']?['items'];

          if (items == null) {
            return const Center(
              child: Text('No Data found.'),
            );
          }

          FetchMoreOptions opts = FetchMoreOptions(
            variables: {
              'currentPage': ++currentP,
            },
            updateQuery: (previousResultData, fetchMoreResultData) {

              final List<dynamic> repos = [
                ...previousResultData?['products']['items'] as List<dynamic>,
                ...fetchMoreResultData?['products']['items'] as List<dynamic>
              ];

              fetchMoreResultData?['products']['items'] = repos;
              return fetchMoreResultData;
            },
          );


          return Column(
            children: [
              sortFilterBar(items!),
              Expanded(
                child: NotificationListener(
                  child: GridView.count(
                    crossAxisCount: certainPlatformGridCount(),
                    childAspectRatio: 0.5,
                    controller: _scrollController,
                    children: List.generate(items!.length, (index) {
                      return productsList(
                        context,
                        items![index],
                      );
                    }),
                  ),
                  onNotification: (t) {

                    if (t is ScrollEndNotification) {
                      if (_scrollController.position.pixels ==
                          _scrollController.position.maxScrollExtent) {  
                        fetchMore!(opts);
                      
                      }
                    }

                    return true;
                  },
                ),
              )
            ],
          );
        },
      ),

Still this doesn't work fine. I want to implement infinite scroll but as I scroll to the bottom of the page, it reloads the whole page and shows the products (old and new) from the start. I want that as I scroll to the bottom of the page, it reloads and new products are added to the bottom of the old products without the page reloading from the start. The screen shall remain where it is (not go to the start). Below I have attached the scrennshots for before scrolling to the bottom and after scrolling to the bottom. As you can see that before it's showing 10 products and afterwards it shows 20 products but in between the whole screen is loaded again and it shows the products from the start (top).

Before After

Kindly excuse me as this is my first question at StackOverflow. Kindly help. Thanks in advance.

Tried Implementing infinite scroll in gridview using fetchMore() from graphql_flutter package.