(preact) - Update @urql/preact implementation to match React bindings (…

…#1008)

.changeset/famous-penguins-tickle.md

@@ -0,0 +1,5 @@
+---
+'@urql/preact': minor
+---
+
+Update `@urql/preact` implementation to match `urql` React implementation. Internally these changes should align behaviour and updates slightly, but outwardly no changes should be apparent apart from how some updates are scheduled.

packages/preact-urql/src/hooks/constants.ts

@@ -0,0 +1,8 @@
+export const initialState = {
+  fetching: false,
+  stale: false,
+  error: undefined,
+  data: undefined,
+  extensions: undefined,
+  operation: undefined,
+};

packages/preact-urql/src/hooks/useMutation.ts

@@ -1,16 +1,17 @@
-import { useCallback } from 'preact/hooks';
 import { DocumentNode } from 'graphql';
+import { useState, useCallback, useRef, useEffect } from 'preact/hooks';
 import { pipe, toPromise } from 'wonka';
+
 import {
-  Operation,
+  OperationResult,
   OperationContext,
   CombinedError,
   createRequest,
-  OperationResult,
+  Operation,
 } from '@urql/core';
+
 import { useClient } from '../context';
-import { useImmediateState } from './useImmediateState';
-import { initialState } from './useQuery';
+import { initialState } from './constants';
 
 export interface UseMutationState<T> {
   fetching: boolean;
@@ -29,21 +30,17 @@ export type UseMutationResponse<T, V> = [
   ) => Promise<OperationResult<T>>
 ];
 
-export const useMutation = <T = any, V = object>(
+export function useMutation<T = any, V = object>(
   query: DocumentNode | string
-): UseMutationResponse<T, V> => {
+): UseMutationResponse<T, V> {
+  const isMounted = useRef(true);
   const client = useClient();
 
-  const [state, setState] = useImmediateState<UseMutationState<T>>({
-    ...initialState,
-  });
+  const [state, setState] = useState<UseMutationState<T>>(initialState);
 
   const executeMutation = useCallback(
     (variables?: V, context?: Partial<OperationContext>) => {
-      setState({
-        ...initialState,
-        fetching: true,
-      });
+      setState({ ...initialState, fetching: true });
 
       return pipe(
         client.executeMutation(
@@ -52,20 +49,28 @@ export const useMutation = <T = any, V = object>(
         ),
         toPromise
       ).then(result => {
-        setState({
-          fetching: false,
-          stale: !!result.stale,
-          data: result.data,
-          error: result.error,
-          extensions: result.extensions,
-          operation: result.operation,
-        });
+        if (isMounted.current) {
+          setState({
+            fetching: false,
+            stale: !!result.stale,
+            data: result.data,
+            error: result.error,
+            extensions: result.extensions,
+            operation: result.operation,
+          });
+        }
         return result;
       });
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [client, query, setState]
   );
 
+  useEffect(() => {
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
+
   return [state, executeMutation];
-};
+}

packages/preact-urql/src/hooks/useQuery.test.tsx

@@ -262,20 +262,22 @@ describe('useQuery', () => {
         unmount();
       });
 
-      expect(start).toBeCalledTimes(1);
-      expect(unsubscribe).toBeCalledTimes(1);
+      expect(start).toBeCalledTimes(2);
+      expect(unsubscribe).toBeCalledTimes(2);
     });
   });
 
   describe('active teardown', () => {
     it('sets fetching to false when the source ends', () => {
       client.executeQuery.mockReturnValueOnce(empty);
-      render(
-        h(Provider, {
-          value: client as any,
-          children: [h(QueryUser, { ...props })],
-        })
-      );
+      act(() => {
+        render(
+          h(Provider, {
+            value: client as any,
+            children: [h(QueryUser, { ...props })],
+          })
+        );
+      });
       expect(client.executeQuery).toHaveBeenCalled();
       expect(state).toMatchObject({ fetching: false });
     });
@@ -313,15 +315,6 @@ describe('useQuery', () => {
         })
       );
 
-      /**
-       * Call update twice for the change to be detected.
-       */
-      rerender(
-        h(Provider, {
-          value: client as any,
-          children: [h(QueryUser, { ...props, pause: true })],
-        })
-      );
       rerender(
         h(Provider, {
           value: client as any,