@apollo/client 4.0.0-rc.0 → 4.0.0-rc.10

package/react/hooks/useMutation.d.ts

@@ -1,26 +1,31 @@
 import type { TypedDocumentNode } from "@graphql-typed-document-node/core";
-import type { ApolloCache, ApolloClient, DefaultContext, DocumentNode, ErrorLike, ErrorPolicy, NormalizedExecutionResult, InternalRefetchQueriesInclude, MaybeMasked, MutateResult, MutationFetchPolicy, MutationQueryReducersMap, MutationUpdaterFunction, OnQueryUpdated, OperationVariables, Unmasked } from "@apollo/client";
+import type { ApolloCache, ApolloClient, DefaultContext, DocumentNode, ErrorLike, ErrorPolicy, InternalRefetchQueriesInclude, MaybeMasked, MutationFetchPolicy, MutationQueryReducersMap, MutationUpdaterFunction, NormalizedExecutionResult, OnQueryUpdated, OperationVariables, Unmasked } from "@apollo/client";
+import type { IgnoreModifier } from "@apollo/client/cache";
 import type { NoInfer, Prettify } from "@apollo/client/utilities/internal";
-import type { IgnoreModifier } from "../../cache/core/types/common.js";
 type MakeRequiredVariablesOptional<TVariables extends OperationVariables, TConfiguredVariables extends Partial<TVariables>> = Prettify<{
     [K in keyof TVariables as K extends keyof TConfiguredVariables ? K : never]?: TVariables[K];
 } & Omit<TVariables, keyof TConfiguredVariables>>;
 export declare namespace useMutation {
     interface Options<TData = unknown, TVariables extends OperationVariables = OperationVariables, TCache extends ApolloCache = ApolloCache, TConfiguredVariables extends Partial<TVariables> = Partial<TVariables>> {
         /**
-        * By providing either an object or a callback function that, when invoked after a mutation, allows you to return optimistic data and optionally skip updates via the `IGNORE` sentinel object, Apollo Client caches this temporary (and potentially incorrect) response until the mutation completes, enabling more responsive UI updates.
+        * By providing either an object or a callback function that, when invoked after
+        * a mutation, allows you to return optimistic data and optionally skip updates
+        * via the `IGNORE` sentinel object, Apollo Client caches this temporary
+        * (and potentially incorrect) response until the mutation completes, enabling
+        * more responsive UI updates.
         * 
         * For more information, see [Optimistic mutation results](https://www.apollographql.com/docs/react/performance/optimistic-ui/).
         * 
-        * @docGroup
-        * 
-        * 3. Caching options
+        * @docGroup 3. Caching options
         */
         optimisticResponse?: Unmasked<NoInfer<TData>> | ((vars: TVariables, { IGNORE }: {
             IGNORE: IgnoreModifier;
         }) => Unmasked<NoInfer<TData>> | IgnoreModifier);
         /**
-        * A `MutationQueryReducersMap`, which is map from query names to mutation query reducers. Briefly, this map defines how to incorporate the results of the mutation into the results of queries that are currently being watched by your application.
+        * A `MutationQueryReducersMap`, which is map from query names to
+        * mutation query reducers. Briefly, this map defines how to incorporate the
+        * results of the mutation into the results of queries that are currently
+        * being watched by your application.
         */
         updateQueries?: MutationQueryReducersMap<TData>;
         /**
@@ -32,9 +37,7 @@ export declare namespace useMutation {
         * 
         * - A string indicating the operation name of the query to refetch
         * 
-        * @docGroup
-        * 
-        * 1. Operation options
+        * @docGroup 1. Operation options
         */
         refetchQueries?: ((result: NormalizedExecutionResult<Unmasked<TData>>) => InternalRefetchQueriesInclude) | InternalRefetchQueriesInclude;
         /**
@@ -42,9 +45,7 @@ export declare namespace useMutation {
         * 
         * The default value is `false` (queries are refetched asynchronously).
         * 
-        * @docGroup
-        * 
-        * 1. Operation options
+        * @docGroup 1. Operation options
         */
         awaitRefetchQueries?: boolean;
         /**
@@ -52,9 +53,7 @@ export declare namespace useMutation {
         * 
         * For more information, see [Updating the cache after a mutation](https://www.apollographql.com/docs/react/data/mutations#updating-the-cache-after-a-mutation).
         * 
-        * @docGroup
-        * 
-        * 3. Caching options
+        * @docGroup 3. Caching options
         */
         update?: MutationUpdaterFunction<TData, TVariables, TCache>;
         /**
@@ -62,9 +61,7 @@ export declare namespace useMutation {
         * 
         * Returning a `Promise` from `onQueryUpdated` will cause the final mutation `Promise` to await the returned `Promise`. Returning `false` causes the query to be ignored.
         * 
-        * @docGroup
-        * 
-        * 1. Operation options
+        * @docGroup 1. Operation options
         */
         onQueryUpdated?: OnQueryUpdated<any>;
         /**
@@ -74,9 +71,7 @@ export declare namespace useMutation {
         * 
         * The default value is `none`, meaning that the mutation result includes error details but _not_ partial results.
         * 
-        * @docGroup
-        * 
-        * 1. Operation options
+        * @docGroup 1. Operation options
         */
         errorPolicy?: ErrorPolicy;
         /**
@@ -84,17 +79,13 @@ export declare namespace useMutation {
         * 
         * Each key in the object corresponds to a variable name, and that key's value corresponds to the variable value.
         * 
-        * @docGroup
-        * 
-        * 1. Operation options
+        * @docGroup 1. Operation options
         */
         variables?: TConfiguredVariables;
         /**
         * If you're using [Apollo Link](https://www.apollographql.com/docs/react/api/link/introduction/), this object is the initial value of the `context` object that's passed along your link chain.
         * 
-        * @docGroup
-        * 
-        * 2. Networking options
+        * @docGroup 2. Networking options
         */
         context?: DefaultContext;
         /**
@@ -104,13 +95,17 @@ export declare namespace useMutation {
         * 
         * Unlike queries, mutations _do not_ support [fetch policies](https://www.apollographql.com/docs/react/data/queries/#setting-a-fetch-policy) besides `network-only` and `no-cache`.
         * 
-        * @docGroup
-        * 
-        * 3. Caching options
+        * @docGroup 3. Caching options
         */
         fetchPolicy?: MutationFetchPolicy;
         /**
-        * To avoid retaining sensitive information from mutation root field arguments, Apollo Client v3.4+ automatically clears any `ROOT_MUTATION` fields from the cache after each mutation finishes. If you need this information to remain in the cache, you can prevent the removal by passing `keepRootFields: true` to the mutation. `ROOT_MUTATION` result data are also passed to the mutation `update` function, so we recommend obtaining the results that way, rather than using this option, if possible.
+        * To avoid retaining sensitive information from mutation root field
+        * arguments, Apollo Client v3.4+ automatically clears any `ROOT_MUTATION`
+        * fields from the cache after each mutation finishes. If you need this
+        * information to remain in the cache, you can prevent the removal by passing
+        * `keepRootFields: true` to the mutation. `ROOT_MUTATION` result data are
+        * also passed to the mutation `update` function, so we recommend obtaining
+        * the results that way, rather than using this option, if possible.
         */
         keepRootFields?: boolean;
         /**
@@ -118,9 +113,7 @@ export declare namespace useMutation {
         * 
         * By default, the instance that's passed down via context is used, but you can provide a different instance here.
         * 
-        * @docGroup
-        * 
-        * 2. Networking options
+        * @docGroup 2. Networking options
         */
         client?: ApolloClient;
         /**
@@ -128,9 +121,7 @@ export declare namespace useMutation {
         * 
         * The default value is `true`.
         * 
-        * @docGroup
-        * 
-        * 2. Networking options
+        * @docGroup 2. Networking options
         */
         notifyOnNetworkStatusChange?: boolean;
         /**
@@ -138,9 +129,7 @@ export declare namespace useMutation {
         * 
         * This function is passed the mutation's result `data` and any options passed to the mutation.
         * 
-        * @docGroup
-        * 
-        * 1. Operation options
+        * @docGroup 1. Operation options
         */
         onCompleted?: (data: MaybeMasked<TData>, clientOptions?: Options<TData, TVariables, TCache>) => void;
         /**
@@ -148,9 +137,7 @@ export declare namespace useMutation {
         * 
         * This function is passed an [`ApolloError`](https://github.com/apollographql/apollo-client/blob/d96f4578f89b933c281bb775a39503f6cdb59ee8/src/errors/index.ts#L36-L39) object that contains either a `networkError` object or a `graphQLErrors` array, depending on the error(s) that occurred, as well as any options passed the mutation.
         * 
-        * @docGroup
-        * 
-        * 1. Operation options
+        * @docGroup 1. Operation options
         */
         onError?: (error: ErrorLike, clientOptions?: Options<TData, TVariables, TCache>) => void;
     }
@@ -195,9 +182,7 @@ export declare namespace useMutation {
             * 
             * Each key in the object corresponds to a variable name, and that key's value corresponds to the variable value.
             * 
-            * @docGroup
-            * 
-            * 1. Operation options
+            * @docGroup 1. Operation options
             */
             variables?: TVariables;
         }
@@ -208,32 +193,69 @@ export declare namespace useMutation {
             * 
             * Each key in the object corresponds to a variable name, and that key's value corresponds to the variable value.
             * 
-            * @docGroup
-            * 
-            * 1. Operation options
+            * @docGroup 1. Operation options
             */
             variables: TVariables;
         }
-    ]) => Promise<MutateResult<MaybeMasked<TData>>>;
-    type MutationFunctionOptions<TData = unknown, TVariables extends OperationVariables = OperationVariables, TCache extends ApolloCache = ApolloCache> = Options<TData, TVariables, TCache> & {
+    ]) => Promise<ApolloClient.MutateResult<MaybeMasked<TData>>>;
+    type MutationFunctionOptions<TData = unknown, TVariables extends OperationVariables = OperationVariables, TCache extends ApolloCache = ApolloCache> = Options<TData, TVariables, TCache>;
+    namespace DocumentationTypes {
         /**
-        * A GraphQL document, often created with `gql` from the `graphql-tag` package, that contains a single mutation inside of it.
-        * 
-        * @docGroup
-        * 
-        * 1. Operation options
+        * > Refer to the [Mutations](https://www.apollographql.com/docs/react/data/mutations/) section for a more in-depth overview of `useMutation`.
+        * 
+        * @example
+        * 
+        * ```jsx
+        * import { gql, useMutation } from "@apollo/client";
+        * 
+        * const ADD_TODO = gql`
+        *   mutation AddTodo($type: String!) {
+        *     addTodo(type: $type) {
+        *       id
+        *       type
+        *     }
+        *   }
+        * `;
+        * 
+        * function AddTodo() {
+        *   let input;
+        *   const [addTodo, { data }] = useMutation(ADD_TODO);
+        * 
+        *   return (
+        *     <div>
+        *       <form
+        *         onSubmit={(e) => {
+        *           e.preventDefault();
+        *           addTodo({ variables: { type: input.value } });
+        *           input.value = "";
+        *         }}
+        *       >
+        *         <input
+        *           ref={(node) => {
+        *             input = node;
+        *           }}
+        *         />
+        *         <button type="submit">Add Todo</button>
+        *       </form>
+        *     </div>
+        *   );
+        * }
+        * ```
+        * 
+        * @param mutation - A GraphQL mutation document parsed into an AST by `gql`.
+        * @param options - Options to control how the mutation is executed.
+        * @returns A tuple in the form of `[mutate, result]`
         */
-        mutation?: DocumentNode | TypedDocumentNode<TData, TVariables>;
-    };
+        function useMutation<TData = unknown, TVariables extends OperationVariables = OperationVariables>(mutation: DocumentNode | TypedDocumentNode<TData, TVariables>, options?: useMutation.Options<TData, TVariables>): useMutation.ResultTuple<TData, TVariables>;
+    }
 }
 /**
- *
- *
  * > Refer to the [Mutations](https://www.apollographql.com/docs/react/data/mutations/) section for a more in-depth overview of `useMutation`.
  *
  * @example
+ *
  * ```jsx
- * import { gql, useMutation } from '@apollo/client';
+ * import { gql, useMutation } from "@apollo/client";
  *
  * const ADD_TODO = gql`
  *   mutation AddTodo($type: String!) {
@@ -251,14 +273,14 @@ export declare namespace useMutation {
  *   return (
  *     <div>
  *       <form
- *         onSubmit={e => {
+ *         onSubmit={(e) => {
  *           e.preventDefault();
  *           addTodo({ variables: { type: input.value } });
- *           input.value = '';
+ *           input.value = "";
  *         }}
  *       >
  *         <input
- *           ref={node => {
+ *           ref={(node) => {
  *             input = node;
  *           }}
  *         />
@@ -268,7 +290,7 @@ export declare namespace useMutation {
  *   );
  * }
  * ```
- * @since 3.0.0
+ *
  * @param mutation - A GraphQL mutation document parsed into an AST by `gql`.
  * @param options - Options to control how the mutation is executed.
  * @returns A tuple in the form of `[mutate, result]`

package/react/hooks/useMutation.js

@@ -1,17 +1,15 @@
-import { c as _c } from "react-compiler-runtime";
 import { equal } from "@wry/equality";
 import * as React from "react";
 import { mergeOptions } from "@apollo/client/utilities/internal";
 import { useIsomorphicLayoutEffect } from "./internal/useIsomorphicLayoutEffect.js";
 import { useApolloClient } from "./useApolloClient.js";
 /**
- *
- *
  * > Refer to the [Mutations](https://www.apollographql.com/docs/react/data/mutations/) section for a more in-depth overview of `useMutation`.
  *
  * @example
+ *
  * ```jsx
- * import { gql, useMutation } from '@apollo/client';
+ * import { gql, useMutation } from "@apollo/client";
  *
  * const ADD_TODO = gql`
  *   mutation AddTodo($type: String!) {
@@ -29,14 +27,14 @@ import { useApolloClient } from "./useApolloClient.js";
  *   return (
  *     <div>
  *       <form
- *         onSubmit={e => {
+ *         onSubmit={(e) => {
  *           e.preventDefault();
  *           addTodo({ variables: { type: input.value } });
- *           input.value = '';
+ *           input.value = "";
  *         }}
  *       >
  *         <input
- *           ref={node => {
+ *           ref={(node) => {
  *             input = node;
  *           }}
  *         />
@@ -46,210 +44,101 @@ import { useApolloClient } from "./useApolloClient.js";
  *   );
  * }
  * ```
- * @since 3.0.0
+ *
  * @param mutation - A GraphQL mutation document parsed into an AST by `gql`.
  * @param options - Options to control how the mutation is executed.
  * @returns A tuple in the form of `[mutate, result]`
  */
 export function useMutation(mutation, options) {
-    const $ = _c(17);
     const client = useApolloClient(options?.client);
-    let t0;
-
-    if ($[0] !== client) {
-        t0 = () => createInitialResult(client);
-        $[0] = client;
-        $[1] = t0;
-    } else {
-        t0 = $[1];
-    }
-
-    const [result, setResult] = React.useState(t0);
-    let t1;
-
-    if ($[2] !== client || $[3] !== mutation || $[4] !== options || $[5] !== result) {
-        t1 = {
-            result,
-            mutationId: 0,
-            isMounted: true,
-            client,
-            mutation,
-            options
-        };
-        $[2] = client;
-        $[3] = mutation;
-        $[4] = options;
-        $[5] = result;
-        $[6] = t1;
-    } else {
-        t1 = $[6];
-    }
-
-    const ref = React.useRef(t1);
-    let t2;
-
-    if ($[7] !== client || $[8] !== mutation || $[9] !== options) {
-        t2 = () => {
-            Object.assign(ref.current, {
+    const [result, setResult] = React.useState(() => createInitialResult(client));
+    const ref = React.useRef({
+        result,
+        mutationId: 0,
+        isMounted: true,
+        client,
+        mutation,
+        options,
+    });
+    useIsomorphicLayoutEffect(() => {
+        Object.assign(ref.current, { client, options, mutation });
+    });
+    const execute = React.useCallback((executeOptions = {}) => {
+        const { options, mutation } = ref.current;
+        const baseOptions = { ...options, mutation };
+        const client = executeOptions.client || ref.current.client;
+        if (!ref.current.result.loading && ref.current.isMounted) {
+            setResult((ref.current.result = {
+                loading: true,
+                error: undefined,
+                data: undefined,
+                called: true,
                 client,
-                options,
-                mutation
-            });
-        };
-        $[7] = client;
-        $[8] = mutation;
-        $[9] = options;
-        $[10] = t2;
-    } else {
-        t2 = $[10];
-    }
-
-    useIsomorphicLayoutEffect(t2);
-    let t3;
-
-    if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
-        t3 = t4 => {
-            const executeOptions = t4 === undefined ? {} : t4;
-            const {
-                options: options_0,
-                mutation: mutation_0
-            } = ref.current;
-            const baseOptions = {
-                ...options_0,
-                mutation: mutation_0
-            };
-            const client_0 = executeOptions.client || ref.current.client;
-
-            if (!ref.current.result.loading && ref.current.isMounted) {
-                setResult(ref.current.result = {
-                    loading: true,
-                    error: undefined,
-                    data: undefined,
-                    called: true,
-                    client: client_0
-                });
+            }));
+        }
+        const mutationId = ++ref.current.mutationId;
+        const clientOptions = mergeOptions(baseOptions, executeOptions);
+        return client
+            .mutate(clientOptions)
+            .then((response) => {
+            const { data, error } = response;
+            const onError = executeOptions.onError || ref.current.options?.onError;
+            if (error && onError) {
+                onError(error, clientOptions);
             }
-
-            const mutationId = ref.current.mutationId = ref.current.mutationId + 1;
-            const clientOptions = mergeOptions(baseOptions, executeOptions);
-
-            return client_0.mutate(clientOptions).then(response => {
-                const {
+            if (mutationId === ref.current.mutationId) {
+                const result = {
+                    called: true,
+                    loading: false,
                     data,
-                    error
-                } = response;
-                const onError = executeOptions.onError || ref.current.options?.onError;
-
-                if (error && onError) {
-                    onError(error, clientOptions);
+                    error,
+                    client,
+                };
+                if (ref.current.isMounted && !equal(ref.current.result, result)) {
+                    setResult((ref.current.result = result));
                 }
-
-                if (mutationId === ref.current.mutationId) {
-                    const result_0 = {
-                        called: true,
-                        loading: false,
-                        data,
-                        error,
-                        client: client_0
-                    };
-
-                    if (ref.current.isMounted && !equal(ref.current.result, result_0)) {
-                        setResult(ref.current.result = result_0);
-                    }
-                }
-
-                const onCompleted = executeOptions.onCompleted || ref.current.options?.onCompleted;
-
-                if (!error) {
-                    onCompleted?.(response.data, clientOptions);
-                }
-
-                return response;
-            }, error_0 => {
-                if (mutationId === ref.current.mutationId && ref.current.isMounted) {
-                    const result_1 = {
-                        loading: false,
-                        error: error_0,
-                        data: void 0,
-                        called: true,
-                        client: client_0
-                    };
-
-                    if (!equal(ref.current.result, result_1)) {
-                        setResult(ref.current.result = result_1);
-                    }
-                }
-
-                const onError_0 = executeOptions.onError || ref.current.options?.onError;
-
-                if (onError_0) {
-                    onError_0(error_0, clientOptions);
+            }
+            const onCompleted = executeOptions.onCompleted || ref.current.options?.onCompleted;
+            if (!error) {
+                onCompleted?.(response.data, clientOptions);
+            }
+            return response;
+        }, (error) => {
+            if (mutationId === ref.current.mutationId &&
+                ref.current.isMounted) {
+                const result = {
+                    loading: false,
+                    error,
+                    data: void 0,
+                    called: true,
+                    client,
+                };
+                if (!equal(ref.current.result, result)) {
+                    setResult((ref.current.result = result));
                 }
-
-                throw error_0;
-            });
-        };
-        $[11] = t3;
-    } else {
-        t3 = $[11];
-    }
-
-    const execute = t3;
-    let t4;
-
-    if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
-        t4 = () => {
-            if (ref.current.isMounted) {
-                const result_2 = createInitialResult(ref.current.client);
-
-                Object.assign(ref.current, {
-                    mutationId: 0,
-                    result: result_2
-                });
-
-                setResult(result_2);
             }
+            const onError = executeOptions.onError || ref.current.options?.onError;
+            if (onError) {
+                onError(error, clientOptions);
+            }
+            throw error;
+        });
+    }, []);
+    const reset = React.useCallback(() => {
+        if (ref.current.isMounted) {
+            const result = createInitialResult(ref.current.client);
+            Object.assign(ref.current, { mutationId: 0, result });
+            setResult(result);
+        }
+    }, []);
+    React.useEffect(() => {
+        const current = ref.current;
+        current.isMounted = true;
+        return () => {
+            current.isMounted = false;
         };
-        $[12] = t4;
-    } else {
-        t4 = $[12];
-    }
-
-    const reset = t4;
-    let t5;
-    let t6;
-
-    if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
-        t5 = () => {
-            const current = ref.current;
-            current.isMounted = true;
-
-            return () => {
-                current.isMounted = false;
-            };
-        };t6 = [];
-        $[13] = t5;
-        $[14] = t6;
-    } else {
-        t5 = $[13];
-        t6 = $[14];
-    }
-
-    React.useEffect(t5, t6);
-    let t7;
-
-    if ($[15] !== result) {
-        t7 = [execute, {
-            reset,
-            ...result
-        }];
-        $[15] = result;
-        $[16] = t7;
-    } else {
-        t7 = $[16];
-    }
-
-    return t7;
+    }, []);
+    return [execute, { reset, ...result }];
 }
 function createInitialResult(client) {
     return {
@@ -260,4 +149,4 @@ function createInitialResult(client) {
         client,
     };
 }
-//# sourceMappingURL=useMutation.js.map
+//# sourceMappingURL=useMutation.js.map