graphql_flutter Query widget throws error when loading the widget

[sumchans]

I am not sure what I am doing wrong here. I get an error when I query my graphql endpoint using the Query widget of the graphql_flutter package.

Here is my query -

const String findContacts = """ {
  query (\$contacts:[String]){
  findContacts(contacts:\$contacts) {
      status
      error
      users {
          id
          userPhoneNumber
          userDisplayName
      }
    }
  }
}  
""";

Here is my implementation of the Query widget-

    Query(
      options: QueryOptions(
        document: gql(graphql_string.findContacts),
        variables: const <String, dynamic>{
          'contacts': ["2612", "1212"],
        },
      ),
      builder: (QueryResult result,
          {VoidCallback? refetch, FetchMore? fetchMore}) {
        //if (result.data != null) {
        return ElevatedButton(
          onPressed: () {
            print(result.data!["findContacts"]["users"]);
          },
          child: const Text('FETCH CONTACTS'),
        );
      },
    ),

Below is the error I see-

[vincenzopalazzo]

Try the following as mentioned in the docs https://github.com/zino-hofmann/graphql-flutter/tree/main/packages/graphql

const String findContacts = r''' {
  query ($contacts:[String]){
  findContacts(contacts:\$contacts) {
      status
      error
      users {
          id
          userPhoneNumber
          userDisplayName
      }
    }
  }
}  
''';

[sumchans]

Hello @vincenzopalazzo.

I tried the above code, just renamed the variable and the schema.

const String findContactsOnBol = r''' {
  query ($contacts:[String]){
  findContactsOnBol(contacts:\$contacts) {
      status
      error
      users {
          id
          userPhoneNumber
          userDisplayName
      }
    }
  }
}  
''';

But I still get an error as below-

[vincenzopalazzo]

you need to remove all the \$ with $

[sumchans]

I tried that as well, forgot to mention -

const String findContactsOnBol = r''' {
  query ($contacts:[String]){
  findContactsOnBol(contacts:$contacts) {
      status
      error
      users {
          id
          userPhoneNumber
          userDisplayName
      }
    }
  }
}  
''';

When I do that it points me to the below line of code on the parser.dart file-

[vincenzopalazzo]

This is an exception; you should print the exception.

I do not use vscode no I do not know what it is mean, but this is an exception

[vincenzopalazzo]

No sorry this is not the same query, yours is a query { .... } but in flutter you are using another kind of query that is query Foo(args...) { ... }

Please take a look at the spec https://graphql.org/learn/queries/#operation-name IMHO your query this not correct and this should solve the problem

const String findContactsOnBol = r''' {
  query FindContactsOnBol($contacts: [String]) {
    findContactsOnBol(contacts: $contacts) {
        users {
            userPhoneNumber
        }
      }
    }
}  
''';

[sumchans]

@vincenzopalazzo the query above also gives me the same error. I noticed that if I provide a query to the Query widget that does not take any parameter works, but any query that takes in parameters errors out.

The below query does not take any parameter-

const String getUsers = """
query {
  users {
    users {
      userPhoneNumber
    }   
  }
}
""";

Here is the Query widget -

            Query(
              options: QueryOptions(
                document: gql(graphql_string.getUsers),
                onError: (error) => print(error),
                onComplete: (data) => print(data),
                // variables: <String, dynamic>{
                //   'contacts': contacts,
                // },
              ),
              builder: (QueryResult result,
                  {VoidCallback? refetch, FetchMore? fetchMore}) {
                //if (result.data != null) {
                return ElevatedButton(
                  onPressed: () {
                    //print(result.data!["user"]["user"]["userPhoneNumber"]);
                  },
                  child: const Text('FETCH CONTACTS'),
                );
              },
            ),

[vincenzopalazzo]

if without parameters works there is some error with your code, but I lost the context so if you think that this is a bug, please make a reproducer repository that I can test on my machine.

But if I was in you I was going to read the docs of the graphql_flutter to check what your code is doing wrong i am pretty sure that the bug is in your code.

[sumchans]

I was finally able to fix it. This is way how I got it worked -

const String findContactsOnBol = """
  query(\$contacts:[String]) {
    findContactsOnBol(contacts:\$contacts) {
      status
      error
      users {
          id
          userPhoneNumber
          userDisplayName
      }
    }
  }
""";

[vincenzopalazzo]

you should be able to remove \ if you use a raw string. Happy that you find a solution

[ndelanou]

Have you tried naming your query ?

const String findContacts = r""" {
  query yourQueryName($contacts:[String]) {
    findContacts(contacts:$contacts) {
      status
      error
      users {
        id
        userPhoneNumber
        userDisplayName
      }
    }
  }
}  
""";

[sumchans]

@ndelanou yes I have already tried that.