Examples & Recipes

Common patterns and recipes for building real-world applications with Fasq.

Recipes

Search with Debounce

Wait for the user to stop typing before fetching.


class SearchPage extends StatefulWidget {
  @override
  _SearchPageState createState() => _SearchPageState();
}
 
class _SearchPageState extends State<SearchPage> {
  String _searchTerm = '';
  Timer? _debounce;
 
  void _onSearchChanged(String query) {
    if (_debounce?.isActive ?? false) _debounce!.cancel();
    _debounce = Timer(const Duration(milliseconds: 500), () {
      setState(() {
        _searchTerm = query;
      });
    });
  }
 
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextField(onChanged: _onSearchChanged),
        QueryBuilder(
          queryKey: 'search:$_searchTerm'.toQueryKey(),
          queryFn: () => api.search(_searchTerm),
          options: QueryOptions(enabled: _searchTerm.isNotEmpty),
          builder: (context, state) {
            if (state.isLoading) return CircularProgressIndicator();
            // ...
          }
        ),
      ],
    );
  }
}

Pagination (Load More)

Combine InfiniteQuery with a list view.

See Infinite Queries for the full guide.

Optimistic Updates

Update the UI immediately when a user performs an action.

See Mutation Builder for the full guide.

Polling (Real-time)

Keep data fresh by fetching periodically.


QueryOptions(
  // Refetch every 5 seconds
  refetchInterval: Duration(seconds: 5),
)

Prefetching on Hover

Load data before the user clicks.


InkWell(
  onHover: (hovering) {
    if (hovering) {
      QueryClient().prefetchQuery('details:1'.toQueryKey(), fetchDetails);
    }
  },
  child: Text('View Details'),
)