如何在Flutter中解析graphql响应

Question

I am trying to parse my graphql response from my neo4j-graphql backend in my flutter app. I am using the flutter_graphql plugin to make queries to the back end. However, when I try to parse the response(JSON) I am getting 'LinkHashMap is not a subtype of Users Map.'

I tried modifying my serializing classes that will parse the response but to no available .below is the JSON response from neo4j graphql

 /*I HAVE EDITED THE JSON RESPONSE. THE FULL JSON RESPONSE FROM THE SERVER IS AS BELOW*/
{
  "data": {
    "User": [
      {
        "userId": 1,
        "city": "NewYork",
        "country": "User",
        "captionType": "User",
        "state": "New York",
        "firstName": "example2",
        "lastname": "example",
        "email": "example2@gmail.com"
      }
    ]
  },
  "extensions": {
    "type": "READ_ONLY"
  }
}

below are the classes that represent the above response

    @JsonSerializable()
    class User {
      final int userId;
      final String email ;
      final String country ;
      final String firstName;
      final String gender ;
      final String city ;
      final String dateOfBirth ;
      final String state;
      final String captionType;
      final String lastname;
     User({this.userId,this.email,this.country,this.firstName,this.gender,this.dateOfBirth,this.state,this.captionType,this.city,this.lastname});

     factory User.fromJson(Map<String,dynamic> json)=> _$UserFromJson(json);
      Map<String, dynamic> toJson() => _$UserToJson(this);

    }

    class Users{
      final List<User>users;
      Users({this.users});

      factory Users.fromJson(Map<String, dynamic> parsedJson){
        var list = parsedJson['users'] as List;
        List<User> usersList = list.map((i) => User.fromJson(i)).toList();
        return Users(
            users: usersList
        );
      }
    }

    //below is the graphql configuration in my seperate GraphQl.dart file
    class GraphQLConfiguration {
      static HttpLink httpLink = HttpLink(
        uri: "http://localhost:7474/graphql/",
        headers: {
          HttpHeaders.authorizationHeader: ************",
        },
      );
      static final AuthLink authLink = AuthLink(
        getToken: () async => 'Bearer <YOUR_PERSONAL_ACCESS_TOKEN>',
        // OR
        // getToken: () => 'Bearer <YOUR_PERSONAL_ACCESS_TOKEN>',
      );


      static ValueNotifier<GraphQLClient> initailizeClient() {
        ValueNotifier<GraphQLClient> client = ValueNotifier(
          GraphQLClient(
            cache: InMemoryCache(),
            link: httpLink,
          ),
        );
        return client;
      }

      static GraphQLClient clientToQuery() {
        return GraphQLClient(
          cache: OptimisticCache(
              dataIdFromObject: typenameDataIdFromObject),
          link: httpLink,
        );
      }
    }

    //below is my main.dart file where am trying to parse the response


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

    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          debugShowCheckedModeBanner: true,
          title: 'Flutter Graphql Client',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          initialRoute: '/',
          routes: <String, WidgetBuilder>{
            '/': (context) => MyHomePage(), //RootPage(auth: new Auth(),),
          },
        );
      }
    }

    class MyHomePage extends StatefulWidget {
      @override
      _MyHomePageState createState() => _MyHomePageState();
    }

    class _MyHomePageState extends State<MyHomePage> {

      Widget listViewWidget(List<Users> users) {
        return MediaQuery.removePadding(
          context: context, removeTop: true,
          child:  ListView.builder(
              itemCount: users.length,
              itemBuilder: (context, index) {
                return Container(
                  child: Column(
                    children: <Widget>[
                      Text('users:$users'),


                    ],
                  ),
                );
              }),

        );
      }

      String readUser = """
      query{
        User(userId:1){
          userId
          city
          country
          captionType
           state
          firstName
           lastname
          email

        }
      }   


      """;


      @override
      Widget build(BuildContext context) {
        return GraphQLProvider(
         client: GraphQLConfiguration.initailizeClient(),
            child: CacheProvider(
              child: Scaffold(
                appBar: AppBar(
                  title: Text('Flutter Graphql Client'),
                ),
                body:Query(
                  options: QueryOptions(
                      document: readUser),
                  builder: (QueryResult result, {VoidCallback refetch, FetchMore fetchMore}) {
                    if (result.errors!= null) {
                      print('$result.errors');
                     return Text(result.errors.toString());

                    } if (result.errors== null){
                      print(('$result'));
                      print(('${result.data}'));


                    } if (result.loading){
                      return Center(
                          child: CupertinoActivityIndicator(
                            radius: 13.0,
                          ));
                    }

                      return listViewWidget(result.data);
                  },
                )

                floatingActionButton: FloatingActionButton(
                  onPressed: () {},
                  child: Icon(Icons.add),
                ),
              ),
            ));
      }
    }

I am expecting the info to be parsed through the Users class and displayed through the listViewWidget. However I am getting'LinkHashMap is not a subtype of Users Map.'

Answer 1

You can parse any JSON using https://app.quicktype.io/ , below is the model class for your JSON

// To parse this JSON data, do
//
//     final responseModel = responseModelFromJson(jsonString);

import 'dart:convert';

ResponseModel responseModelFromJson(String str) => ResponseModel.fromJson(json.decode(str));

String responseModelToJson(ResponseModel data) => json.encode(data.toJson());

class ResponseModel {
Data data;
Extensions extensions;

ResponseModel({
    this.data,
    this.extensions,
});

factory ResponseModel.fromJson(Map<String, dynamic> json) => ResponseModel(
    data: json["data"] == null ? null : Data.fromJson(json["data"]),
    extensions: json["extensions"] == null ? null : Extensions.fromJson(json["extensions"]),
);

Map<String, dynamic> toJson() => {
    "data": data == null ? null : data.toJson(),
    "extensions": extensions == null ? null : extensions.toJson(),
    };
}

class Data {
List<User> user;

Data({
    this.user,
});

factory Data.fromJson(Map<String, dynamic> json) => Data(
    user: json["User"] == null ? null : List<User>.from(json["User"].map((x) => User.fromJson(x))),
);

Map<String, dynamic> toJson() => {
    "User": user == null ? null : List<dynamic>.from(user.map((x) => x.toJson())),
    };
}

class User {
int userId;
String city;
String country;
String captionType;
String state;
String firstName;
String lastname;
String email;

User({
    this.userId,
    this.city,
    this.country,
    this.captionType,
    this.state,
    this.firstName,
    this.lastname,
    this.email,
});

factory User.fromJson(Map<String, dynamic> json) => User(
    userId: json["userId"] == null ? null : json["userId"],
    city: json["city"] == null ? null : json["city"],
    country: json["country"] == null ? null : json["country"],
    captionType: json["captionType"] == null ? null : json["captionType"],
    state: json["state"] == null ? null : json["state"],
    firstName: json["firstName"] == null ? null : json["firstName"],
    lastname: json["lastname"] == null ? null : json["lastname"],
    email: json["email"] == null ? null : json["email"],
);

Map<String, dynamic> toJson() => {
    "userId": userId == null ? null : userId,
    "city": city == null ? null : city,
    "country": country == null ? null : country,
    "captionType": captionType == null ? null : captionType,
    "state": state == null ? null : state,
    "firstName": firstName == null ? null : firstName,
    "lastname": lastname == null ? null : lastname,
    "email": email == null ? null : email,
    };
}

class Extensions {
String type;

Extensions({
    this.type,
});

factory Extensions.fromJson(Map<String, dynamic> json) => Extensions(
    type: json["type"] == null ? null : json["type"],
);

Map<String, dynamic> toJson() => {
    "type": type == null ? null : type,
    };
}

use this code to parse your response

ResponseModel  responseModel = responseModelFromJson(result.data);
return listViewWidget(responseModel.data.user);