1

I am able to search in a list using autocomplete widget in flutter and display the options to the user. But actually what I am supposed to do is I have to call graphql query everytime as user enters a letter/alphabet in autocomplete widget. I have to take the letters entered by user, pass it to graphql query variable and get the result again and set that list to the autocomplete widget again. Now, I am able to call Query widget first time and able to pass the initial list it gives to us to the autocomplete widget. But I am not sure on how to call the this query again and again on every letter entered.

My Query code:

@override
  Widget build(BuildContext context) {

    return Query(
            options: QueryOptions(
                 fetchPolicy: FetchPolicy.networkOnly,
                document: gql(Constant.alltheUsers)),
    variables: getMap("jen"),
    
             builder: (QueryResult result,
                {VoidCallback? refetch, FetchMore? fetchMore}) {
              if (result.isLoading) {
                return const CupertinoActivityIndicator();
              }
    
              var response = result.data;
              if (response != null) {
                MyUsers = MyUsers.fromJson(response["myUsers"]);
    
                return MySearchWidget(
                    userList: MyUsers.userList  ?? DummyData.myList,
                );
                    },
                 }
              return const CupertinoActivityIndicator();
            }); ...

and heres my search widget that searches through this list:

Widget MySearchWidget({required UserList userlist}){
Autocomplete<UserList>(
            optionsBuilder: (TextEditingValue textEditingValue) {
              return widget.userlist
                  .where((Users user) => user.name!
                      .toLowerCase()
                      .contains(textEditingValue.text.toLowerCase()))
                  .toList();
            },
            fieldViewBuilder: (BuildContext context,
                TextEditingController fieldTextEditingController,
                FocusNode fieldFocusNode,
                VoidCallback onFieldSubmitted) {
              mytextFieldEditingController = fieldTextEditingController;
              return searchTextField(fieldFocusNode);
            },
             .....
                

and heres my map variable that I am passing to the query as variable:

Map<String, dynamic>getMap(String searchedWord){
 final Map<String, dynamic?> data = <String, dynamic>{};
data["letters"] = searchedWord;
}

How Can I call the above query again and again with every keyword entered in autocomplete and pass the resulting list to the autocomplete widget again? am I supposed to use useQuery instead of query and flutter hooks to achieve it? or what exactly I should be doing to call the query with new variable map again and again. Basically this is a requirement where I have to search users from my graphql backend using query and update my options/suggestion list. How can I do it?

Cassius
  • 353
  • 3
  • 16

0 Answers0