|
|
|
@@ -16,7 +16,8 @@ Fl-Query makes asynchronous server state management a breeze in flutter
|
|
|
|
|
- Smart + effective refetching
|
|
|
|
|
- Optimistic updates
|
|
|
|
|
- Automatically cached data invalidation & unneeded query/mutation garbage collection
|
|
|
|
|
- Infinite data pagination via `InfiniteQuery`
|
|
|
|
|
- Infinite pagination via `InfiniteQuery`
|
|
|
|
|
- Lazy persistent cache (Uses [hive](https://pub.dev/packages/hive) for persisting query results to disk) (optional)
|
|
|
|
|
- Easy to write & understand code. Follows DRY (Don't repeat yourself) convention
|
|
|
|
|
- Compatible with both vanilla Flutter & elite [flutter_hooks](https://pub.dev/packages/flutter_hooks)
|
|
|
|
|
|
|
|
|
@@ -28,25 +29,34 @@ Regular installation:
|
|
|
|
|
$ flutter pub add fl_query
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
For elite flutter_hooks user:
|
|
|
|
|
For elite flutter_hooks user (Welcome to the flutter cool community btw😎)
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
$ flutter pub add flutter_hooks
|
|
|
|
|
$ flutter pub add fl_query_hooks
|
|
|
|
|
$ flutter pub add flutter_hooks fl_query_hooks
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
# Docs
|
|
|
|
|
|
|
|
|
|
You can find the documentation (WIP) of fl-query at https://fl-query.vercel.app/
|
|
|
|
|
You can find the documentation of fl-query at https://fl-query.vercel.app/
|
|
|
|
|
|
|
|
|
|
# Basic Usage
|
|
|
|
|
|
|
|
|
|
First wrap your `MaterialApp` with with `QueryBowlScope` widget
|
|
|
|
|
Initialize the cache databases in your `main` method
|
|
|
|
|
|
|
|
|
|
> fl-query uses [hive](https://pub.dev/packages/hive) for persisting data to disk
|
|
|
|
|
|
|
|
|
|
```dart
|
|
|
|
|
void main()async {
|
|
|
|
|
WidgetsFlutterBinding.ensureInitialized();
|
|
|
|
|
await QueryClient.initialize(cachePrefix: 'fl_query_example');
|
|
|
|
|
runApp(MyApp());
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
In `MyApp` Widget's build method wrap your `MaterialApp` with with `QueryClientProvider` widget
|
|
|
|
|
|
|
|
|
|
```dart
|
|
|
|
|
Widget build(BuildContext context) {
|
|
|
|
|
return QueryBowlScope(
|
|
|
|
|
bowl: QueryBowl(),
|
|
|
|
|
return QueryClientProvider(
|
|
|
|
|
child: MaterialApp(
|
|
|
|
|
title: 'Fl-Query Example App',
|
|
|
|
|
theme: ThemeData(
|
|
|
|
@@ -59,104 +69,116 @@ First wrap your `MaterialApp` with with `QueryBowlScope` widget
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
Fl-Query has two types of jobs
|
|
|
|
|
- `QueryJob`: Used for storing GET requests or for storing changeable yet readonly async data
|
|
|
|
|
- `MutationJob`: Used for POST/PUT/DELETE requests or for mutating/changing data in services or a store asynchronously
|
|
|
|
|
Let's write use a `Query` now
|
|
|
|
|
FL-Query provides a `QueryBuilder` widget that creates and listens to the specified `Query`
|
|
|
|
|
and re-runs the builder function whenever there's an update
|
|
|
|
|
|
|
|
|
|
You can write all your query or mutation logic a method parameter named `task` & identify the query uniquely by passing a unique `queryKey`
|
|
|
|
|
|
|
|
|
|
Example of a QueryJob:
|
|
|
|
|
It has 2 required parameters(unnamed) `key` & `builder`
|
|
|
|
|
|
|
|
|
|
```dart
|
|
|
|
|
final exampleQueryJob = QueryJob<Map, void>(
|
|
|
|
|
queryKey: "example", // have to be unique
|
|
|
|
|
task: (queryKey, externalData) async {
|
|
|
|
|
final res = await http.get("/api/example-data");
|
|
|
|
|
return jsonDecode(res.body);
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
```
|
|
|
|
|
class MyApp extends StatelessWidget{
|
|
|
|
|
MyApp({super.key});
|
|
|
|
|
|
|
|
|
|
Store the `QueryJob` somewhere globally accessible in your project so you can reuse it later
|
|
|
|
|
|
|
|
|
|
Now you can use this `QueryJob` anywhere inside your flutter app inside the build method using a `QueryBuilder` widget
|
|
|
|
|
|
|
|
|
|
```dart
|
|
|
|
|
Widget build(BuildContext context){
|
|
|
|
|
return QueryBuilder<String, void>(
|
|
|
|
|
job: exampleQueryJob,
|
|
|
|
|
externalData: null,
|
|
|
|
|
builder: (context, query) {
|
|
|
|
|
if (!query.hasData || query.isLoading) {
|
|
|
|
|
return const CircularProgressIndicator();
|
|
|
|
|
}
|
|
|
|
|
return Row(
|
|
|
|
|
children: [
|
|
|
|
|
Text(query.data!),
|
|
|
|
|
ElevatedButton(
|
|
|
|
|
child: const Text("Refetch"),
|
|
|
|
|
onPressed: () async {
|
|
|
|
|
// refetches the query
|
|
|
|
|
await query.refetch();
|
|
|
|
|
},
|
|
|
|
|
),
|
|
|
|
|
],
|
|
|
|
|
);
|
|
|
|
|
},
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
Or if you're an elite **flutter_hooks** user you can use the `useQuery` hook which is exported from the `package:fl_query_hooks/fl_query_hooks.dart` to do the same thing as above
|
|
|
|
|
|
|
|
|
|
```dart
|
|
|
|
|
/* other imports */
|
|
|
|
|
import 'package:flutter_hooks/flutter_hooks.dart';
|
|
|
|
|
import 'package:fl_query_hooks/fl_query_hooks.dart'; // importing the fl-query hook package
|
|
|
|
|
|
|
|
|
|
class Example extends HookWidget{
|
|
|
|
|
Example(super.key);
|
|
|
|
|
|
|
|
|
|
Widget build(BuildContext context) {
|
|
|
|
|
final query = useQuery(job: exampleQueryJob, externalData: null);
|
|
|
|
|
|
|
|
|
|
if (!query.hasData || query.isLoading) {
|
|
|
|
|
return const CircularProgressIndicator();
|
|
|
|
|
}
|
|
|
|
|
return Row(
|
|
|
|
|
children: [
|
|
|
|
|
Text(query.data!),
|
|
|
|
|
ElevatedButton(
|
|
|
|
|
child: const Text("Refetch"),
|
|
|
|
|
onPressed: () async {
|
|
|
|
|
// refetches the query
|
|
|
|
|
await query.refetch();
|
|
|
|
|
},
|
|
|
|
|
@override
|
|
|
|
|
build(context){
|
|
|
|
|
return QueryBuilder<String, dynamic>(
|
|
|
|
|
'hello',
|
|
|
|
|
() {
|
|
|
|
|
return Future.delayed(
|
|
|
|
|
const Duration(seconds: 6), () => 'Hello World!');
|
|
|
|
|
},
|
|
|
|
|
initial: 'A replacement',
|
|
|
|
|
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"),
|
|
|
|
|
);
|
|
|
|
|
},
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
And if you're using **flutter_hooks** you got that too
|
|
|
|
|
|
|
|
|
|
```dart
|
|
|
|
|
class MyApp extends HookWidget{
|
|
|
|
|
MyApp({super.key});
|
|
|
|
|
|
|
|
|
|
@override
|
|
|
|
|
build(context){
|
|
|
|
|
final query = useQuery<String, dynamic>(
|
|
|
|
|
'hello',
|
|
|
|
|
() {
|
|
|
|
|
return Future.delayed(
|
|
|
|
|
const Duration(seconds: 6), () => 'Hello World!');
|
|
|
|
|
},
|
|
|
|
|
initial: 'A replacement',
|
|
|
|
|
jsonConfig: JsonConfig(
|
|
|
|
|
fromJson: (json) => json['data'],
|
|
|
|
|
toJson: (data) => {'data': data},
|
|
|
|
|
),
|
|
|
|
|
onData: (value) {
|
|
|
|
|
debugPrint('onData: $value');
|
|
|
|
|
},
|
|
|
|
|
onError: (error) {
|
|
|
|
|
debugPrint('onError: $error');
|
|
|
|
|
},
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
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"),
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
*To master the fl-query follow the official blog at https://fl-query.vercel.app/blog*
|
|
|
|
|
|
|
|
|
|
# Why?
|
|
|
|
|
<p align="center">
|
|
|
|
|
<img src="https://media.giphy.com/media/1M9fmo1WAFVK0/giphy.gif" alt="The hell, why?">
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
The main purpose of Fl-Query is providing the easiest way to manage the messy server-state part requiring the least amount of code with code reusability & performance
|
|
|
|
|
This let's you focus more on those cool UI animations & transitions✨. Leave the boring stuff to fl-query
|
|
|
|
|
|
|
|
|
|
**Isn't `FutureBuilder` good?**
|
|
|
|
|
Yes but it is only if your commercial server has huge load of power & you're made of money or your app is simple or mostly offline & barely requires internet connection
|
|
|
|
|
`FutureBuilder` isn't good for data persistency & its impossible to share data across the entire application using it
|
|
|
|
|
**Q. Isn't `FutureBuilder` good?**
|
|
|
|
|
|
|
|
|
|
**So `FutureProvider` from riverpod or provider not enough?**
|
|
|
|
|
Yeah, indeed its more than enough for many applications but what if your app needs Optimistic Updates & proper server-state synchronization or simply want a custom `cacheTime`? Although `FutureProvider` is a viable solution most of the `Future` related stuff, why not kick it up a notch with smart refetching capabilities with proper server-state synchronization?
|
|
|
|
|
Riverpod is definitely a inspiration for Fl-Query & the `QueryJob` is actually inspired by riverpod & imo is the best state management solution any library has ever provided but that's still a client state manager just like other client state manager or synchronous data manager
|
|
|
|
|
No, of course not. Unless you're from 2013 or your app is a purely offline app
|
|
|
|
|
|
|
|
|
|
**Q. So `FutureProvider` from riverpod or provider not enough?**
|
|
|
|
|
|
|
|
|
|
Probably yes. Although riverpod@v2 has added a lot of caching related features but still optimistic updates, periodic refetching & disk persistence are missing. Let's not forget about infinite pagination, it's a nightmare😅. In case of provider, same story. It's a great package but it's not ideal for server-state management
|
|
|
|
|
|
|
|
|
|
# Notice Board
|
|
|
|
|
|
|
|
|
|
This project is currently under heavy development & not yet production ready. There are lot of features to cover. If anyone encounters any unintended behavior or any bug please report it. Also we're open to improvement suggestions & feature requests
|
|
|
|
|
|
|
|
|
|
**Important!:** The project needs Dart-Flutter developers who are willing to contribute to the project by writing Tests. (I'm the worst example for tester)
|
|
|
|
|
We need some bada** coders to write tests and ruin our life🥲
|
|
|
|
|
100% coverage is our goal🙃
|
Kingkor Roy Tirtho