feat(graphql_devtools_extension): Add DevTools extension to display GraphQLClient cache

docs/dev/MAINTAINERS.md

@@ -94,6 +94,7 @@ The version in our package.json gets copied to the one we publish, and users nee
 
 - **graphql**: Changes related to the graphql client
 - **graphql_flutter**: Changes related to the graphql_flutter package
+- **graphql_devtools_extension**: Changes related to the devtools extension
 
 
 ### Subject
@@ -155,4 +156,4 @@ if we make a release with the tag `v{version_number}` this will release all the
 
 Cheers!
 
-[Vincent](https://github.com/vincenzopalazzo)
+[Vincent](https://github.com/vincenzopalazzo)

packages/graphql/extension/devtools/.pubignore

@@ -0,0 +1 @@
+!build

packages/graphql/extension/devtools/config.yaml

@@ -0,0 +1,6 @@
+name: graphql 
+issueTracker: https://github.com/zino-hofmann/graphql-flutter/pulls
+version: 0.0.1
+materialIconCodePoint: '0xe4f9'
+requiresConnection: true
+

packages/graphql/lib/src/graphql_client.dart

@@ -1,3 +1,6 @@
+import 'dart:convert';
+import 'dart:developer';
+
 import 'package:meta/meta.dart';
 import 'dart:async';
 
@@ -6,6 +9,9 @@ import 'package:graphql/src/cache/cache.dart';
 
 import 'package:graphql/src/core/fetch_more.dart';
 
+/// Flag to register extension only once
+bool _isExtensionRegistered = false;
+
 /// Universal GraphQL Client with configurable caching and [link][] system.
 /// modelled after the [`apollo-client`][ac].
 ///
@@ -35,7 +41,21 @@ class GraphQLClient implements GraphQLDataProxy {
           alwaysRebroadcast: alwaysRebroadcast,
           deepEquals: deepEquals,
           deduplicatePollers: deduplicatePollers,
-        );
+        ) {
+    const releaseMode = bool.fromEnvironment('dart.vm.product');
+    // Register extension for not in release mode and not already registered
+    if (!releaseMode && !_isExtensionRegistered) {
+      // Register the extension to expose the cache to the devtools
+      registerExtension(
+        'ext.graphql.getCache',
+        (method, parameters) async {
+          return ServiceExtensionResponse.result(
+              jsonEncode({'value': this.cache.store.toMap()}));
+        },
+      );
+      _isExtensionRegistered = true;
+    }
+  }
 
   /// The default [Policies] to set for each client action
   late final DefaultPolicies defaultPolicies;

packages/graphql_devtools_extension/CAHNGELOG.md

@@ -0,0 +1,2 @@
+# v0.0.1
+Initial release

packages/graphql_devtools_extension/README.md

@@ -0,0 +1,7 @@
+This is the source of the graphql's devtool.
+
+You can locally run it with:
+
+```
+flutter run -d chrome --dart-define=use_simulated_environment=true
+```

packages/graphql_devtools_extension/analysis_options.yaml

@@ -0,0 +1,5 @@
+analyzer: 
+  language: 
+    strict-casts: true
+    strict-inference: true
+    strict-raw-types: true

packages/graphql_devtools_extension/lib/api/app_connection.dart

@@ -0,0 +1,12 @@
+import 'package:devtools_extensions/devtools_extensions.dart';
+
+class AppConnection {
+  static const _cacheApiKey = 'ext.graphql.getCache';
+  static const _cacheApiValueKey = 'value';
+
+  static Future<Map<String, dynamic>?> fetchCache() async {
+    final result =
+        await serviceManager.callServiceExtensionOnMainIsolate(_cacheApiKey);
+    return result.json?[_cacheApiValueKey] as Map<String, dynamic>?;
+  }
+}

packages/graphql_devtools_extension/lib/main.dart

@@ -0,0 +1,39 @@
+import 'package:devtools_extensions/devtools_extensions.dart';
+import 'package:flutter/material.dart';
+import 'package:graphql_devtools_extension/ui/cache_inspector/cache_inspector.dart';
+
+void main() {
+  runApp(DevToolsExtension(child: GraphQLDevToolsExtension()));
+}
+
+class GraphQLDevToolsExtension extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    return DefaultTabController(
+      length: 1,
+      child: Column(
+        children: [
+          Align(
+            alignment: Alignment.centerLeft,
+            child: TabBar(
+              isScrollable: true,
+              tabs: [
+                Tab(
+                  child: Text(
+                    'Cache Inspector',
+                    style: theme.textTheme.titleMedium,
+                  ),
+                )
+              ],
+            ),
+          ),
+          const SizedBox(height: 24),
+          Expanded(
+            child: TabBarView(children: [const CacheInspector()]),
+          ),
+        ],
+      ),
+    );
+  }
+}