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.

graphql_cache_inspector.mp4

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) ¹

packages/graphql_devtools_extension/

DevTools Extension must be built by Flutter web app, packages/graphql_devtools_extension/ contains DevTools Extension's Flutter web code ². 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.³

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

Footnotes

1. https://pub.dev/packages/devtools_extensions#what-if-i-dont-want-the-extensiondevtoolsbuild-contents-checked-into-source-control ↩

2. https://pub.dev/packages/devtools_extensions#create-a-devtools-extension ↩

3. https://pub.dev/packages/devtools_extensions#create-a-devtools-extension:~:text=define%3Duse_simulated_environment%3Dtrue-,Use%20a%20real%20DevTools%20Environment,-To%20use%20a ↩

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