feat(infinite-query): add useInfiniteQuery hook with example

This commit is contained in:
Kingkor Roy Tirtho
2022-09-14 13:14:23 +06:00
parent 6eb7b2a429
commit 2a3ac29f64
5 changed files with 218 additions and 10 deletions
@@ -1 +1 @@
{"info":"This is a generated file; do not edit or check into version control.","plugins":{"ios":[{"name":"connectivity_plus","path":"/home/krtirtho/.pub-cache/hosted/pub.dartlang.org/connectivity_plus-2.3.6/","native_build":true,"dependencies":[]}],"android":[{"name":"connectivity_plus","path":"/home/krtirtho/.pub-cache/hosted/pub.dartlang.org/connectivity_plus-2.3.6/","native_build":true,"dependencies":[]}],"macos":[{"name":"connectivity_plus_macos","path":"/home/krtirtho/.pub-cache/hosted/pub.dartlang.org/connectivity_plus_macos-1.2.4/","native_build":true,"dependencies":[]}],"linux":[{"name":"connectivity_plus_linux","path":"/home/krtirtho/.pub-cache/hosted/pub.dartlang.org/connectivity_plus_linux-1.3.1/","native_build":false,"dependencies":[]}],"windows":[{"name":"connectivity_plus_windows","path":"/home/krtirtho/.pub-cache/hosted/pub.dartlang.org/connectivity_plus_windows-1.2.2/","native_build":true,"dependencies":[]}],"web":[{"name":"connectivity_plus_web","path":"/home/krtirtho/.pub-cache/hosted/pub.dartlang.org/connectivity_plus_web-1.2.3/","dependencies":[]}]},"dependencyGraph":[{"name":"connectivity_plus","dependencies":["connectivity_plus_linux","connectivity_plus_macos","connectivity_plus_web","connectivity_plus_windows"]},{"name":"connectivity_plus_linux","dependencies":[]},{"name":"connectivity_plus_macos","dependencies":[]},{"name":"connectivity_plus_web","dependencies":[]},{"name":"connectivity_plus_windows","dependencies":[]}],"date_created":"2022-09-14 11:35:53.826188","version":"3.3.0"}
{"info":"This is a generated file; do not edit or check into version control.","plugins":{"ios":[{"name":"connectivity_plus","path":"/home/krtirtho/.pub-cache/hosted/pub.dartlang.org/connectivity_plus-2.3.6/","native_build":true,"dependencies":[]}],"android":[{"name":"connectivity_plus","path":"/home/krtirtho/.pub-cache/hosted/pub.dartlang.org/connectivity_plus-2.3.6/","native_build":true,"dependencies":[]}],"macos":[{"name":"connectivity_plus_macos","path":"/home/krtirtho/.pub-cache/hosted/pub.dartlang.org/connectivity_plus_macos-1.2.4/","native_build":true,"dependencies":[]}],"linux":[{"name":"connectivity_plus_linux","path":"/home/krtirtho/.pub-cache/hosted/pub.dartlang.org/connectivity_plus_linux-1.3.1/","native_build":false,"dependencies":[]}],"windows":[{"name":"connectivity_plus_windows","path":"/home/krtirtho/.pub-cache/hosted/pub.dartlang.org/connectivity_plus_windows-1.2.2/","native_build":true,"dependencies":[]}],"web":[{"name":"connectivity_plus_web","path":"/home/krtirtho/.pub-cache/hosted/pub.dartlang.org/connectivity_plus_web-1.2.3/","dependencies":[]}]},"dependencyGraph":[{"name":"connectivity_plus","dependencies":["connectivity_plus_linux","connectivity_plus_macos","connectivity_plus_web","connectivity_plus_windows"]},{"name":"connectivity_plus_linux","dependencies":[]},{"name":"connectivity_plus_macos","dependencies":[]},{"name":"connectivity_plus_web","dependencies":[]},{"name":"connectivity_plus_windows","dependencies":[]}],"date_created":"2022-09-14 13:12:02.969795","version":"3.3.0"}
@@ -0,0 +1,72 @@
import 'dart:convert';
import 'package:fl_query_hooks/fl_query_hooks.dart';
import 'package:flutter/material.dart';
import 'package:fl_query/fl_query.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:http/http.dart' as http;
final infiniteQueryHookJob = InfiniteQueryJob<Map, void, int>(
queryKey: "infinite-posts",
initialParam: 1,
task: (queryKey, pageParam, externalData) async {
return jsonDecode(
(await http.get(
Uri.parse("https://jsonplaceholder.typicode.com/posts/$pageParam"),
))
.body,
);
},
getNextPageParam: (lastPage, lastParam) {
return lastParam + 1;
},
getPreviousPageParam: (lastPage, lastParam) {
return lastParam - 1;
},
);
class BasicHookInfiniteQueryExample extends HookWidget {
const BasicHookInfiniteQueryExample({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
final infiniteQuery = useInfiniteQuery(
job: infiniteQueryHookJob,
externalData: null,
);
return Scaffold(
appBar: AppBar(),
body: Stack(
children: [
ListView.builder(
itemCount: infiniteQuery.pages.length,
itemBuilder: (context, index) {
final page = infiniteQuery.pages[index];
return ListTile(
title: Text(page?["title"] ?? ""),
subtitle: Text(page?["body"] ?? ""),
);
},
),
Align(
alignment: Alignment.bottomRight,
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
IconButton(
icon: const Icon(Icons.refresh_rounded),
onPressed: () => infiniteQuery.refetchPages(),
),
IconButton(
icon: const Icon(Icons.get_app_rounded),
onPressed: () => infiniteQuery.fetchNextPage(),
),
],
),
),
],
),
);
}
}
+21 -9
View File
@@ -1,3 +1,4 @@
import 'package:fl_query_hooks_example/components/basic_hook_infinite_query.dart';
import 'package:fl_query_hooks_example/components/basic_hook_mutation.dart';
import 'package:fl_query_hooks_example/components/basic_hook_query.dart';
import 'package:fl_query_hooks_example/components/lazy_hook_query.dart';
@@ -49,15 +50,26 @@ class _MyHomePageState extends State<MyHomePage> with WidgetsBindingObserver {
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: const [
BasicHookQueryExample(),
QueryHookExternalDataExample(),
LazyHookQueryExample(),
QueryHookVariableKeyExample(),
QueryHookPreviousDataExample(),
Divider(),
BasicHookMutationExample(),
MutationHookVariableKeyExample(),
children: [
const BasicHookQueryExample(),
const QueryHookExternalDataExample(),
const LazyHookQueryExample(),
const QueryHookVariableKeyExample(),
const QueryHookPreviousDataExample(),
ListTile(
title: const Text("Infinite Query Example"),
trailing: const Icon(Icons.open_in_new),
onTap: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => const BasicHookInfiniteQueryExample(),
),
);
},
),
const Divider(),
const BasicHookMutationExample(),
const MutationHookVariableKeyExample(),
],
),
)),
@@ -2,3 +2,4 @@ library fl_query_hooks;
export 'src/use_query.dart';
export 'src/use_mutation.dart';
export 'src/use_infinite_query.dart';
@@ -0,0 +1,123 @@
// ignore_for_file: invalid_use_of_protected_member
import 'package:fl_query/fl_query.dart';
import 'package:fl_query_hooks/src/utils.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
InfiniteQuery<T, Outside, PageParam>
useInfiniteQuery<T extends Object, Outside, PageParam extends Object>({
required InfiniteQueryJob<T, Outside, PageParam> job,
required Outside externalData,
// /// Called when the query returns new data, on query
// /// refetch or query gets expired
// QueryListener<T>? onData,
// /// Called when the query returns error
// QueryListener<dynamic>? onError,
List<Object?>? keys,
}) {
final context = useContext();
final QueryBowl queryBowl = QueryBowl.of(context);
final ValueKey<String> uKey = useMemoized(() => ValueKey(uuid.v4()), []);
final query = useRef(
InfiniteQuery.fromOptions(
job,
externalData: externalData,
queryBowl: queryBowl,
),
);
final oldJob = usePrevious(job);
final oldExternalData = usePrevious(externalData);
// final oldOnData = usePrevious(onData);
// final oldOnError = usePrevious(onError);
final init = useCallback(([T? previousData]) {
query.value = queryBowl.addInfiniteQuery<T, Outside, PageParam>(
job,
externalData: externalData,
// previousData: previousData,
key: uKey,
// onData: onData,
// onError: onError,
);
final hasExternalDataChanged = query.value.externalData != null &&
query.value.prevUsedExternalData != null &&
!isShallowEqual(
query.value.externalData!, query.value.prevUsedExternalData!);
if (query.value.fetched && hasExternalDataChanged) {
query.value.refetch();
} else if (!query.value.fetched) {
query.value.fetch();
}
}, [
queryBowl,
query.value,
uKey,
job,
externalData,
// onData,
// onError,
]);
final disposeQuery = useCallback(() {
query.value.unmount(uKey);
// if (onData != null) query.value.removeDataListener(onData);
// if (onError != null) query.value.removeErrorListener(onError);
}, [
query.value,
uKey,
// onData,
// onError,
]);
useEffect(() {
init();
return disposeQuery;
}, []);
useEffect(() {
// final hasOnErrorChanged = oldOnError != onError && oldOnError != null;
// final hasOnDataChanged = oldOnData != onData && oldOnData != null;
if (oldJob != null && oldJob.queryKey != job.queryKey) {
disposeQuery();
init();
} else if (oldExternalData != null &&
externalData != null &&
!isShallowEqual(oldExternalData, externalData)) {
if (job.refetchOnExternalDataChange ??
queryBowl.refetchOnExternalDataChange) {
QueryBowl.of(context).addInfiniteQuery(
job,
externalData: externalData,
key: uKey,
// onData: onData,
// onError: onError,
)..refetchPages();
} else {
QueryBowl.of(context)
.getQuery(job.queryKey)
?.setExternalData(externalData);
}
// if (hasOnDataChanged) query.value.removeDataListener(oldOnData);
// if (hasOnErrorChanged) query.value.removeErrorListener(oldOnError);
}
// else {
// if (hasOnDataChanged) {
// query.value.removeDataListener(oldOnData);
// if (onData != null) query.value.addDataListener(onData);
// }
// if (hasOnErrorChanged) {
// query.value.removeErrorListener(oldOnError);
// if (onError != null) query.value.addErrorListener(onError);
// }
// }
return null;
});
return queryBowl.getInfiniteQuery<T, Outside, PageParam>(job.queryKey) ??
query.value;
}