feat: add infinite query builder with example

fix(query): updateQueryFn refetch when stale and update state of builders when widget is mounted

packages/fl_query/example/lib/main.dart

@@ -1,5 +1,4 @@
-import 'dart:math';
-
+import 'package:example/router.dart';
 import 'package:fl_query/fl_query.dart';
 import 'package:flutter/material.dart';
 
@@ -18,54 +17,10 @@ class MainApp extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final value = Random().nextInt(200000);
-    return MaterialApp(
-      home: Scaffold(
-        floatingActionButton: QueryListenable<String, dynamic, String>(
-            const ValueKey('hello'), builder: (context, query) {
-          if (query == null) {
-            return const SizedBox();
-          }
-          return FloatingActionButton(
-            onPressed: () {
-              query.refresh();
-            },
-            child: Text(query.data ?? 'No Data'),
-          );
-        }),
-        body: QueryBuilder<String, dynamic, String>(
-          const ValueKey('hello'),
-          () {
-            return Future.delayed(
-                const Duration(seconds: 6), () => 'Hello World! $value');
-          },
-          initial: 'Hello',
-          jsonConfig: JsonConfig(
-            fromJson: (json) => json['data'],
-            toJson: (data) => {'data': data},
-          ),
-          onData: (value) {
-            print('onData: $value');
-          },
-          onError: (error) {
-            print('onError: $error');
-          },
-          builder: (context, query) {
-            if (query.isLoading) {
-              return const Center(
-                child: CircularProgressIndicator(),
-              );
-            } else if (query.hasError) {
-              return Center(
-                child: Text(query.error.toString()),
-              );
-            }
-            return Center(
-              child: Text(query.data),
-            );
-          },
-        ),
-      ),
+    return MaterialApp.router(
+      title: 'FL Query Example',
+      showPerformanceOverlay: true,
+      routerConfig: router,
     );
   }
 }

packages/fl_query/example/lib/models/product.dart

@@ -0,0 +1,92 @@
+class Product {
+  int id;
+  String title;
+  String description;
+  double price;
+  double discountPercentage;
+  double rating;
+  double stock;
+  String brand;
+  String category;
+  String thumbnail;
+  List<String> images;
+
+  Product({
+    required this.id,
+    required this.title,
+    required this.description,
+    required this.price,
+    required this.discountPercentage,
+    required this.rating,
+    required this.stock,
+    required this.brand,
+    required this.category,
+    required this.thumbnail,
+    required this.images,
+  });
+
+  Product.fromJson(Map<String, dynamic> json)
+      : id = json['id'],
+        title = json['title'],
+        description = json['description'],
+        price = json['price'].toDouble(),
+        discountPercentage = json['discountPercentage'].toDouble(),
+        rating = json['rating'].toDouble(),
+        stock = json['stock'].toDouble(),
+        brand = json['brand'],
+        category = json['category'],
+        thumbnail = json['thumbnail'],
+        images = json['images'].cast<String>();
+
+  Map<String, dynamic> toJson() {
+    final Map<String, dynamic> data = <String, dynamic>{
+      'id': id,
+      'title': title,
+      'description': description,
+      'price': price,
+      'discountPercentage': discountPercentage,
+      'rating': rating,
+      'stock': stock,
+      'brand': brand,
+      'category': category,
+      'thumbnail': thumbnail,
+      'images': images,
+    };
+    return data;
+  }
+}
+
+class PagedProducts {
+  List<Product> products;
+  int total;
+  int skip;
+  int limit;
+
+  PagedProducts({
+    this.products = const [],
+    required this.total,
+    required this.skip,
+    required this.limit,
+  });
+
+  PagedProducts.fromJson(Map<String, dynamic> json)
+      : products = json['products']
+                ?.map<Product>((v) => Product.fromJson(
+                      Map.castFrom<dynamic, dynamic, String, dynamic>(v),
+                    ))
+                .toList() ??
+            [],
+        total = json['total'],
+        skip = json['skip'],
+        limit = json['limit'];
+
+  Map<String, dynamic> toJson() {
+    final Map<String, dynamic> data = <String, dynamic>{
+      'products': products.map((v) => v.toJson()).toList(),
+      'total': total,
+      'skip': skip,
+      'limit': limit,
+    };
+    return data;
+  }
+}

packages/fl_query/example/lib/pages/home.dart

@@ -0,0 +1,27 @@
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+
+class HomePage extends StatelessWidget {
+  const HomePage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text('FL Query Example'),
+      ),
+      body: ListView(
+        children: [
+          ListTile(
+            title: const Text('Query'),
+            onTap: () => GoRouter.of(context).push('/query'),
+          ),
+          ListTile(
+            title: const Text('Infinite Query'),
+            onTap: () => GoRouter.of(context).push('/infinite-query'),
+          ),
+        ],
+      ),
+    );
+  }
+}

packages/fl_query/example/lib/pages/infinite_query.dart

@@ -0,0 +1,97 @@
+import 'dart:convert';
+
+import 'package:example/models/product.dart';
+import 'package:fl_query/fl_query.dart';
+import 'package:flutter/material.dart';
+import 'package:http/http.dart';
+
+class InfiniteQueryPageWidget extends StatefulWidget {
+  const InfiniteQueryPageWidget({super.key});
+
+  @override
+  State<InfiniteQueryPageWidget> createState() =>
+      _InfiniteQueryPageWidgetState();
+}
+
+class _InfiniteQueryPageWidgetState extends State<InfiniteQueryPageWidget> {
+  final controller = ScrollController();
+
+  @override
+  void initState() {
+    super.initState();
+    controller.addListener(() async {
+      if (controller.position.pixels == controller.position.maxScrollExtent) {
+        final query = QueryClient.of(context)
+            .getInfiniteQuery(const ValueKey("products"));
+        await query?.fetchNext();
+      }
+    });
+  }
+
+  @override
+  void dispose() {
+    controller.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text('Infinite Query'),
+      ),
+      body: InfiniteQueryBuilder<PagedProducts, ClientException, String, int>(
+        const ValueKey("products"),
+        (page) async {
+          final res = await get(Uri.parse(
+            "https://dummyjson.com/products?limit=10&skip=${page * 10}",
+          ));
+
+          if (res.statusCode == 200) {
+            return PagedProducts.fromJson(jsonDecode(res.body));
+          } else {
+            throw ClientException(res.statusCode.toString(), res.request?.url);
+          }
+        },
+        nextPage: (lastPage, pages) {
+          if (pages.isNotEmpty &&
+              pages.last.products.length < pages[lastPage].limit) {
+            /// returning [null] will set [hasNextPage] to [false]
+            return null;
+          }
+          return lastPage + 1;
+        },
+        initialPage: 0,
+        jsonConfig: JsonConfig(
+          fromJson: (json) => PagedProducts.fromJson(json),
+          toJson: (data) => data.toJson(),
+        ),
+        builder: (context, query) {
+          final products = query.pages.map((e) => e.products).expand((e) => e);
+          if (!query.hasPages) {
+            return const Center(
+              child: CircularProgressIndicator(),
+            );
+          }
+          return ListView(
+            controller: controller,
+            children: [
+              for (final product in products)
+                ListTile(
+                  title: Text(product.title),
+                  subtitle: Text(product.description),
+                  leading: Image.network(product.thumbnail),
+                ),
+              if (query.hasNextPage)
+                const Center(
+                  child: CircularProgressIndicator(),
+                ),
+              if (query.hasErrors)
+                ...query.errors.map((e) => Text(e.message)).toList(),
+            ],
+          );
+        },
+      ),
+    );
+  }
+}

packages/fl_query/example/lib/pages/query.dart

@@ -0,0 +1,62 @@
+import 'dart:math';
+
+import 'package:fl_query/fl_query.dart';
+import 'package:flutter/material.dart';
+
+class QueryPage extends StatelessWidget {
+  const QueryPage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final value = Random().nextInt(200000);
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text('Query'),
+      ),
+      floatingActionButton: QueryListenable<String, dynamic, String>(
+          const ValueKey('hello'), builder: (context, query) {
+        if (query == null) {
+          return const SizedBox();
+        }
+        return FloatingActionButton(
+          onPressed: () {
+            query.refresh();
+          },
+          child: Text(query.data ?? 'No Data'),
+        );
+      }),
+      body: QueryBuilder<String, dynamic, String>(
+        const ValueKey('hello'),
+        () {
+          return Future.delayed(
+              const Duration(seconds: 6), () => 'Hello World! $value');
+        },
+        initial: 'Hello',
+        jsonConfig: JsonConfig(
+          fromJson: (json) => json['data'],
+          toJson: (data) => {'data': data},
+        ),
+        onData: (value) {
+          debugPrint('onData: $value');
+        },
+        onError: (error) {
+          debugPrint('onError: $error');
+        },
+        builder: (context, query) {
+          if (query.isLoading) {
+            return const Center(
+              child: CircularProgressIndicator(),
+            );
+          } else if (query.hasError) {
+            return Center(
+              child: Text(query.error.toString()),
+            );
+          }
+          return Center(
+            child: Text(query.data ?? "Unfortunately, there's no data"),
+          );
+        },
+      ),
+    );
+  }
+}

packages/fl_query/example/lib/router.dart

@@ -0,0 +1,22 @@
+import "package:example/pages/home.dart";
+import "package:example/pages/infinite_query.dart";
+import "package:example/pages/query.dart";
+import "package:go_router/go_router.dart";
+
+final router = GoRouter(
+  initialLocation: '/',
+  routes: [
+    GoRoute(
+      path: '/',
+      builder: (context, state) => const HomePage(),
+    ),
+    GoRoute(
+      path: '/query',
+      builder: (context, state) => const QueryPage(),
+    ),
+    GoRoute(
+      path: '/infinite-query',
+      builder: (context, state) => const InfiniteQueryPageWidget(),
+    ),
+  ],
+);