Question

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

在main.dart上设置Graphql客户端

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

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

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

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请求似乎有误。

Answer 1

我犯了一个与此错误非常相似的错误

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

我通过在查询中添加一个名称来解决该问题，

query NameOfQuery {
  projects {
    id
    title
    __typename
  }
}

Flutter出现意外字符：使用graphql

1 个答案: