Replace useImmediate* hooks with react-wonka (#447)

* Add react-wonka

* Rewrite useQuery using react-wonka's useSubjectValue

* Rewrite useSubscription using react-wonka's useSubjectValue

* Remove useImmediate* hooks and update useMutation

* Remove react-wonka from externals

It's probably fair to bundle this for now.
It's tiny and this way we can compare the bundlesize
to before (+.02kB min+gzip)

* Refactor useQuery / useSubscription

This gets rid of some of the internal structures and
functions in favour of a simpler Source memo.

* Replace some things for more code reuse in useQuery/useSubscription

Author: kitten

package.json

@@ -133,6 +133,7 @@
     "react-dom": ">= 16.8.0"
   },
   "dependencies": {
+    "react-wonka": "^1.0.1",
     "wonka": "^3.2.1"
   }
 }

rollup.config.js

@@ -9,15 +9,14 @@ import { terser } from 'rollup-plugin-terser';
 import transformPipe from './scripts/transform-pipe';
 
 const pkgInfo = require('./package.json');
-const external = ['dns', 'fs', 'path', 'url'];
 
-if (pkgInfo.peerDependencies) {
+let external = ['dns', 'fs', 'path', 'url'];
+if (pkgInfo.peerDependencies)
   external.push(...Object.keys(pkgInfo.peerDependencies));
-}
-
-if (pkgInfo.dependencies) {
+if (pkgInfo.dependencies)
   external.push(...Object.keys(pkgInfo.dependencies));
-}
+
+external = external.filter(x => x !== 'react-wonka');
 
 const externalPredicate = new RegExp(`^(${external.join('|')})($|/)`);
 const externalTest = id => {

src/hooks/useImmediateEffect.test.ts

@@ -1,10 +1,9 @@
 import { DocumentNode } from 'graphql';
-import { useCallback } from 'react';
+import { useState, useCallback } from 'react';
 import { pipe, toPromise } from 'wonka';
 import { useClient } from '../context';
 import { OperationResult, OperationContext } from '../types';
 import { CombinedError, createRequest } from '../utils';
-import { useImmediateState } from './useImmediateState';
 
 export interface UseMutationState<T> {
   fetching: boolean;
@@ -25,7 +24,8 @@ export const useMutation = <T = any, V = object>(
   query: DocumentNode | string
 ): UseMutationResponse<T, V> => {
   const client = useClient();
-  const [state, setState] = useImmediateState<UseMutationState<T>>({
+
+  const [state, setState] = useState<UseMutationState<T>>({
     fetching: false,
     error: undefined,
     data: undefined,

src/hooks/useImmediateEffect.ts

@@ -1,12 +1,19 @@
 import { DocumentNode } from 'graphql';
-import { useCallback, useRef } from 'react';
-import { pipe, onEnd, subscribe } from 'wonka';
+import { useCallback, useMemo } from 'react';
+import { pipe, concat, fromValue, switchMap, map, scan } from 'wonka';
+import { useSubjectValue } from 'react-wonka';
+
 import { useClient } from '../context';
 import { OperationContext, RequestPolicy } from '../types';
-import { CombinedError, noop } from '../utils';
+import { CombinedError } from '../utils';
 import { useRequest } from './useRequest';
-import { useImmediateEffect } from './useImmediateEffect';
-import { useImmediateState } from './useImmediateState';
+
+const initialState: UseQueryState<any> = {
+  fetching: false,
+  data: undefined,
+  error: undefined,
+  extensions: undefined,
+};
 
 export interface UseQueryArgs<V> {
   query: string | DocumentNode;
@@ -32,61 +39,60 @@ export type UseQueryResponse<T> = [
 export const useQuery = <T = any, V = object>(
   args: UseQueryArgs<V>
 ): UseQueryResponse<T> => {
-  const unsubscribe = useRef(noop);
   const client = useClient();
 
-  // This is like useState but updates the state object
-  // immediately, when we're still before the initial mount
-  const [state, setState] = useImmediateState<UseQueryState<T>>({
-    fetching: false,
-    data: undefined,
-    error: undefined,
-    extensions: undefined,
-  });
-
   // This creates a request which will keep a stable reference
   // if request.key doesn't change
   const request = useRequest(args.query, args.variables);
 
-  const executeQuery = useCallback(
+  // Create a new query-source from client.executeQuery
+  const makeQuery$ = useCallback(
     (opts?: Partial<OperationContext>) => {
-      unsubscribe.current();
+      return client.executeQuery(request, {
+        requestPolicy: args.requestPolicy,
+        pollInterval: args.pollInterval,
+        ...args.context,
+        ...opts,
+      });
+    },
+    [client, request, args.requestPolicy, args.pollInterval, args.context]
+  );
 
-      setState(s => ({ ...s, fetching: true }));
+  const [state, update] = useSubjectValue(
+    query$$ =>
+      pipe(
+        query$$,
+        switchMap(query$ => {
+          if (!query$) return fromValue({ fetching: false });
 
-      [unsubscribe.current] = pipe(
-        client.executeQuery(request, {
-          requestPolicy: args.requestPolicy,
-          pollInterval: args.pollInterval,
-          ...args.context,
-          ...opts,
+          return concat([
+            // Initially set fetching to true
+            fromValue({ fetching: true }),
+            pipe(
+              query$,
+              map(({ data, error, extensions }) => ({
+                fetching: false,
+                data,
+                error,
+                extensions,
+              }))
+            ),
+            // When the source proactively closes, fetching is set to false
+            fromValue({ fetching: false }),
+          ]);
         }),
-        onEnd(() => setState(s => ({ ...s, fetching: false }))),
-        subscribe(({ data, error, extensions }) => {
-          setState({ fetching: false, data, error, extensions });
-        })
-      );
-    },
-    [
-      args.context,
-      args.requestPolicy,
-      args.pollInterval,
-      client,
-      request,
-      setState,
-    ]
+        // The individual partial results are merged into each previous result
+        scan((result, partial) => ({ ...result, ...partial }), initialState)
+      ),
+    useMemo(() => (args.pause ? null : makeQuery$()), [args.pause, makeQuery$]),
+    initialState
   );
 
-  useImmediateEffect(() => {
-    if (args.pause) {
-      unsubscribe.current();
-      setState(s => ({ ...s, fetching: false }));
-      return noop;
-    }
-
-    executeQuery();
-    return () => unsubscribe.current(); // eslint-disable-line
-  }, [executeQuery, args.pause, setState]);
+  // This is the imperative execute function passed to the user
+  const executeQuery = useCallback(
+    (opts?: Partial<OperationContext>) => update(makeQuery$(opts)),
+    [update, makeQuery$]
+  );
 
   return [state, executeQuery];
 };