Query function is called twice for every input change

[itsmadhusudhan]

Query function searchCustomers is being called twice when name changes once. After the first call becomes success another call is made for the same name.

Is there anything wrong I'm doing the below code?

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:fquery/fquery.dart';


class SelectCustomerBottomsheet extends HookWidget {
  const SelectCustomerBottomsheet({super.key});

  Future searchCustomers(String name) async {
    if (name.length < 3) {
      return [];
    }

    return await getIt<CustomerRepository>().searchCustomers(
      name: name,
    );
  }

  @override
  Widget build(BuildContext context) {
    final name = useState("");
    final debouncedName = useDebounced(name.value, Duration(milliseconds: 300));
    final query = debouncedName ?? "";

    final result = useQuery(
      ["searchCustomers", query],
      () => searchCustomers(query),
    );
    final customers = result.data ?? [];

    return DraggableScrollableSheet(
      expand: false,
      initialChildSize: 0.9,
      maxChildSize: 0.9,
      minChildSize: 0.87,
      builder: (context, scrollController) {
        return TapOutsideGesture(
          child: Scaffold(
            body: NestedScrollView(
              headerSliverBuilder: (context, innerBoxIsScrolled) {
                return [
                  SliverAppBar(
                    title: Text('Select Customer'),
                    automaticallyImplyLeading: false,
                    scrolledUnderElevation: 0,
                    elevation: 0,
                    bottom: PreferredSize(
                      preferredSize: Size.fromHeight(50),
                      child: Container(
                        padding: const EdgeInsets.symmetric(horizontal: 20),
                        child: Input(
                          name: "name",
                          placeholderText: "Search",
                          icon: Icons.person,
                          onChanged: (value) {
                            name.value = value.trim();
                          },
                        ),
                      ),
                    ),
                  )
                ];
              },
              body: CustomScrollView(
                controller: scrollController,
                shrinkWrap: true,
                slivers: [
                  SliverPadding(
                    padding: const EdgeInsets.all(20),
                    sliver: SliverList.separated(
                      itemBuilder: (context, index) {
                        final customer = customers[index];
                        return ListTile(
                          title: Text(
                            customer.name,
                            style: TextStyle(
                              fontSize: 16,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                          subtitle: Text(
                            customer.phoneNumber,
                            style: TextStyle(fontSize: 14),
                          ),
                          onTap: () {
                            Navigator.pop(context, customer);
                          },
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(12),
                          ),
                          tileColor: AppColors.white,
                        );
                      },
                      itemCount: customers.length,
                      separatorBuilder: (context, index) => Spacing.v20,
                    ),
                  ),
                ],
              ),
            ),
          ),
        );
      },
    );
  }
}