Reputation: 11
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