CODEWITHSUNDEEP
fluttergraphql
Sijan Bhandari
Sijan Bhandari

Reputation: 3051

Flutter gives Unexpected character: Undefined location error while working with graphql

I have setup my graphql client with library graphql_flutter and I am trying to make a call from another page to render list of items from the server API as follows:

Graphql client setup at main.dart 

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {


   // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    HttpLink httpLink = HttpLink(uri: 'http://192.168.122.1:8000/graphql');

    final AuthLink authLink = AuthLink();
    final Link link = httpLink as Link;

    ValueNotifier<GraphQLClient> client = ValueNotifier(
      GraphQLClient(
        cache: NormalizedInMemoryCache(
            dataIdFromObject: _typenameDataIdFromObject),
        link: link,
      ),
    );



    return GraphQLProvider(
        client: client,
        child: CacheProvider(
            child: MaterialApp(
                title: 'Flutter graphql',
                theme: ThemeData(
                  primarySwatch: Colors.blue,
                ),
                home: CategoriesPage())));
  }

    String _typenameDataIdFromObject(Object object) {
    if (object is Map<String, Object> &&
        object.containsKey('__typename') &&
        object.containsKey('id')) {
      return "${object['__typename']}/${object['id']}";
    }
    return null;
  }
}

I have set up Django server in order to fetch the data as in the image. The API is rendering the items as intended.

enter image description here

And, on my other page, I have the 'query` to fetch the data. 

String projectsQuery = r"""
query {
    projects {
      id
      title
      __typename
    }
}
""";

@override
Widget build(BuildContext context) {


return Query(
    options: QueryOptions(document: projectsQuery),
    builder: (QueryResult result, {VoidCallback refetch}) {
      Widget body = _apiResult(result);

      return Scaffold(
          appBar: AppBar(title: Text('Categories'), actions: [
            IconButton(
                icon: Icon(Icons.person),
                tooltip: 'Login',
                onPressed: () {}),
          ]),
          body: body);
    });
}

  Widget _apiResult(QueryResult result) {

   print(result.errors)
   if (result.errors != null) {
   return Text('Error');
  }
  if (result.loading) {
   return Text('Loading...');
  }
    return CategoriesList(categories: result.data['data']['projects']);
}}

I have printed the result.errors in above function _apiResult. It is giving the following errors: [Unexpected character: Undefined location]

And, at the end of flutter console following message is being displayed:

I/flutter (26761): [FormatException, FormatException: Unexpected character (at character 1)
I/flutter (26761): <!DOCTYPE html>
I/flutter (26761): ^
I/flutter (26761): ]

I/flutter ( 3666): http://192.168.122.1:8000/graphql/
I/flutter ( 3666): request body :
I/flutter ( 3666): {operationName: UNNAMED/229217349, variables: {}, query:     query {
I/flutter ( 3666):         projects {
I/flutter ( 3666):           id
I/flutter ( 3666):           title
I/flutter ( 3666):           __typename
I/flutter ( 3666):         }
I/flutter ( 3666):     }
I/flutter ( 3666):     }

And, the current error is:

 {"errors":[{"message":"Unknown operation named \"UNNAMED/229217349\"."}]}

I have not checked this before, but find out Django is also raising error 

Bad Request: /graphql/
[30/Apr/2019 13:01:38] "POST /graphql/ HTTP/1.1" 400 73

So, I think the issue is at Django, not able to get the request in the right format. My API request seems wrong.

Upvotes: 3

Views: 2958

Answers (1)

Martijn
Martijn

Reputation: 145

I had an error which was very similar to this one

[Unknown operation named "UNNAMED/355583712".: Undefined location]

I solved it by adding a name to the query like so:

query NameOfQuery {
  projects {
    id
    title
    __typename
  }
}

Upvotes: 2

Related Questions