Divyank Vijayvergiya
Divyank Vijayvergiya

Reputation: 11

Graphql Pagination using flutter fetchmore callback calling builder method again which is refreshing my listview again from index 0

I am trying to use graphql_flutter plugin to fetch data from graphql API in this I have pagination using the offset if the offset is 0 it fetches the first 10 items if offset increases by 1 it fetches the next 10 so when I am using fetchmore callback method of graphql query it calls my builder method again which is refreshing my list again which I do not want I want once user scroll at maximum position data loads from that position only it should not reload my list and add data it just adds data to my list below is my query

my build method code

 Widget build(BuildContext context) {
    // TODO: implement build
    MoengageFlutter.getInstance()
        .trackEvent(StringConstants.loanListingScreen, null);
    // Analytics().logCustomEvent(StringConstants.loanListingScreen, null);
    // if (offset == 0) {
    getLoanProducts =
        """query(\$offset: Int!, \$confKey: String!, \$operator: String!) {
    user{
        products(product_id: "",filter:[{
            setting_type: "sort",
            setting: [
                {
                    conf_key: \$confKey,
                    operator: \$operator
                },
            ]
        }
        ], limit: 10, offset: \$offset) {
            total
            data{
                id
                name
                loan_type
                partner_id
                internal_rating
                playstore_rating
                interest_rate_min
                interest_rate_max
                loan_amount_min
                loan_amount_max
                processing_fee_percentage
                processing_fee_min
                processing_fee_max
                required_documents
                duration_min
                duration_max
                duration_min_unit
                duration_max_unit
                app_url
                partner {
                    id
                    name
                    logo
                    short_description
                    term_link
                    support_contact
                    support_email                    
                }
            }
        }
    }
}""";

    // }
    // productListingBloc.getProductListingBloc(getLoanProducts).then((value){
    //   print(value);
    // });
    return Query(
        options: QueryOptions(document: gql(getLoanProducts), variables: {
          "offset": offset,
          "confKey": confKey,
          "operator": _operator
        }),
        builder: (QueryResult result,
            {VoidCallback refetch, FetchMore fetchMore}) {
          if (result.hasException) {
            return Container(
                width: ResponsiveRenderer().widthOfItem(context),
                child: UnknownErrorState(
                  errorImage: StringConstants.unknownErrorStateImage,
                  text: StringConstants.unknownErrorStateText,
                  titleText: StringConstants.unknownErrorOccurredText,
                ));
          }

          if (result.isLoading) {

            return offset == 0
                ? Center(
                    child: CircularProgressIndicator(),
                  )
                : Center(child: CircularProgressIndicator());
          }
          return Scaffold(
              backgroundColor: Colors.white,
              appBar: !_isAppBar
                  ? AppBar(
                      automaticallyImplyLeading: false,
                      elevation: 0,
                      backgroundColor: HexColor(ColorConstants.white),
                    )
                  : AppBar(
                      automaticallyImplyLeading: false,
                      title: Container(
                        child: TextCustom(
                          text: StringConstants.loansText,
                          textAlign: TextAlign.left,
                          hexColor: ColorConstants.black,
                          fontSize: DimensionConstants.textSize18,
                          fontWeight: FontWeight.w500,
                        ),
                      ),
                      actions: [
                        InkWell(
                          onTap: () {
                            MoengageFlutter.getInstance().trackEvent(
                                StringConstants.sortButtonLoanListing, null);
                            Analytics().logCustomEvent(
                                StringConstants.sortButtonLoanListing, null);
                            showSortBottomSheet(refetch);
                          },
                          child: Container(
                            margin: EdgeInsets.only(
                                right: DimensionConstants.margin16,
                                top: DimensionConstants.margin12),
                            child: Row(
                              children: [
                                Container(
                                  margin: EdgeInsets.only(
                                      right: DimensionConstants.margin8),
                                  child:
                                      SvgPicture.asset("assets/loan/sort.svg"),
                                ),
                                TextCustom(
                                  text: StringConstants.sortText,
                                  hexColor: ColorConstants.black,
                                  fontSize: DimensionConstants.textSize14,
                                ),
                              ],
                            ),
                          ),
                        )
                      ],
                      elevation: 0,
                      backgroundColor: Colors.white,
                    ),
              body: BlocBuilder<NetworkBloc, NetworkState>(
                  builder: (context, state) {
                if (state is ConnectionFailure) {
                  return Center(
                    child: UnknownErrorState(
                      errorImage: StringConstants.noInternetStateImage,
                      titleText: StringConstants.noInternetStateText,
                      text: StringConstants.noInternetStateSubText,
                    ),
                  );
                }

                ProductListing listData = ProductListing.fromJson(result.data);
                if (listData.user.products == null ||
                    listData.user.products.data.length == 0) {
                  return Container(
                    child: Center(
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Container(
                            child: Image.asset(
                              "assets/loan/loan_error_state.png",
                              width: ResponsiveRenderer().widthOfItem(context) *
                                  0.8,
                              height:
                                  ResponsiveRenderer().heightOfItem(context) *
                                      0.4,
                            ),
                          ),
                          Container(
                            margin: EdgeInsets.only(
                                top: DimensionConstants.margin16),
                            child: TextCustom(
                              text: StringConstants.noLoansFoundText,
                              fontSize: DimensionConstants.textSize16,
                              fontWeight: FontWeight.w500,
                            ),
                          ),
                          Container(
                            margin: EdgeInsets.only(
                                top: DimensionConstants.margin16),
                            child: TextCustom(
                              text: StringConstants
                                  .checkLocationAndPersonalDetails,
                              fontSize: DimensionConstants.textSize12,
                              hexColor: ColorConstants.greyDark,
                            ),
                          ),
                          InkWell(
                            onTap: () {
                              MoengageFlutter.getInstance().trackEvent(
                                  StringConstants.editProfileButtonLoanListing,
                                  null);
                              Analytics().logCustomEvent(
                                  StringConstants.editProfileButtonLoanListing,
                                  null);
                              Navigator.of(context)
                                  .pushNamed(MyProfile.routeName,
                                      arguments: MyProfile(
                                        phoneNumber: null,
                                      ));
                            },
                            child: Container(
                              margin: EdgeInsets.only(
                                  top: DimensionConstants.margin16),
                              child: TextCustom(
                                text: StringConstants.editProfileText,
                                fontSize: DimensionConstants.textSize14,
                                fontWeight: FontWeight.w500,
                                hexColor: ColorConstants.blue,
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  );
                } else {
                  _scrollController
                    ..addListener(() {
                      if (_scrollController.position.pixels ==
                          _scrollController.position.maxScrollExtent) {
                        if (total > current) {
                          offset++;
                          FetchMoreOptions opts = FetchMoreOptions(
                            variables: {
                              'offset': offset,
                              "confKey": confKey,
                              "operator": _operator
                            },
                            document: gql(getLoanProducts),
                            updateQuery:
                                (previousResultData, fetchMoreResultData) {
                              print(fetchMoreResultData);
                              final List<dynamic> repos = [
                                ...previousResultData['user']['products']
                                    ['data'] as List<dynamic>,
                                ...fetchMoreResultData['user']['products']
                                    ['data'] as List<dynamic>
                              ];

                              fetchMoreResultData['user']['products']['data'] =
                                  repos;
                              productList = repos;
                              return fetchMoreResultData;
                            },
                          );

                          fetchMore(opts);
                        }
                      }
                    });
                  current =
                      (offset * limit) + listData.user.products.data.length;
                  total = listData.user.products.total;
                  return Column(
                    children: [
                      // Container(
                      //   margin: EdgeInsets.only(
                      //       left: DimensionConstants.margin12,
                      //       top: DimensionConstants.margin16),
                      //   child: TextCustom(
                      //     text: StringConstants.loanListingDescription,
                      //     textAlign: TextAlign.left,
                      //     fontSize: DimensionConstants.margin14,
                      //     hexColor: ColorConstants.black,
                      //   ),
                      // ),
                      // _sortAndFilter(),
                      Expanded(
                        child: ListView.builder(
                            controller: _scrollController,
                            shrinkWrap: true,
                            itemCount: listData.user.products.data.length,
                            itemBuilder: (context, index) {
                              return Container(
                                  padding: EdgeInsets.only(
                                      top: DimensionConstants.margin16,
                                      bottom: DimensionConstants.margin16),
                                  child: CardCustomLoanList(
                                      listData: listData, index: index));
                            }),
                      ),
                    ],
                  );
                }
              }));
        });
  }```
here fetch more calling builder methods again which is refreshing my whole list I don't want to refresh my whole list
Please anyone knows any better way to do this?


  [1]: https://pub.dev/packages/graphql_flutter

Upvotes: 1

Views: 698

Answers (0)

Related Questions