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

[lllttt06]

What does this change?

Add DevTools Extension to display GraphQL cache inspired by Apollo Client.

https://github.com/user-attachments/assets/ff7bd19c-d138-4b64-9ade-f654c216cf84

To create DevTools Extension

To create DevTools Extension, using devtools_extension and these are required.

• packages/graphql_devtools_extension/
• packages/graphql/extension/config.yaml
• packages/graphql/extension/build/ (this is gitignored but you should add before publishing to Pub.dev) ^1

packages/graphql_devtools_extension/

DevTools Extension must be built by Flutter web app, packages/graphql_devtools_extension/ contains DevTools Extension's Flutter web code ^2. Also packages/graphql/lib/src/graphql_client.dart has logic to interact with application with graphql and DevTools Extension.

registerExtension(
  'ext.graphql.getCache',
  (method, parameters) async {
    return ServiceExtensionResponse.result(
        jsonEncode({'value': this.cache.store.toMap()}));
  },
);

packages/graphql/extension/config.yaml

This file has DevTools Extension configuration.

packages/graphql/extension/build/

This directory is not included because of .gitignore. However you need to create this directory by this command.^3

cd graphql_devtools_extension
flutter pub get
dart run devtools_extensions build_and_copy --source=. --dest=../graphql/extension/devtools

[vincenzopalazzo]

I can ask why do not make another package outside of this repo? just asking I will review soon

[lllttt06]

You mean why I didn't create another package only for displaying GraphQLClient cache? Because I need to interact with GraphQLClient directly to use cache data inside DevTools Extension like Provider package DevTools Extension.

More detail, I have to register Extension inside GraphQLClient constructor.

// 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()}));
  },