@tanstack/vue-query 4.12.0 → 4.13.1

package/build/umd/index.development.js

@@ -1112,9 +1112,11 @@
           this.isFetchingOptimistic = false;
         },
         onError,
-        onFail: () => {
+        onFail: (failureCount, error) => {
           this.dispatch({
-            type: 'failed'
+            type: 'failed',
+            failureCount,
+            error
           });
         },
         onPause: () => {
@@ -1142,7 +1144,8 @@
         switch (action.type) {
           case 'failed':
             return { ...state,
-              fetchFailureCount: state.fetchFailureCount + 1
+              fetchFailureCount: action.failureCount,
+              fetchFailureReason: action.error
             };
 
           case 'pause':
@@ -1158,6 +1161,7 @@
           case 'fetch':
             return { ...state,
               fetchFailureCount: 0,
+              fetchFailureReason: null,
               fetchMeta: (_action$meta = action.meta) != null ? _action$meta : null,
               fetchStatus: canFetch(this.options.networkMode) ? 'fetching' : 'paused',
               ...(!state.dataUpdatedAt && {
@@ -1176,7 +1180,8 @@
               status: 'success',
               ...(!action.manual && {
                 fetchStatus: 'idle',
-                fetchFailureCount: 0
+                fetchFailureCount: 0,
+                fetchFailureReason: null
               })
             };
 
@@ -1193,6 +1198,7 @@
               errorUpdateCount: state.errorUpdateCount + 1,
               errorUpdatedAt: Date.now(),
               fetchFailureCount: state.fetchFailureCount + 1,
+              fetchFailureReason: error,
               fetchStatus: 'idle',
               status: 'error'
             };
@@ -1237,6 +1243,7 @@
       errorUpdateCount: 0,
       errorUpdatedAt: 0,
       fetchFailureCount: 0,
+      fetchFailureReason: null,
       fetchMeta: null,
       isInvalidated: false,
       status: hasData ? 'success' : 'loading',
@@ -1441,9 +1448,11 @@
 
             return this.options.mutationFn(this.state.variables);
           },
-          onFail: () => {
+          onFail: (failureCount, error) => {
             this.dispatch({
-              type: 'failed'
+              type: 'failed',
+              failureCount,
+              error
             });
           },
           onPause: () => {
@@ -1526,7 +1535,8 @@
         switch (action.type) {
           case 'failed':
             return { ...state,
-              failureCount: state.failureCount + 1
+              failureCount: action.failureCount,
+              failureReason: action.error
             };
 
           case 'pause':
@@ -1543,6 +1553,8 @@
             return { ...state,
               context: action.context,
               data: undefined,
+              failureCount: 0,
+              failureReason: null,
               error: null,
               isPaused: !canFetch(this.options.networkMode),
               status: 'loading',
@@ -1552,6 +1564,8 @@
           case 'success':
             return { ...state,
               data: action.data,
+              failureCount: 0,
+              failureReason: null,
               error: null,
               status: 'success',
               isPaused: false
@@ -1562,6 +1576,7 @@
               data: undefined,
               error: action.error,
               failureCount: state.failureCount + 1,
+              failureReason: action.error,
               isPaused: false,
               status: 'error'
             };
@@ -1593,6 +1608,7 @@
       data: undefined,
       error: null,
       failureCount: 0,
+      failureReason: null,
       isPaused: false,
       status: 'idle',
       variables: undefined
@@ -2494,6 +2510,7 @@
         error,
         errorUpdatedAt,
         failureCount: state.fetchFailureCount,
+        failureReason: state.fetchFailureReason,
         errorUpdateCount: state.errorUpdateCount,
         isFetched: state.dataUpdateCount > 0 || state.errorUpdateCount > 0,
         isFetchedAfterMount: state.dataUpdateCount > queryInitialState.dataUpdateCount || state.errorUpdateCount > queryInitialState.errorUpdateCount,
@@ -3104,6 +3121,9 @@
   function isQueryKey(value) {
     return Array.isArray(value);
   }
+  function isMutationKey(value) {
+    return Array.isArray(vueDemi.isRef(value) ? value.value : value);
+  }
   function updateState(state, update) {
     Object.keys(state).forEach(key => {
       state[key] = update[key];
@@ -4710,12 +4730,13 @@
   }
 
   function useMutation(arg1, arg2, arg3) {
-    var _options$queryClient;
+    var _options$value$queryC;
 
-    const options = parseMutationArgs(arg1, arg2, arg3);
-    const queryClient = (_options$queryClient = options.queryClient) != null ? _options$queryClient : useQueryClient(options.queryClientKey);
-    const defaultedOptions = queryClient.defaultMutationOptions(options);
-    const observer = new MutationObserver(queryClient, defaultedOptions);
+    const options = vueDemi.computed(() => {
+      return parseMutationArgs(arg1, arg2, arg3);
+    });
+    const queryClient = (_options$value$queryC = options.value.queryClient) != null ? _options$value$queryC : useQueryClient(options.value.queryClientKey);
+    const observer = new MutationObserver(queryClient, queryClient.defaultMutationOptions(options.value));
     const state = vueDemi.reactive(observer.getCurrentResult());
     const unsubscribe = observer.subscribe(result => {
       updateState(state, result);
@@ -4726,8 +4747,8 @@
       });
     };
 
-    vueDemi.watch([() => arg1, () => arg2, () => arg3], () => {
-      observer.setOptions(queryClient.defaultMutationOptions(parseMutationArgs(arg1, arg2, arg3)));
+    vueDemi.watch(options, () => {
+      observer.setOptions(queryClient.defaultMutationOptions(options.value));
     }, {
       deep: true
     });
@@ -4744,11 +4765,14 @@
   function parseMutationArgs(arg1, arg2, arg3) {
     let options = arg1;
 
-    if (isQueryKey(arg1)) {
-      if (typeof arg2 === 'function') {
-        options = { ...arg3,
+    if (isMutationKey(arg1)) {
+      const plainFn = vueDemi.isRef(arg2) ? arg2.value : arg2;
+      const plainOptions = vueDemi.isRef(arg3) ? arg3.value : arg3;
+
+      if (typeof plainFn === 'function') {
+        options = { ...plainOptions,
           mutationKey: arg1,
-          mutationFn: arg2
+          mutationFn: plainFn
         };
       } else {
         options = { ...arg2,
@@ -4757,9 +4781,12 @@
       }
     }
 
-    if (typeof arg1 === 'function') {
-      options = { ...arg2,
-        mutationFn: arg1
+    const plainFn = vueDemi.isRef(arg1) ? arg1.value : arg1;
+    const plainOptions = vueDemi.isRef(arg2) ? arg2.value : arg2;
+
+    if (typeof plainFn === 'function') {
+      options = { ...plainOptions,
+        mutationFn: plainFn
       };
     }