Flutter 给出了 Unexpected character: Undefined location error while working with graphql答案

【问题标题】：Flutter gives Unexpected character: Undefined location error while working with graphqlFlutter 给出了 Unexpected character: Undefined location error while working with graphql
【发布时间】：2019-09-17 12:40:48
【问题描述】：

我已经使用库 graphql_flutter 设置了我的 graphql 客户端，并且我正在尝试从另一个页面进行调用以呈现来自服务器 API 的项目列表，如下所示：

Graphql 客户端设置在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;
  }
}

我已设置Django server 以获取图像中的数据。 API 正在按预期呈现项目。

而且，在我的另一个页面上，我有“查询”来获取数据。

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']);
}}

我在上面的函数_apiResult 中打印了result.errors。它给出以下错误：[Unexpected character: Undefined location]

并且，在颤振控制台的末尾显示以下消息：

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):     }

而且，当前的错误是：

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

我之前没有检查过这个，但是发现 Django 也报错了

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

所以，我认为问题出在 Django，无法以正确的格式获取请求。我的 API 请求似乎错误。

【问题讨论】：

还有更多日志吗？对我来说，错误似乎服务器正在返回 HTML 页面。你是如何设置 GraphQL 服务器的？
嗨@Ryosuke，我已经更新了我上面的问题。是的，我已经设置了 'django for GraphQL'。
自从我上次尝试以来，这个包似乎发生了很大变化。试试这个：打开link_http.dart 文件。您可以通过 cmd/ctrl + left_click 在 Android Studio 或 Intellij IDEA 中的导入语句上执行此操作。然后在第 297 行之后添加一行：print(decodedBody);
这会让我们知道响应是什么。我的代码也是这样的ValueNotifier( Client( endPoint: 'http://10.0.2.2:4000', cache: InMemoryCache(), apiToken: '$token' ), );，所以也许你不需要在你的网址末尾添加/graphql/。
尝试将您的查询更改为：query $queryName { projects { id title __typename } } 其中 queryName 与您的 GraphQL 架构中定义的内容相同。

标签： flutter graphql

【解决方案1】：

我遇到了一个与这个非常相似的错误

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

我通过在查询中添加名称来解决它，如下所示：

query NameOfQuery {
  projects {
    id
    title
    __typename
  }
}

【讨论】：