Enable to add listeners for clearStore (#4082)

* Enable to add listeners for clearStore

* Formatting adjustments

* Add `onClearStore` to the Apollo Client API docs

* Adjust `onResetStore`/`onClearStore` comment grammar

* Bump allowed `apollo-client` bundle size

* Changelog update

CHANGELOG.md

@@ -6,6 +6,9 @@
 
 - Apollo Client has been updated to use `graphql` 14.x as a dev dependency.  <br/>
   [@hwillson](https://github.com/hwillson) in [#4233](https://github.com/apollographql/apollo-client/pull/4233)
+- The `onClearStore` function can now be used to register callbacks that should
+  be triggered when calling `clearStore`.  <br/>
+  [@joe-re](https://github.com/joe-re) in [#4082](https://github.com/apollographql/apollo-client/pull/4082)
 - Documentation updates.  <br/>
   [@lifedup](https://github.com/lifedup) in [#3931](https://github.com/apollographql/apollo-client/pull/3931)  <br />
   [@Dem0n3D](https://github.com/Dem0n3D) in [#4008](https://github.com/apollographql/apollo-client/pull/4008)  <br />

docs/source/api/apollo-client.md

@@ -52,6 +52,7 @@ The `ApolloClient` class is the core API for Apollo, and the one you'll need to
 {% tsapibox ApolloClient.resetStore %}
 {% tsapibox ApolloClient.onResetStore %}
 {% tsapibox ApolloClient.clearStore %}
+{% tsapibox ApolloClient.onClearStore %}
 
 <h2 id="ObservableQuery">ObservableQuery</h2>
 

package.json

@@ -34,7 +34,7 @@
     {
       "name": "apollo-client",
       "path": "./packages/apollo-client/lib/bundle.min.js",
-      "maxSize": "10 kB"
+      "maxSize": "10.25 kB"
     },
     {
       "name": "apollo-boost",

packages/apollo-client/src/ApolloClient.ts

@@ -73,6 +73,7 @@ export default class ApolloClient<TCacheShape> implements DataProxy {
   private proxy: ApolloCache<TCacheShape> | undefined;
   private ssrMode: boolean;
   private resetStoreCallbacks: Array<() => Promise<any>> = [];
+  private clearStoreCallbacks: Array<() => Promise<any>> = [];
   private clientAwareness: Record<string, string> = {};
 
   /**
@@ -486,23 +487,38 @@ export default class ApolloClient<TCacheShape> implements DataProxy {
    */
   public clearStore(): Promise<void | null> {
     const { queryManager } = this;
-    return Promise.resolve().then(() =>
-      queryManager ? queryManager.clearStore() : Promise.resolve(null),
-    );
+    return Promise.resolve()
+      .then(() => Promise.all(this.clearStoreCallbacks.map(fn => fn())))
+      .then(
+        () =>
+          queryManager ? queryManager.clearStore() : Promise.resolve(null),
+      );
   }
 
   /**
-   * Allows callbacks to be registered that are executed with the store is reset.
-   * onResetStore returns an unsubscribe function for removing your registered callbacks.
+   * Allows callbacks to be registered that are executed when the store is
+   * reset. `onResetStore` returns an unsubscribe function that can be used
+   * to remove registered callbacks.
    */
-
   public onResetStore(cb: () => Promise<any>): () => void {
     this.resetStoreCallbacks.push(cb);
     return () => {
       this.resetStoreCallbacks = this.resetStoreCallbacks.filter(c => c !== cb);
     };
   }
 
+  /**
+   * Allows callbacks to be registered that are executed when the store is
+   * cleared. `onClearStore` returns an unsubscribe function that can be used
+   * to remove registered callbacks.
+   */
+  public onClearStore(cb: () => Promise<any>): () => void {
+    this.clearStoreCallbacks.push(cb);
+    return () => {
+      this.clearStoreCallbacks = this.clearStoreCallbacks.filter(c => c !== cb);
+    };
+  }
+
   /**
    * Refetches all of your active queries.
    *

packages/apollo-client/src/__tests__/client.ts

@@ -2200,6 +2200,48 @@ describe('client', () => {
       });
   });
 
+  it('has a clearStore method which calls QueryManager', done => {
+    const client = new ApolloClient({
+      link: ApolloLink.empty(),
+      cache: new InMemoryCache(),
+    });
+    client.queryManager = {
+      clearStore: () => {
+        done();
+      },
+    } as QueryManager;
+    client.clearStore();
+  });
+
+  it('has an onClearStore method which takes a callback to be called after clearStore', async () => {
+    const client = new ApolloClient({
+      link: ApolloLink.empty(),
+      cache: new InMemoryCache(),
+    });
+
+    const onClearStore = jest.fn();
+    client.onClearStore(onClearStore);
+
+    await client.clearStore();
+
+    expect(onClearStore).toHaveBeenCalled();
+  });
+
+  it('onClearStore returns a method that unsubscribes the callback', async () => {
+    const client = new ApolloClient({
+      link: ApolloLink.empty(),
+      cache: new InMemoryCache(),
+    });
+
+    const onClearStore = jest.fn();
+    const unsubscribe = client.onClearStore(onClearStore);
+
+    unsubscribe();
+
+    await client.clearStore();
+    expect(onClearStore).not.toHaveBeenCalled();
+  });
+
   it('has a resetStore method which calls QueryManager', done => {
     const client = new ApolloClient({
       link: ApolloLink.empty(),