Add useState to dispatcher

Author: markusjwetzel

src/useDispatcher.js

@@ -1,4 +1,4 @@
-import { useContext, useRef } from 'react';
+import { useContext, useState, useRef } from 'react';
 import TransporterContext from './TransporterContext';
 
 const PENDING = 'pending';
@@ -20,67 +20,64 @@ export default function useDispatcher() {
     throw new Error('Dispatcher hook is used outside of TransporterContext.');
   }
 
+  const [state, setState] = useState({
+    ok: null,
+    loading: false,
+    executed: false,
+    error: null,
+  });
+
   const instances = useRef([]);
 
-  return {
-    dispatch(ast, options) {
-      const operation = ast.definitions.find(
-        (def) => def.kind === 'OperationDefinition',
-      )?.operation;
+  const updateState = (instance) => {
+    const latestInstance = getLatestInstance(instances);
+
+    if (latestInstance !== instance) {
+      return;
+    }
 
-      if (operation !== 'query' && operation !== 'mutation') {
-        throw new Error(
-          'No operation found. Must be either "query" or "mutation".',
-        );
-      }
+    const { status } = instance.resource;
 
-      const instance =
-        operation === 'query'
-          ? context.client.query(ast, options)
-          : context.client.mutate(ast, options);
+    setState({
+      ok: status === PENDING ? null : status === FULFILLED,
+      loading: status === PENDING,
+      executed: status === FULFILLED || status === REJECTED,
+      error: status !== REJECTED ? null : instance.resource.response,
+    });
+  };
 
-      instances.current.push(instance);
+  const dispatch = (ast, options) => {
+    const operation = ast.definitions.find(
+      (def) => def.kind === 'OperationDefinition',
+    )?.operation;
 
-      // Return cached selector set.
-      return instance.resource.promise.then(() =>
-        instance.cache.graphData.getQuery(),
+    if (operation !== 'query' && operation !== 'mutation') {
+      throw new Error(
+        'No operation found. Must be either "query" or "mutation".',
       );
-    },
-    get ok() {
-      const instance = getLatestInstance(instances);
-
-      if (!instance || instance.status === PENDING) {
-        return null;
-      }
-
-      return instance.status === FULFILLED;
-    },
-    get loading() {
-      const instance = getLatestInstance(instances);
-
-      if (!instance) {
-        return false;
-      }
-
-      return instance.status === PENDING;
-    },
-    get executed() {
-      const instance = getLatestInstance(instances);
-
-      if (!instance) {
-        return false;
-      }
-
-      return instance.status === FULFILLED || instance.status === REJECTED;
-    },
-    get error() {
-      const instance = getLatestInstance(instances);
-
-      if (!instance || instance.status !== REJECTED) {
-        return null;
-      }
-
-      return instance.response;
-    },
+    }
+
+    const instance =
+      operation === 'query'
+        ? context.client.query(ast, options)
+        : context.client.mutate(ast, options);
+
+    instances.current.push(instance);
+
+    updateState(instance);
+
+    // Update state and return cached selector set.
+    return instance.resource.promise.then(
+      () => {
+        updateState(instance);
+        return instance.cache.graphData.getQuery();
+      },
+      (err) => {
+        updateState(instance);
+        throw err;
+      },
+    );
   };
+
+  return [dispatch, state];
 }