New internal event system.

DevHawkNov · DevHawkNov · commit 8e94d336c1d1 · 2018-10-18T21:42:39.000+11:00
Fixes jaydenseric/graphql-react#10.
diff --git a/changelog.md b/changelog.md
@@ -5,6 +5,7 @@
 ### Major
 
 - The `Query` (and the internal `GraphQLQuery`) component take an `operation` prop instead of separate `variables` and `query` props. This makes the implementation a little more elegant, is more consistent with the `GraphQL.query` API and allows sending custom GraphQL operation fields.
+- New internal event system, fixing [#10](https://github.com/jaydenseric/graphql-react/issues/10). Now the `loading` parameter of `Query` component render functions change when identical requests are loaded elsewhere in the app.
 
 ### Minor
 
diff --git a/package.json b/package.json
@@ -42,6 +42,7 @@
     "extract-files": "^4.0.0",
     "fast-deep-equal": "^2.0.1",
     "fnv1a": "^1.0.1",
+    "mitt": "^1.1.3",
     "object-assign": "^4.1.1",
     "prop-types": "^15.6.1"
   },
diff --git a/readme.md b/readme.md
@@ -182,9 +182,9 @@ Queries a GraphQL server.
 
 Resets the [GraphQL cache](#graphql-instance-property-cache). Useful when a user logs out.
 
-| Parameter                | Type                             | Description                                                                                                                                                     |
-| :----------------------- | :------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `exceptFetchOptionsHash` | [string](https://mdn.io/string)? | A [fetch options](#type-fetchoptions) hash to exempt a request from cache deletion. Useful for resetting cache after a mutation, preserving the mutation cache. |
+| Parameter                | Type                             | Description                                                                                                                                               |
+| :----------------------- | :------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `exceptFetchOptionsHash` | [string](https://mdn.io/string)? | A [fetch options](#type-fetchoptions) hash for cache to exempt from deletion. Useful for resetting cache after a mutation, preserving the mutation cache. |
 
 ##### Examples
 
diff --git a/src/components.mjs b/src/components.mjs
@@ -84,6 +84,9 @@ class GraphQLQuery extends React.Component {
     this.state = { loading: props.loadOnMount }
 
     if (props.loadOnMount) {
+      // Populate the request cache state to render data for SSR and while
+      // the load called in componentDidMount on the client fetches fresh data.
+
       const fetchOptions = props.graphql.constructor.fetchOptions(
         props.operation
       )
@@ -95,31 +98,55 @@ class GraphQLQuery extends React.Component {
       )
 
       this.state.requestCache = props.graphql.cache[this.state.fetchOptionsHash]
-
-      // Listen for changes to the request cache.
-      this.props.graphql.onCacheUpdate(
-        this.state.fetchOptionsHash,
-        this.handleCacheUpdate
-      )
     }
+
+    // Setup listeners.
+    this.props.graphql.on('fetch', this.onFetch)
+    this.props.graphql.on('cache', this.onCache)
+    this.props.graphql.on('reset', this.onReset)
   }
 
   /**
-   * Handles [request cache]{@link RequestCache} updates.
+   * Handles [GraphQL]{@link GraphQL} fetch
    * @kind function
-   * @name GraphQLQuery#handleCacheUpdate
-   * @param {RequestCache} requestCache Request cache.
+   * @name GraphQLQuery#onFetch
+   * @param {Object} details Event details.
+   * @param {string} [details.fetchOptionsHash] The [fetch options]{@link FetchOptions} hash.
    * @ignore
    */
-  handleCacheUpdate = requestCache => {
-    if (
-      // Cache has been reset and…
-      !requestCache &&
-      // …the component is to load on reset cache.
-      this.props.loadOnReset
-    )
-      this.load()
-    else this.setState({ requestCache })
+  onFetch = ({ fetchOptionsHash }) => {
+    if (fetchOptionsHash === this.state.fetchOptionsHash)
+      this.setState({ loading: true })
+  }
+
+  /**
+   * Handles [GraphQL]{@link GraphQL} cache
+   * @kind function
+   * @name GraphQLQuery#onCache
+   * @param {Object} details Event details.
+   * @param {string} [details.fetchOptionsHash] The cache [fetch options]{@link FetchOptions} hash.
+   * @ignore
+   */
+  onCache = ({ fetchOptionsHash }) => {
+    if (fetchOptionsHash === this.state.fetchOptionsHash)
+      this.setState({
+        loading: false,
+        requestCache: this.props.graphql.cache[fetchOptionsHash]
+      })
+  }
+
+  /**
+   * Handles [GraphQL]{@link GraphQL} reset
+   * @kind function
+   * @name GraphQLQuery#onReset
+   * @param {Object} details Event details.
+   * @param {string} [details.exceptFetchOptionsHash] A [fetch options]{@link FetchOptions} hash for cache exempt from deletion.
+   * @ignore
+   */
+  onReset = ({ exceptFetchOptionsHash }) => {
+    if (exceptFetchOptionsHash !== this.state.fetchOptionsHash)
+      if (this.props.loadOnReset) this.load()
+      else this.setState({ requestCache: null })
   }
 
   /**
@@ -130,43 +157,13 @@ class GraphQLQuery extends React.Component {
    * @ignore
    */
   load = () => {
-    const stateUpdate = { loading: true }
     const { fetchOptionsHash, cache, request } = this.props.graphql.query({
       operation: this.props.operation,
       fetchOptionsOverride: this.props.fetchOptionsOverride,
       resetOnLoad: this.props.resetOnLoad
     })
 
-    if (
-      // The fetch options hash has changed…
-      fetchOptionsHash !== this.state.fetchOptionsHash
-    ) {
-      stateUpdate.fetchOptionsHash = fetchOptionsHash
-
-      // Stop listening for the old request cache updates.
-      this.props.graphql.offCacheUpdate(
-        this.state.fetchOptionsHash, // Old hash.
-        this.handleCacheUpdate
-      )
-
-      // Listen for the new request cache updates.
-      this.props.graphql.onCacheUpdate(
-        fetchOptionsHash, // New hash.
-        this.handleCacheUpdate
-      )
-    }
-
-    if (cache)
-      // Use past cache for this request during load. It might not already
-      // be in state if the request was cached via another component.
-      stateUpdate.requestCache = cache
-
-    this.setState(stateUpdate, () =>
-      request.then(() =>
-        // Request done. Elsewhere a cache listener updates the state cache.
-        this.setState({ loading: false })
-      )
-    )
+    this.setState({ loading: true, fetchOptionsHash, cache })
 
     return request
   }
@@ -190,15 +187,13 @@ class GraphQLQuery extends React.Component {
    * @ignore
    */
   componentDidUpdate({ operation }) {
-    if (
-      // Load on cache reset enabled and…
-      this.props.loadOnReset &&
-      // …a load has happened before and…
-      this.state.fetchOptionsHash &&
-      // …props that may affect the cache have changed.
-      !equal(operation, this.props.operation)
-    )
-      this.load()
+    if (!equal(operation, this.props.operation))
+      if (this.props.loadOnMount) this.load()
+      else
+        this.setState({
+          fetchOptionsHash: null,
+          requestCache: null
+        })
   }
 
   /**
@@ -208,11 +203,9 @@ class GraphQLQuery extends React.Component {
    * @ignore
    */
   componentWillUnmount() {
-    if (this.state.fetchOptionsHash)
-      this.props.graphql.offCacheUpdate(
-        this.state.fetchOptionsHash,
-        this.handleCacheUpdate
-      )
+    this.props.graphql.off('fetch', this.onFetch)
+    this.props.graphql.off('cache', this.onCache)
+    this.props.graphql.off('reset', this.onReset)
   }
 
   /**
diff --git a/src/graphql.mjs b/src/graphql.mjs
@@ -1,5 +1,6 @@
-import fnv1a from 'fnv1a'
 import { extractFiles } from 'extract-files'
+import fnv1a from 'fnv1a'
+import mitt from 'mitt'
 
 /**
  * A lightweight GraphQL client that caches requests.
@@ -82,7 +83,8 @@ export class GraphQL {
   // eslint-disable-next-line require-jsdoc
   constructor({ cache = {} } = {}) {
     /**
-     * GraphQL [request cache]{@link RequestCache} map, keyed by [fetch options]{@link FetchOptions} hashes.
+     * GraphQL [request cache]{@link RequestCache} map, keyed by
+     * [fetch options]{@link FetchOptions} hashes.
      * @kind member
      * @name GraphQL#cache
      * @type {Object.<string, RequestCache>}
@@ -92,63 +94,55 @@ export class GraphQL {
      * ```
      */
     this.cache = cache
-  }
 
-  requests = {}
-  listeners = {}
+    /**
+     * Loading requests.
+     * @kind member
+     * @name GraphQL#requests
+     * @type {Promise<RequestCache>}
+     * @ignore
+     */
+    this.requests = {}
 
-  /**
-   * Adds a cache update listener for a request.
-   * @kind function
-   * @name GraphQL#onCacheUpdate
-   * @param {string} fetchOptionsHash [fetch options]{@link FetchOptions} hash.
-   * @param {CacheUpdateCallback} callback Callback.
-   * @ignore
-   */
-  onCacheUpdate = (fetchOptionsHash, callback) => {
-    if (!this.listeners[fetchOptionsHash]) this.listeners[fetchOptionsHash] = []
-    this.listeners[fetchOptionsHash].push(callback)
-  }
+    const { on, off, emit } = mitt()
 
-  /**
-   * Removes a cache update listener for a request.
-   * @kind function
-   * @name GraphQL#offCacheUpdate
-   * @param {string} fetchOptionsHash [fetch options]{@link FetchOptions} hash.
-   * @param {CacheUpdateCallback} callback Callback.
-   * @ignore
-   */
-  offCacheUpdate = (fetchOptionsHash, callback) => {
-    if (this.listeners[fetchOptionsHash]) {
-      this.listeners[fetchOptionsHash] = this.listeners[
-        fetchOptionsHash
-      ].filter(listenerCallback => listenerCallback !== callback)
-      if (!this.listeners[fetchOptionsHash].length)
-        delete this.listeners[fetchOptionsHash]
-    }
-  }
+    /**
+     * Adds an event listener.
+     * @kind function
+     * @name GraphQL#on
+     * @param {String} type Event type.
+     * @param {function} handler Event handler.
+     * @ignore
+     */
+    this.on = on
 
-  /**
-   * Triggers cache update listeners for a request.
-   * @kind function
-   * @name GraphQL#emitCacheUpdate
-   * @param {string} fetchOptionsHash [fetch options]{@link FetchOptions} hash.
-   * @param {RequestCache} requestCache Request cache.
-   * @ignore
-   */
-  emitCacheUpdate = (fetchOptionsHash, requestCache) => {
-    if (this.listeners[fetchOptionsHash])
-      this.listeners[fetchOptionsHash].forEach(callback =>
-        callback(requestCache)
-      )
+    /**
+     * Removes an event listener.
+     * @kind function
+     * @name GraphQL#off
+     * @param {String} type Event type.
+     * @param {function} handler Event handler.
+     * @ignore
+     */
+    this.off = off
+
+    /**
+     * Emits an event with details to listeners.
+     * @kind function
+     * @name GraphQL#emit
+     * @param {String} type Event type.
+     * @param {*} [details] Event details.
+     * @ignore
+     */
+    this.emit = emit
   }
 
   /**
    * Resets the [GraphQL cache]{@link GraphQL#cache}. Useful when a user logs
    * out.
    * @kind function
    * @name GraphQL#reset
-   * @param {string} [exceptFetchOptionsHash] A [fetch options]{@link FetchOptions} hash to exempt a request from cache deletion. Useful for resetting cache after a mutation, preserving the mutation cache.
+   * @param {string} [exceptFetchOptionsHash] A [fetch options]{@link FetchOptions} hash for cache to exempt from deletion. Useful for resetting cache after a mutation, preserving the mutation cache.
    * @example <caption>Resetting the GraphQL cache.</caption>
    * ```js
    * graphql.reset()
@@ -168,9 +162,7 @@ export class GraphQL {
 
     // Emit cache updates after the entire cache has been updated, so logic in
     // listeners can assume cache for all requests is fresh and stable.
-    fetchOptionsHashes.forEach(fetchOptionsHash =>
-      this.emitCacheUpdate(fetchOptionsHash)
-    )
+    this.emit('reset', { exceptFetchOptionsHash })
   }
 
   /**
@@ -192,6 +184,8 @@ export class GraphQL {
               new Error('Global fetch API or polyfill unavailable.')
             )
 
+    this.emit('fetch', { fetchOptionsHash })
+
     return (this.requests[fetchOptionsHash] = fetcher(url, options))
       .then(
         response => {
@@ -222,11 +216,12 @@ export class GraphQL {
       .then(() => {
         // Cache the request.
         this.cache[fetchOptionsHash] = requestCache
-        this.emitCacheUpdate(fetchOptionsHash, requestCache)
 
         // Clear the done request.
         delete this.requests[fetchOptionsHash]
 
+        this.emit('cache', { fetchOptionsHash })
+
         return requestCache
       })
   }
diff --git a/src/test.mjs b/src/test.mjs
@@ -572,6 +572,7 @@ t.test('Cache reset.', async t => {
     .use(execute({ schema, rootValue }))
   const port = await startServer(t, app)
   const graphql = new GraphQL()
+
   const {
     fetchOptionsHash: fetchOptionsHash1,
     request: request1
@@ -588,10 +589,8 @@ t.test('Cache reset.', async t => {
   await request1
 
   const cacheBefore = JSON.stringify(graphql.cache)
-  const {
-    fetchOptionsHash: fetchOptionsHash2,
-    request: request2
-  } = graphql.query({
+
+  const { request: request2 } = graphql.query({
     fetchOptionsOverride(options) {
       options.url = `http://localhost:${port}`
     },
@@ -603,17 +602,13 @@ t.test('Cache reset.', async t => {
 
   await request2
 
-  graphql.onCacheUpdate(fetchOptionsHash1, () => t.fail())
+  t.plan(2)
 
-  const request2CacheListener = new Promise(resolve => {
-    graphql.onCacheUpdate(fetchOptionsHash2, resolve)
-  })
+  graphql.on('reset', () => t.pass('`reset` event.'))
 
   graphql.reset(fetchOptionsHash1)
 
   const cacheAfter = JSON.stringify(graphql.cache)
 
-  t.notOk(await request2CacheListener, 'On cache update listener didn’t run.')
-
   t.equals(cacheAfter, cacheBefore, 'Before and after reset cache match.')
 })
