Flutter Amplify GraphQL查询：自定义解码路径适配列表返回报错

我在Flutter中调用AWS AppSync托管的GraphQL API查询用户列表，实现代码如下：

Future<void> getUsersByLocation(
      String subId, double lat, double long, double distance) async {
    const getUsersByLocation = 'getUsersByLocation';
    final String getUsersDoc = '''
    query getUsersByLocation(\$distance: Float!, \$latitude: Float!, \$longitude: Float!, \$reqUserSubId: String!) {
      $getUsersByLocation(distance: \$distance, latitude: \$latitude, longitude: \$longitude, reqUserSubId: \$reqUserSubId) {
        name
      }
    }
  ''';
    final Map<String, dynamic> inputVars = <String, dynamic>{
      'reqUserSubId': subId,
      'latitude': lat,
      'longitude': long,
      'distance': distance,
    };
    final request = GraphQLRequest<List<User>>(
      document: getUsersDoc,
      modelType: User.classType,
      variables: inputVars,
      decodePath: getUsersByLocation,
    );
    try {
      final response = await Amplify.API.query(request: request).response;
      print('Response: $response.data');
    } catch (error) {
      print('error :${error.toString()}');
    }
  }

运行时抛出类型转换错误：

'List<dynamic>' is not a subtype of type 'Map<String, dynamic>?'

API返回的是用户列表，但默认解码逻辑期望接收Map<String, dynamic>?类型数据，需要自定义解码函数处理List类型返回结果。

解决方案 #

放弃使用decodePath，改用decodeFn自定义解码逻辑，直接处理返回的List数据并转换为List<User>。修改后的完整代码如下：

Future<void> getUsersByLocation(
      String subId, double lat, double long, double distance) async {
    const getUsersByLocation = 'getUsersByLocation';
    final String getUsersDoc = '''
    query getUsersByLocation(\$distance: Float!, \$latitude: Float!, \$longitude: Float!, \$reqUserSubId: String!) {
      $getUsersByLocation(distance: \$distance, latitude: \$latitude, longitude: \$longitude, reqUserSubId: \$reqUserSubId) {
        name
      }
    }
  ''';
    final Map<String, dynamic> inputVars = <String, dynamic>{
      'reqUserSubId': subId,
      'latitude': lat,
      'longitude': long,
      'distance': distance,
    };
    final request = GraphQLRequest<List<User>>(
      document: getUsersDoc,
      variables: inputVars,
      // 自定义解码函数，处理List类型返回值
      decodeFn: (responseData) {
        final List<dynamic> usersList = responseData[getUsersByLocation] as List;
        return usersList.map((userJson) => User.fromJson(userJson)).toList();
      },
    );
    try {
      final response = await Amplify.API.query(request: request).response;
      print('Response: ${response.data}');
    } catch (error) {
      print('error :${error.toString()}');
    }
  }

关键说明 #

• 移除modelType和decodePath参数，替换为decodeFn自定义解码逻辑
• 在decodeFn中，先从返回的responseData中取出对应字段的List数据，再通过map方法将每个JSON对象转换为User实例
• 确保User类实现了fromJson(Map<String, dynamic> json)构造函数，用于单个用户数据的解析

内容的提问来源于stack exchange，提问作者Ishan Patel