graphql_flutter: make first version of demo app

Signed-off-by: Vincenzo Palazzo <[email protected]>

Author: vincenzopalazzo

packages/graphql_flutter/example/graphql_chat/lib/api/query.dart

@@ -5,22 +5,35 @@ class Queries {
         getChats {
           __typename
           id
-          message
+          description
           name
         }
       }
     """;
   }
 
-  static String createChatMutation({required String name, required String message}) {
+  static String createChatMutation(
+      {required String name, required String description}) {
     return """
       mutation {
-        createChat(name: $name, message: $message) {
+        createChat(name: $name, description: $description) {
           id
           name
-          message
+          description
         }
       }
     """;
   }
-}
+
+  static String subscribeToNewChat() {
+    return """ 
+    subscription {
+      chatCreated {
+        id
+        name
+        description
+      }
+    }
+    """;
+  }
+}

packages/graphql_flutter/example/graphql_chat/lib/main.dart

@@ -12,11 +12,23 @@ Future<void> main() async {
       "Accept": "application/json",
       "Access-Control_Allow_Origin": "*",
     },
-    'http://127.0.0.1:9000/graphql',
+    'https://api.chat.graphql-flutter.dev/graphql',
+  );
+  var wsLink = WebSocketLink(
+    'ws://api.chat.graphql-flutter.dev/graphql',
+    config: const SocketClientConfig(
+      inactivityTimeout: Duration(seconds: 40),
+    ),
+    subProtocol: GraphQLProtocol.graphqlTransportWs,
+  );
+  final Link link = Link.split(
+    (request) => request.isSubscription,
+    wsLink,
+    httpLink,
   );
   ValueNotifier<GraphQLClient> client = ValueNotifier(
     GraphQLClient(
-      link: httpLink,
+      link: link,
       // The default store is the InMemoryStore, which does NOT persist to disk
       cache: GraphQLCache(store: HiveStore()),
     ),

packages/graphql_flutter/example/graphql_chat/lib/model/chat.dart

@@ -1,12 +1,12 @@
-
 class Chat {
   final int id;
   final String name;
-  final String message;
+  final String description;
 
-  const Chat({required this.id, required this.name, required this.message});
+  const Chat({required this.id, required this.name, required this.description});
 
   factory Chat.fromJSON(Map<String, dynamic> json) {
-    return Chat(id: json["id"], name: json["name"], message: json["message"]);
+    return Chat(
+        id: json["id"], name: json["name"], description: json["description"]);
   }
-}
+}

packages/graphql_flutter/example/graphql_chat/lib/view/home/home_body.dart

@@ -1,11 +1,13 @@
-import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
 import 'package:graphql_chat/api/query.dart';
 import 'package:graphql_chat/model/chat.dart';
 import 'package:graphql_flutter/graphql_flutter.dart';
 import 'package:logger/logger.dart';
 
 class HomeViewBody extends StatelessWidget {
   final Logger _logger = Logger();
+  List<Chat> _chats = [];
+
   HomeViewBody({Key? key}) : super(key: key);
 
   @override
@@ -21,35 +23,71 @@ class HomeViewBody extends StatelessWidget {
   Widget _buildScrollView({required BuildContext context}) {
     return Query(
         options: QueryOptions<List<Chat>>(
+            fetchPolicy: FetchPolicy.networkOnly,
+            parserFn: (Map<String, dynamic> json) {
+              var rawList = List.of(json["getChats"]);
+              return rawList
+                  .map((jsonChat) => Chat.fromJSON(jsonChat))
+                  .toList();
+            },
+            document: gql(Queries.getGetQuery())),
+        builder: (QueryResult result,
+            {VoidCallback? refetch, FetchMore? fetchMore}) {
+          if (result.hasException) {
+            _logger.e(result.exception);
+            throw Exception(result.exception);
+          }
+          if (result.isLoading) {
+            _logger.i("Still loading");
+            return const Text("Loading chats");
+          }
+          _logger.d(result.data ?? "Data is undefined");
+          _chats = result.parsedData as List<Chat>;
+          return ListView(
+            children:
+                _chats.map((chatData) => Text(chatData.description)).toList(),
+          );
+        });
+  }
+
+  Widget _buildUpdateScrollView({required BuildContext context}) {
+    return Subscription(
+        options: SubscriptionOptions(
           parserFn: (Map<String, dynamic> json) {
-            var rawList = List.of(json["getChats"]);
-            return rawList.map((jsonChat) => Chat.fromJSON(jsonChat)).toList();
+            return Chat.fromJSON(json["chatCreated"]);
           },
-        document: gql(Queries.getGetQuery())
-    ), builder: (QueryResult result, { VoidCallback? refetch, FetchMore? fetchMore }) {
-      if (result.hasException) {
-        _logger.e(result.exception);
-        throw Exception(result.exception);
-      }
-      if (result.isLoading) {
-        _logger.i("Still loading");
-        return const Text("Loading chats");
-      }
-      _logger.d(result.data ?? "Data is undefined");
-      var chats = result.parsedData as List<Chat>;
-      return ListView(
-        children: chats.map((chatData) => Text(chatData.message)).toList(),
-      );
-    });
+          document: gql(Queries.subscribeToNewChat()),
+        ),
+        builder: (result) {
+          if (result.hasException) {
+            _logger.e(result.exception);
+            return Text(result.exception.toString());
+          }
+
+          if (result.isLoading) {
+            return const Center(
+              child: CircularProgressIndicator(),
+            );
+          }
+          // ResultAccumulator is a provided helper widget for collating subscription results.
+          _logger.d(result.data ?? "Data is undefined");
+          var chat = result.parsedData as Chat;
+          return ResultAccumulator.appendUniqueEntries(
+            latest: _chats,
+            builder: (context, {results}) =>
+                ListView(children: [Text(chat.name)]),
+          );
+        });
   }
 
   /// Build the scroll view with all the information
   Widget _buildBodyView({required BuildContext context}) {
     return Column(
       children: [
         Expanded(child: _buildScrollView(context: context)),
+        const Expanded(child: Text("Subscription data")),
+        Expanded(child: _buildUpdateScrollView(context: context)),
       ],
     );
   }
-
-}
+}

packages/graphql_flutter/example/graphql_chat/lib/view/home_view.dart

@@ -81,4 +81,4 @@ class _HomeViewState extends State<HomeView> {
       },
     );
   }
-}
+}

packages/graphql_flutter/example/graphql_chat/pubspec.yaml

@@ -25,35 +25,8 @@ dev_dependencies:
 dependency_overrides:
   graphql_flutter:
     path: ../../
+  graphql:
+    path: ../../../graphql
 
 flutter:
-  uses-material-design: true
-  # assets:
-  #   - images/a_dot_burr.jpeg
-  #   - images/a_dot_ham.jpeg
-
-  # An image asset can refer to one or more resolution-specific "variants", see
-  # https://flutter.dev/assets-and-images/#resolution-aware
-
-  # For details regarding adding assets from package dependencies, see
-  # https://flutter.dev/assets-and-images/#from-packages
-
-  # To add custom fonts to your application, add a fonts section here,
-  # in this "flutter" section. Each entry in this list should have a
-  # "family" key with the font family name, and a "fonts" key with a
-  # list giving the asset and other descriptors for the font. For
-  # example:
-  # fonts:
-  #   - family: Schyler
-  #     fonts:
-  #       - asset: fonts/Schyler-Regular.ttf
-  #       - asset: fonts/Schyler-Italic.ttf
-  #         style: italic
-  #   - family: Trajan Pro
-  #     fonts:
-  #       - asset: fonts/TrajanPro.ttf
-  #       - asset: fonts/TrajanPro_Bold.ttf
-  #         weight: 700
-  #
-  # For details regarding fonts from package dependencies,
-  # see https://flutter.dev/custom-fonts/#from-packages
+  uses-material-design: true

packages/graphql_flutter/example/graphql_chat/test/widget_test.dart

@@ -8,5 +8,5 @@
 import 'package:flutter_test/flutter_test.dart';
 
 void main() {
-  testWidgets('Counter increments smoke test', (WidgetTester tester) async { });
+  testWidgets('Counter increments smoke test', (WidgetTester tester) async {});
 }