useMutation: fix rules of React violations (#11852)

* useMutation: fix rules of React violations

* size-limits

* Clean up Prettier, Size-limit, and Api-Extractor

---------

Co-authored-by: phryneas <phryneas@users.noreply.github.com>

.changeset/loud-hairs-think.md

@@ -0,0 +1,5 @@
+---
+"@apollo/client": patch
+---
+
+Fix a bug where calling the `useMutation` `reset` function would point the hook to an outdated `client` reference.

.changeset/mighty-monkeys-explain.md

@@ -0,0 +1,6 @@
+---
+"@apollo/client": patch
+---
+
+Prevent writing to a ref in render in `useMutation`.
+As a result, you might encounter problems in the future if you call the mutation's `execute` function during render. Please note that this was never supported behavior, and we strongly recommend against it.

.size-limits.json

@@ -1,4 +1,4 @@
 {
-  "dist/apollo-client.min.cjs": 39607,
+  "dist/apollo-client.min.cjs": 39620,
   "import { ApolloClient, InMemoryCache, HttpLink } from \"dist/index.js\" (production)": 32821
 }

src/react/components/__tests__/client/Mutation.test.tsx

@@ -1348,7 +1348,7 @@ describe("General Mutation testing", () => {
                 if (count === 0) {
                   expect(result.called).toEqual(false);
                   expect(result.loading).toEqual(false);
-                  createTodo();
+                  setTimeout(createTodo, 10);
                 } else if (count === 2 && result) {
                   expect(result.data).toEqual(data);
                   setTimeout(() => {
@@ -1358,7 +1358,7 @@ describe("General Mutation testing", () => {
                   });
                 } else if (count === 3) {
                   expect(result.loading).toEqual(false);
-                  createTodo();
+                  setTimeout(createTodo, 10);
                 } else if (count === 5) {
                   expect(result.data).toEqual(data3);
                 }

src/react/hoc/__tests__/mutations/lifecycle.test.tsx

@@ -92,7 +92,9 @@ describe("graphql(mutation) lifecycle", () => {
       class Container extends React.Component<ChildProps<Props>> {
         render() {
           if (this.props.listId !== 2) return null;
-          this.props.mutate!().then(() => resolve());
+          setTimeout(() => {
+            this.props.mutate!().then(() => resolve());
+          });
           return null;
         }
       }

src/react/hooks/useMutation.ts

@@ -99,11 +99,9 @@ export function useMutation<
     options,
   });
 
-  // TODO: Trying to assign these in a useEffect or useLayoutEffect breaks
-  // higher-order components.
-  {
+  React.useLayoutEffect(() => {
     Object.assign(ref.current, { client, options, mutation });
-  }
+  });
 
   const execute = React.useCallback(
     (
@@ -221,17 +219,22 @@ export function useMutation<
 
   const reset = React.useCallback(() => {
     if (ref.current.isMounted) {
-      const result = { called: false, loading: false, client };
+      const result = {
+        called: false,
+        loading: false,
+        client: ref.current.client,
+      };
       Object.assign(ref.current, { mutationId: 0, result });
       setResult(result);
     }
   }, []);
 
   React.useEffect(() => {
-    ref.current.isMounted = true;
+    const current = ref.current;
+    current.isMounted = true;
 
     return () => {
-      ref.current.isMounted = false;
+      current.isMounted = false;
     };
   }, []);