Fix react warning

.changeset/few-squids-poke.md

@@ -0,0 +1,5 @@
+---
+'urql': patch
+---
+
+Avoid setting state on an unmounted component when useMutation is used

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

@@ -1,5 +1,5 @@
 import { DocumentNode } from 'graphql';
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useRef, useEffect } from 'react';
 import { pipe, toPromise } from 'wonka';
 
 import {
@@ -31,6 +31,7 @@ export type UseMutationResponse<T, V> = [
 export const useMutation = <T = any, V = object>(
   query: DocumentNode | string
 ): UseMutationResponse<T, V> => {
+  const isMounted = useRef(true);
   const client = useClient();
 
   const [state, setState] = useState<UseMutationState<T>>(initialState);
@@ -46,18 +47,26 @@ 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,
-        });
+        if (isMounted.current) {
+          setState({
+            fetching: false,
+            stale: !!result.stale,
+            data: result.data,
+            error: result.error,
+            extensions: result.extensions,
+          });
+        }
         return result;
       });
     },
     [client, query, setState]
   );
 
+  useEffect(() => {
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
+
   return [state, executeMutation];
 };

packages/react-urql/src/hooks/useSource.ts

@@ -1,6 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 
-import { useMemo, useEffect, useState } from 'react';
+import { useMemo, useEffect, useState, useRef } from 'react';
 
 import {
   Source,
@@ -19,6 +19,8 @@ import { useClient } from '../context';
 let currentInit = false;
 
 export const useSource = <T>(source: Source<T>, init: T): T => {
+  const isMounted = useRef(true);
+
   const [state, setState] = useState(() => {
     currentInit = true;
     let initialValue = init;
@@ -35,11 +37,17 @@ export const useSource = <T>(source: Source<T>, init: T): T => {
     return initialValue;
   });
 
+  useEffect(() => {
+    return () => {
+      isMounted.current = false;
+    }
+  })
+
   useEffect(() => {
     return pipe(
       source,
       subscribe(value => {
-        if (!currentInit) {
+        if (!currentInit && isMounted.current) {
           setState(value);
         }
       })