@tanstack/vue-query 5.0.0-alpha.2 → 5.0.0-alpha.21

package/build/umd/index.development.js

@@ -1024,7 +1024,7 @@
       this.state = reducer(this.state);
       notifyManager.batch(() => {
         this.#observers.forEach(observer => {
-          observer.onQueryUpdate(action);
+          observer.onQueryUpdate();
         });
         this.#cache.notify({
           query: this,
@@ -1116,10 +1116,11 @@
       return [...this.#queries.values()];
     }
     find(filters) {
-      if (typeof filters.exact === 'undefined') {
-        filters.exact = true;
-      }
-      return this.getAll().find(query => matchQuery(filters, query));
+      const defaultedFilters = {
+        exact: true,
+        ...filters
+      };
+      return this.getAll().find(query => matchQuery(defaultedFilters, query));
     }
     findAll(filters = {}) {
       const queries = this.getAll();
@@ -1154,18 +1155,26 @@
 
   class Mutation extends Removable {
     #observers;
+    #defaultOptions;
     #mutationCache;
     #retryer;
     constructor(config) {
       super();
-      this.options = config.options;
       this.mutationId = config.mutationId;
+      this.#defaultOptions = config.defaultOptions;
       this.#mutationCache = config.mutationCache;
       this.#observers = [];
       this.state = config.state || getDefaultState();
-      this.updateGcTime(this.options.gcTime);
+      this.setOptions(config.options);
       this.scheduleGc();
     }
+    setOptions(options) {
+      this.options = {
+        ...this.#defaultOptions,
+        ...options
+      };
+      this.updateGcTime(this.options.gcTime);
+    }
     get meta() {
       return this.options.meta;
     }
@@ -1417,10 +1426,11 @@
       return this.#mutations;
     }
     find(filters) {
-      if (typeof filters.exact === 'undefined') {
-        filters.exact = true;
-      }
-      return this.#mutations.find(mutation => matchMutation(filters, mutation));
+      const defaultedFilters = {
+        exact: true,
+        ...filters
+      };
+      return this.#mutations.find(mutation => matchMutation(defaultedFilters, mutation));
     }
     findAll(filters = {}) {
       return this.#mutations.filter(mutation => matchMutation(filters, mutation));
@@ -1446,12 +1456,15 @@
   function infiniteQueryBehavior() {
     return {
       onFetch: context => {
-        context.fetchFn = () => {
+        context.fetchFn = async () => {
           const options = context.options;
           const direction = context.fetchOptions?.meta?.fetchMore?.direction;
           const oldPages = context.state.data?.pages || [];
           const oldPageParams = context.state.data?.pageParams || [];
-          let newPageParams = oldPageParams;
+          const empty = {
+            pages: [],
+            pageParams: []
+          };
           let cancelled = false;
           const addSignalProperty = object => {
             Object.defineProperty(object, 'signal', {
@@ -1471,95 +1484,95 @@
 
           // Get query function
           const queryFn = context.options.queryFn || (() => Promise.reject(new Error('Missing queryFn')));
-          const buildNewPages = (pages, param, page, previous) => {
-            const {
-              maxPages
-            } = context.options;
-            if (previous) {
-              newPageParams = addToStart(newPageParams, param, maxPages);
-              return addToStart(pages, page, maxPages);
-            }
-            newPageParams = addToEnd(newPageParams, param, maxPages);
-            return addToEnd(pages, page, maxPages);
-          };
 
           // Create function to fetch a page
-          const fetchPage = (pages, param, previous) => {
+          const fetchPage = async (data, param, previous) => {
             if (cancelled) {
               return Promise.reject();
             }
-            if (typeof param === 'undefined' && pages.length) {
-              return Promise.resolve(pages);
+            if (typeof param === 'undefined' && data.pages.length) {
+              return Promise.resolve(data);
             }
             const queryFnContext = {
               queryKey: context.queryKey,
               pageParam: param,
+              direction: previous ? 'backward' : 'forward',
               meta: context.options.meta
             };
             addSignalProperty(queryFnContext);
-            const queryFnResult = queryFn(queryFnContext);
-            const promise = Promise.resolve(queryFnResult).then(page => buildNewPages(pages, param, page, previous));
-            return promise;
+            const page = await queryFn(queryFnContext);
+            const {
+              maxPages
+            } = context.options;
+            const addTo = previous ? addToStart : addToEnd;
+            return {
+              pages: addTo(data.pages, page, maxPages),
+              pageParams: addTo(data.pageParams, param, maxPages)
+            };
           };
-          let promise;
+          let result;
 
           // Fetch first page?
           if (!oldPages.length) {
-            promise = fetchPage([], options.defaultPageParam);
+            result = await fetchPage(empty, options.defaultPageParam);
           }
 
           // fetch next / previous page?
           else if (direction) {
             const previous = direction === 'backward';
-            const param = previous ? getPreviousPageParam(options, oldPages) : getNextPageParam(options, oldPages);
-            promise = fetchPage(oldPages, param, previous);
+            const pageParamFn = previous ? getPreviousPageParam : getNextPageParam;
+            const oldData = {
+              pages: oldPages,
+              pageParams: oldPageParams
+            };
+            const param = pageParamFn(options, oldData);
+            result = await fetchPage(oldData, param, previous);
           }
 
           // Refetch pages
           else {
-            newPageParams = [];
-
             // Fetch first page
-            promise = fetchPage([], oldPageParams[0]);
+            result = await fetchPage(empty, oldPageParams[0]);
 
             // Fetch remaining pages
             for (let i = 1; i < oldPages.length; i++) {
-              promise = promise.then(pages => {
-                const param = getNextPageParam(options, pages);
-                return fetchPage(pages, param);
-              });
+              const param = getNextPageParam(options, result);
+              result = await fetchPage(result, param);
             }
           }
-          const finalPromise = promise.then(pages => ({
-            pages,
-            pageParams: newPageParams
-          }));
-          return finalPromise;
+          return result;
         };
       }
     };
   }
-  function getNextPageParam(options, pages) {
-    return options.getNextPageParam(pages[pages.length - 1], pages);
+  function getNextPageParam(options, {
+    pages,
+    pageParams
+  }) {
+    const lastIndex = pages.length - 1;
+    return options.getNextPageParam(pages[lastIndex], pages, pageParams[lastIndex], pageParams);
   }
-  function getPreviousPageParam(options, pages) {
-    return options.getPreviousPageParam?.(pages[0], pages);
+  function getPreviousPageParam(options, {
+    pages,
+    pageParams
+  }) {
+    return options.getPreviousPageParam?.(pages[0], pages, pageParams[0], pageParams);
   }
 
   /**
    * Checks if there is a next page.
    */
-  function hasNextPage(options, pages) {
-    if (!pages) return false;
-    return typeof getNextPageParam(options, pages) !== 'undefined';
+  function hasNextPage(options, data) {
+    if (!data) return false;
+    return typeof getNextPageParam(options, data) !== 'undefined';
   }
 
   /**
    * Checks if there is a previous page.
    */
-  function hasPreviousPage(options, pages) {
-    if (!pages || !options.getPreviousPageParam) return false;
-    return typeof getPreviousPageParam(options, pages) !== 'undefined';
+  function hasPreviousPage(options, data) {
+    if (!data || !options.getPreviousPageParam) return false;
+    return typeof getPreviousPageParam(options, data) !== 'undefined';
   }
 
   // CLASS
@@ -1684,10 +1697,11 @@
       });
     }
     cancelQueries(filters = {}, cancelOptions = {}) {
-      if (typeof cancelOptions.revert === 'undefined') {
-        cancelOptions.revert = true;
-      }
-      const promises = notifyManager.batch(() => this.#queryCache.findAll(filters).map(query => query.cancel(cancelOptions)));
+      const defaultedCancelOptions = {
+        revert: true,
+        ...cancelOptions
+      };
+      const promises = notifyManager.batch(() => this.#queryCache.findAll(filters).map(query => query.cancel(defaultedCancelOptions)));
       return Promise.all(promises).then(noop).catch(noop);
     }
     invalidateQueries(filters = {}, options = {}) {
@@ -1836,10 +1850,12 @@
     #currentResult = undefined;
     #currentResultState;
     #currentResultOptions;
-    #previousQueryResult;
     #selectError;
     #selectFn;
     #selectResult;
+    // This property keeps track of the last defined query data.
+    // It will be used to pass the previous data to the placeholder function between renders.
+    #lastDefinedQueryData;
     #staleTimeoutId;
     #refetchIntervalId;
     #currentRefetchInterval;
@@ -2034,7 +2050,6 @@
       const prevResultOptions = this.#currentResultOptions;
       const queryChange = query !== prevQuery;
       const queryInitialState = queryChange ? query.state : this.#currentQueryInitialState;
-      const prevQueryResult = queryChange ? this.#currentResult : this.#previousQueryResult;
       const {
         state
       } = query;
@@ -2093,7 +2108,7 @@
         if (prevResult?.isPlaceholderData && options.placeholderData === prevResultOptions?.placeholderData) {
           placeholderData = prevResult.data;
         } else {
-          placeholderData = typeof options.placeholderData === 'function' ? options.placeholderData(prevQueryResult?.data) : options.placeholderData;
+          placeholderData = typeof options.placeholderData === 'function' ? options.placeholderData(this.#lastDefinedQueryData) : options.placeholderData;
           if (options.select && typeof placeholderData !== 'undefined') {
             try {
               placeholderData = options.select(placeholderData);
@@ -2157,6 +2172,9 @@
       if (shallowEqualObjects(nextResult, prevResult)) {
         return;
       }
+      if (this.#currentResultState.data !== undefined) {
+        this.#lastDefinedQueryData = this.#currentResultState.data;
+      }
       this.#currentResult = nextResult;
 
       // Determine which callbacks to trigger
@@ -2197,36 +2215,20 @@
       const prevQuery = this.#currentQuery;
       this.#currentQuery = query;
       this.#currentQueryInitialState = query.state;
-      this.#previousQueryResult = this.#currentResult;
       if (this.hasListeners()) {
         prevQuery?.removeObserver(this);
         query.addObserver(this);
       }
     }
-    onQueryUpdate(action) {
-      const notifyOptions = {};
-      if (action.type === 'success') {
-        notifyOptions.onSuccess = !action.manual;
-      } else if (action.type === 'error' && !isCancelledError(action.error)) {
-        notifyOptions.onError = true;
-      }
-      this.#updateResult(notifyOptions);
+    onQueryUpdate() {
+      this.#updateResult();
       if (this.hasListeners()) {
         this.#updateTimers();
       }
     }
     #notify(notifyOptions) {
       notifyManager.batch(() => {
-        // First trigger the configuration callbacks
-        if (notifyOptions.onSuccess) {
-          this.options.onSuccess?.(this.#currentResult.data);
-          this.options.onSettled?.(this.#currentResult.data, null);
-        } else if (notifyOptions.onError) {
-          this.options.onError?.(this.#currentResult.error);
-          this.options.onSettled?.(undefined, this.#currentResult.error);
-        }
-
-        // Then trigger the listeners
+        // First, trigger the listeners
         if (notifyOptions.listeners) {
           this.listeners.forEach(listener => {
             listener(this.#currentResult);
@@ -2348,9 +2350,10 @@
     }
     #findMatchingObservers(queries) {
       const prevObservers = this.#observers;
+      const prevObserversMap = new Map(prevObservers.map(observer => [observer.options.queryHash, observer]));
       const defaultedQueryOptions = queries.map(options => this.#client.defaultQueryOptions(options));
       const matchingObservers = defaultedQueryOptions.flatMap(defaultedOptions => {
-        const match = prevObservers.find(observer => observer.options.queryHash === defaultedOptions.queryHash);
+        const match = prevObserversMap.get(defaultedOptions.queryHash);
         if (match != null) {
           return [{
             defaultedQueryOptions: defaultedOptions,
@@ -2359,8 +2362,8 @@
         }
         return [];
       });
-      const matchedQueryHashes = matchingObservers.map(match => match.defaultedQueryOptions.queryHash);
-      const unmatchedQueries = defaultedQueryOptions.filter(defaultedOptions => !matchedQueryHashes.includes(defaultedOptions.queryHash));
+      const matchedQueryHashes = new Set(matchingObservers.map(match => match.defaultedQueryOptions.queryHash));
+      const unmatchedQueries = defaultedQueryOptions.filter(defaultedOptions => !matchedQueryHashes.has(defaultedOptions.queryHash));
       const getObserver = options => {
         const defaultedOptions = this.#client.defaultQueryOptions(options);
         const currentObserver = this.#observers.find(o => o.options.queryHash === defaultedOptions.queryHash);
@@ -2417,7 +2420,7 @@
       options.behavior = infiniteQueryBehavior();
       return super.getOptimisticResult(options);
     }
-    fetchNextPage(options = {}) {
+    fetchNextPage(options) {
       return this.fetch({
         ...options,
         meta: {
@@ -2427,9 +2430,7 @@
         }
       });
     }
-    fetchPreviousPage({
-      ...options
-    } = {}) {
+    fetchPreviousPage(options) {
       return this.fetch({
         ...options,
         meta: {
@@ -2454,8 +2455,8 @@
         ...result,
         fetchNextPage: this.fetchNextPage,
         fetchPreviousPage: this.fetchPreviousPage,
-        hasNextPage: hasNextPage(options, state.data?.pages),
-        hasPreviousPage: hasPreviousPage(options, state.data?.pages),
+        hasNextPage: hasNextPage(options, state.data),
+        hasPreviousPage: hasPreviousPage(options, state.data),
         isFetchingNextPage,
         isFetchingPreviousPage,
         isRefetching: isRefetching && !isFetchingNextPage && !isFetchingPreviousPage
@@ -2493,6 +2494,7 @@
           observer: this
         });
       }
+      this.#currentMutation?.setOptions(this.options);
     }
     onUnsubscribe() {
       if (!this.listeners.length) {
@@ -2580,24 +2582,10 @@
     return query.state.status === 'success';
   }
   function dehydrate(client, options = {}) {
-    const mutations = [];
-    const queries = [];
-    if (options.dehydrateMutations !== false) {
-      const shouldDehydrateMutation = options.shouldDehydrateMutation || defaultShouldDehydrateMutation;
-      client.getMutationCache().getAll().forEach(mutation => {
-        if (shouldDehydrateMutation(mutation)) {
-          mutations.push(dehydrateMutation(mutation));
-        }
-      });
-    }
-    if (options.dehydrateQueries !== false) {
-      const shouldDehydrateQuery = options.shouldDehydrateQuery || defaultShouldDehydrateQuery;
-      client.getQueryCache().getAll().forEach(query => {
-        if (shouldDehydrateQuery(query)) {
-          queries.push(dehydrateQuery(query));
-        }
-      });
-    }
+    const filterMutation = options.shouldDehydrateMutation ?? defaultShouldDehydrateMutation;
+    const mutations = client.getMutationCache().getAll().flatMap(mutation => filterMutation(mutation) ? [dehydrateMutation(mutation)] : []);
+    const filterQuery = options.shouldDehydrateQuery ?? defaultShouldDehydrateQuery;
+    const queries = client.getQueryCache().getAll().flatMap(query => filterQuery(query) ? [dehydrateQuery(query)] : []);
     return {
       mutations,
       queries
@@ -3665,7 +3653,6 @@
     };
   }
 
-  /* istanbul ignore file */
   // eslint-disable-next-line no-shadow
   var QueryState;
   (function (QueryState) {
@@ -3743,7 +3730,6 @@
     'Last Updated': dateSort
   };
 
-  /* istanbul ignore file */
   const pluginId = 'vue-query';
   const pluginName = 'Vue Query';
   function setupDevtools(app, queryClient) {
@@ -3751,8 +3737,8 @@
       id: pluginId,
       label: pluginName,
       packageName: 'vue-query',
-      homepage: 'https://tanstack.com/query/v4',
-      logo: 'https://vue-query.vercel.app/vue-query.svg',
+      homepage: 'https://tanstack.com/query/latest',
+      logo: 'https://raw.githubusercontent.com/TanStack/query/main/packages/vue-query/media/vue-query.svg',
       app,
       settings: {
         baseSort: {
@@ -3776,16 +3762,31 @@
             value: key
           })),
           defaultValue: Object.keys(sortFns)[0]
+        },
+        onlineMode: {
+          type: 'choice',
+          component: 'button-group',
+          label: 'Online mode',
+          options: [{
+            label: 'Online',
+            value: 1
+          }, {
+            label: 'Offline',
+            value: 0
+          }],
+          defaultValue: 1
         }
       }
     }, api => {
+      const initialSettings = api.getSettings();
+      onlineManager.setOnline(Boolean(initialSettings.onlineMode.valueOf()));
       const queryCache = queryClient.getQueryCache();
       api.addInspector({
         id: pluginId,
         label: pluginName,
         icon: 'api',
         nodeActions: [{
-          icon: 'cloud_download',
+          icon: 'file_download',
           tooltip: 'Refetch',
           action: queryHash => {
             queryCache.get(queryHash)?.fetch();
@@ -3810,6 +3811,27 @@
             const query = queryCache.get(queryHash);
             queryCache.remove(query);
           }
+        }, {
+          icon: 'hourglass_empty',
+          tooltip: 'Force loading',
+          action: queryHash => {
+            const query = queryCache.get(queryHash);
+            query.setState({
+              data: undefined,
+              status: 'pending'
+            });
+          }
+        }, {
+          icon: 'error_outline',
+          tooltip: 'Force error',
+          action: queryHash => {
+            const query = queryCache.get(queryHash);
+            query.setState({
+              data: undefined,
+              status: 'error',
+              error: new Error('Unknown error from devtools')
+            });
+          }
         }]
       });
       api.addTimelineLayer({
@@ -3820,9 +3842,7 @@
       queryCache.subscribe(event => {
         api.sendInspectorTree(pluginId);
         api.sendInspectorState(pluginId);
-        if (
-        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-        event && ['queryAdded', 'queryRemoved', 'queryUpdated'].includes(event.type)) {
+        if (['added', 'removed', 'updated'].includes(event.type)) {
           api.addTimelineEvent({
             layerId: pluginId,
             event: {
@@ -3837,6 +3857,11 @@
           });
         }
       });
+      api.on.setPluginSettings(payload => {
+        if (payload.key === 'onlineMode') {
+          onlineManager.setOnline(Boolean(payload.newValue));
+        }
+      });
       api.on.getInspectorTree(payload => {
         if (payload.inspectorId === pluginId) {
           const queries = queryCache.getAll();
@@ -3929,8 +3954,6 @@
           originalUnmount();
         };
       }
-
-      /* istanbul ignore next */
       if (vueDemi.isVue2) {
         app.mixin({
           beforeCreate() {
@@ -4030,9 +4053,8 @@
 
   /* eslint-disable @typescript-eslint/no-explicit-any */
   function useQueries({
-    queries,
-    queryClient
-  }) {
+    queries
+  }, queryClient) {
     const client = queryClient || useQueryClient();
     const defaultedQueries = vueDemi.computed(() => cloneDeepUnref(queries).map(options => {
       const defaulted = client.defaultQueryOptions(options);
@@ -4051,14 +4073,14 @@
           state.value.splice(0, result.length, ...result);
         });
         // Subscription would not fire for persisted results
-        state.value.splice(0, state.value.length, ...observer.getOptimisticResult(defaultedQueries.value));
+        state.value = observer.getOptimisticResult(defaultedQueries.value);
       }
     }, {
       immediate: true
     });
     vueDemi.watch(defaultedQueries, () => {
       observer.setQueries(defaultedQueries.value);
-      state.value.splice(0, state.value.length, ...observer.getCurrentResult());
+      state.value = observer.getCurrentResult();
     }, {
       deep: true
     });
@@ -4131,22 +4153,31 @@
     return isFetching;
   }
 
-  function useIsMutating(mutationFilters = {}, queryClient) {
-    const filters = vueDemi.computed(() => cloneDeepUnref(mutationFilters));
+  function useIsMutating(filters = {}, queryClient) {
     const client = queryClient || useQueryClient();
-    const isMutating = vueDemi.ref(client.isMutating(filters));
-    const unsubscribe = client.getMutationCache().subscribe(() => {
-      isMutating.value = client.isMutating(filters);
-    });
-    vueDemi.watch(filters, () => {
-      isMutating.value = client.isMutating(filters);
-    }, {
-      deep: true
+    const unreffedFilters = vueDemi.computed(() => ({
+      ...cloneDeepUnref(filters),
+      status: 'pending'
+    }));
+    const length = vueDemi.computed(() => useMutationState({
+      filters: unreffedFilters
+    }, client).value.length);
+    return length;
+  }
+  function getResult(mutationCache, options) {
+    return mutationCache.findAll(options.filters).map(mutation => options.select ? options.select(mutation) : mutation.state);
+  }
+  function useMutationState(options = {}, queryClient) {
+    const mutationCache = (queryClient || useQueryClient()).getMutationCache();
+    const state = vueDemi.ref(getResult(mutationCache, options));
+    const unsubscribe = mutationCache.subscribe(() => {
+      const result = getResult(mutationCache, options);
+      state.value = result;
     });
     vueDemi.onScopeDispose(() => {
       unsubscribe();
     });
-    return isMutating;
+    return vueDemi.readonly(state);
   }
 
   exports.CancelledError = CancelledError;
@@ -4176,6 +4207,7 @@
   exports.useIsFetching = useIsFetching;
   exports.useIsMutating = useIsMutating;
   exports.useMutation = useMutation;
+  exports.useMutationState = useMutationState;
   exports.useQueries = useQueries;
   exports.useQuery = useQuery;
   exports.useQueryClient = useQueryClient;