@ventlio/tanstack-query 0.3.0 → 0.3.2

package/dist/stores/usePauseFutureRequests.js

@@ -0,0 +1,19 @@
+import { create } from 'zustand';
+
+const usePauseFutureRequests = create((set) => {
+    const pauseFutureQueries = (status) => {
+        return set({ isFutureQueriesPaused: status });
+    };
+    const pauseFutureMutation = (status) => {
+        return set({ isFutureQueriesPaused: status });
+    };
+    return {
+        isFutureMutationsPaused: false,
+        isFutureQueriesPaused: false,
+        pauseFutureQueries,
+        pauseFutureMutation,
+    };
+});
+
+export { usePauseFutureRequests };
+//# sourceMappingURL=usePauseFutureRequests.js.map

package/dist/stores/usePauseFutureRequests.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePauseFutureRequests.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;"}

package/dist/types/index.d.ts

@@ -14,19 +14,16 @@ export interface BootstrapConfig {
     queryMiddleware?: (queryRequestConfig?: IMakeRequest & {
         queryKey: QueryKey;
     }) => Promise<boolean>;
-    pauseFutureMutations?: boolean;
-    pauseFutureQueries?: boolean;
-    headers?: RawAxiosRequestHeaders;
 }
 export interface BootstrapModelConfig {
     idColumn: string;
 }
 export type ContextType = 'app' | 'web' | 'electronjs';
 export interface TanstackQueryConfig {
-    options: BootstrapConfig;
-    setConfig: (options: BootstrapConfig) => void;
+    headers: RawAxiosRequestHeaders;
+    options?: BootstrapConfig;
 }
 export interface IUseQueryHeaders {
-    getHeaders: () => BootstrapConfig['headers'];
-    setQueryHeaders: (header: BootstrapConfig['headers']) => void;
+    getHeaders: () => TanstackQueryConfig['headers'];
+    setQueryHeaders: (header: TanstackQueryConfig['headers']) => void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ventlio/tanstack-query",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "license": "MIT",
   "main": "dist/index.js",
   "contributors": [
@@ -88,6 +88,7 @@
   "dependencies": {
     "lodash.result": "^4.5.2",
     "lodash.set": "^4.3.2",
-    "url-search-params-polyfill": "^8.2.5"
+    "url-search-params-polyfill": "^8.2.5",
+    "zustand": "^4.4.6"
   }
 }

package/src/config/bootstrapQueryRequest.ts

@@ -10,7 +10,7 @@ export const bootstrapQueryRequest = (queryClient: QueryClient, options?: Bootst
     headers: {
       Authorization: ``,
     },
-    ...options,
+    options,
   };
 
   queryClient.setDefaultOptions({

package/src/config/useQueryConfig.ts

@@ -1,48 +1,11 @@
-import type { MutationMeta, QueryMeta } from '@tanstack/react-query';
 import { useQueryClient } from '@tanstack/react-query';
-import type { BootstrapConfig, TanstackQueryConfig } from '../types';
+import type { TanstackQueryConfig } from '../types';
 
 export const useQueryConfig = (): TanstackQueryConfig => {
   const queryClient = useQueryClient();
 
-  const setConfig = (options: BootstrapConfig) => {
-    let mutationMeta: MutationMeta | undefined = queryClient.getMutationDefaults()?.meta ?? {};
-    let queryMeta: QueryMeta | undefined = queryClient.getQueryDefaults()?.meta ?? {};
+  const mutationMeta = (queryClient.getDefaultOptions().mutations?.meta ?? {}) as unknown as TanstackQueryConfig;
+  const queryMeta = (queryClient.getDefaultOptions().queries?.meta ?? {}) as unknown as TanstackQueryConfig;
 
-    const { pauseFutureMutations, pauseFutureQueries, mutationMiddleware, queryMiddleware, ...otherOptions } = options;
-
-    if (pauseFutureMutations) {
-      mutationMeta.pauseFutureMutations = pauseFutureMutations;
-    }
-
-    if (mutationMiddleware) {
-      mutationMeta.mutationMiddleware = mutationMiddleware;
-    }
-
-    mutationMeta = { meta: { ...mutationMeta, ...otherOptions } };
-
-    if (pauseFutureQueries) {
-      queryMeta.pauseFutureQueries = pauseFutureQueries;
-    }
-
-    if (queryMiddleware) {
-      queryMeta.mutationMiddleware = queryMiddleware;
-    }
-
-    queryMeta = { meta: { ...queryMeta, ...otherOptions } };
-
-    const defaultMutationOptions = queryClient.defaultMutationOptions();
-    const defaultQueryOptions = queryClient.defaultQueryOptions();
-
-    queryClient.setDefaultOptions({
-      queries: { ...defaultQueryOptions, meta: queryMeta },
-      mutations: { ...defaultMutationOptions, meta: mutationMeta },
-    });
-  };
-
-  const mutationMeta = (queryClient.getDefaultOptions().mutations?.meta ?? {}) as unknown as BootstrapConfig;
-  const queryMeta = (queryClient.getDefaultOptions().queries?.meta ?? {}) as unknown as BootstrapConfig;
-
-  const options: BootstrapConfig = { ...queryMeta, ...mutationMeta };
-  return { options, setConfig };
+  return { ...queryMeta, ...mutationMeta };
 };

package/src/config/useQueryHeaders.ts

@@ -1,15 +1,27 @@
-import type { BootstrapConfig, IUseQueryHeaders } from '../types';
+import { useQueryClient } from '@tanstack/react-query';
+import type { IUseQueryHeaders, TanstackQueryConfig } from '../types';
 import { useQueryConfig } from './useQueryConfig';
 
 export const useQueryHeaders = (): IUseQueryHeaders => {
-  const { setConfig, ...config } = useQueryConfig();
+  const queryClient = useQueryClient();
+  const { headers, options } = useQueryConfig();
 
-  const getHeaders = (): BootstrapConfig['headers'] => {
-    return config.options?.headers;
+  const getHeaders = (): TanstackQueryConfig['headers'] => {
+    return headers;
   };
 
-  const setQueryHeaders = (headers: BootstrapConfig['headers']) => {
-    setConfig({ headers });
+  const setQueryHeaders = (newHeaders: TanstackQueryConfig['headers']) => {
+    const defaultMeta = {
+      headers: { ...headers, ...newHeaders },
+      options,
+    };
+
+    queryClient.setDefaultOptions({
+      queries: {
+        meta: defaultMeta,
+      },
+      mutations: { meta: defaultMeta },
+    });
   };
 
   return { setQueryHeaders, getHeaders };

package/src/config/useReactNativeEnv.ts

@@ -3,9 +3,9 @@ import { useQueryConfig } from './useQueryConfig';
 export const useReactNativeEnv = () => {
   const config = useQueryConfig();
 
-  const appUrl: string | undefined = config.options.environments?.appBaseUrl;
-  const appTimeout: number | undefined = config.options.environments?.appTimeout;
-  const isApp = config.options.context === 'app';
+  const appUrl: string | undefined = config.options?.environments?.appBaseUrl;
+  const appTimeout: number | undefined = config.options?.environments?.appTimeout;
+  const isApp = config.options?.context === 'app';
 
   return { appUrl, appTimeout, isApp };
 };

package/src/index.ts

@@ -1,6 +1,8 @@
 export * from './config';
 export * from './helpers';
+export * from './hooks';
 export * from './model';
 export * from './queries';
 export * from './request';
+export * from './stores';
 export * from './types';

package/src/model/useKeyTrackerModel.ts

@@ -4,11 +4,7 @@ export const useKeyTrackerModel = <T>(keyTracker: string) => {
   const queryClient = useQueryClient();
 
   const getQueryKey = (innerKeyTracker?: string) => {
-    const meta = {
-      ...queryClient.getDefaultOptions().mutations?.meta,
-      ...queryClient.getDefaultOptions().queries?.meta,
-    };
-    const queryKey: any[] | undefined = meta[innerKeyTracker ?? keyTracker] as any[];
+    const queryKey: any[] | undefined = queryClient.getQueryData([innerKeyTracker ?? keyTracker]);
 
     return queryKey;
   };

package/src/queries/useDeleteRequest.ts

@@ -1,18 +1,22 @@
 import type { QueryKey, UseQueryOptions } from '@tanstack/react-query';
 import { useQuery } from '@tanstack/react-query';
+import type { RawAxiosRequestHeaders } from 'axios';
 import { useEffect, useState } from 'react';
 import { useEnvironmentVariables, useQueryConfig, useQueryHeaders } from '../config';
 import type { IRequestError, IRequestSuccess } from '../request';
 import { makeRequest } from '../request';
+import { usePauseFutureRequests } from '../stores';
 import type { DefaultRequestOptions } from './queries.interface';
 
 export const useDeleteRequest = <TResponse>(deleteOptions?: DefaultRequestOptions) => {
   const { baseUrl, headers } = deleteOptions ?? {};
   const [requestPath, setRequestPath] = useState<string>('');
   const [options, setOptions] = useState<any>();
-  const [destroyConfig, setDestroyConfig] = useState<{ link: string; internalDeleteOptions: any }>();
 
   const { options: queryConfigOptions } = useQueryConfig();
+  const [requestPayload, setRequestPayload] = useState<Record<any, any>>();
+
+  const isFutureQueriesPaused = usePauseFutureRequests((state) => state.isFutureQueriesPaused);
 
   const { API_URL, TIMEOUT } = useEnvironmentVariables();
 
@@ -20,7 +24,7 @@ export const useDeleteRequest = <TResponse>(deleteOptions?: DefaultRequestOption
 
   const sendRequest = async (res: (value: any) => void, rej: (reason?: any) => void, queryKey: QueryKey) => {
     // get request headers
-    const globalHeaders = getHeaders();
+    const globalHeaders: RawAxiosRequestHeaders = getHeaders();
 
     const [url] = queryKey;
     const requestUrl = (url ?? requestPath) as string;
@@ -34,7 +38,7 @@ export const useDeleteRequest = <TResponse>(deleteOptions?: DefaultRequestOption
 
     let shouldContinue = true;
 
-    if (queryConfigOptions.queryMiddleware) {
+    if (queryConfigOptions?.queryMiddleware) {
       shouldContinue = await queryConfigOptions.queryMiddleware({ queryKey, ...requestOptions });
     }
 
@@ -75,7 +79,7 @@ export const useDeleteRequest = <TResponse>(deleteOptions?: DefaultRequestOption
       Array<any>
     > & { cached?: boolean }
   ): Promise<IRequestSuccess<TResponse> | undefined> => {
-    if (!queryConfigOptions.pauseFutureQueries) {
+    if (!isFutureQueriesPaused) {
       // set enabled to be true for every delete
       internalDeleteOptions = internalDeleteOptions ?? {};
       internalDeleteOptions.enabled = true;
@@ -85,19 +89,18 @@ export const useDeleteRequest = <TResponse>(deleteOptions?: DefaultRequestOption
 
       return query.data;
     } else {
-      // save delete config
-      setDestroyConfig({ link, internalDeleteOptions });
+      setRequestPayload({ link, internalDeleteOptions });
       return undefined;
     }
   };
 
   useEffect(() => {
-    if (!queryConfigOptions.pauseFutureQueries && destroyConfig) {
-      destroy(destroyConfig.link, destroyConfig.internalDeleteOptions);
-      setDestroyConfig(undefined);
+    if (!isFutureQueriesPaused && requestPayload) {
+      destroy(requestPayload.link, requestPayload.internalDeleteOptions);
+      setRequestPayload(undefined);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [queryConfigOptions.pauseFutureQueries]);
+  }, [isFutureQueriesPaused]);
 
-  return { destroy, ...query, isLoading: query.isLoading || queryConfigOptions.pauseFutureQueries };
+  return { destroy, ...query, isLoading: query.isLoading || isFutureQueriesPaused };
 };

package/src/queries/useGetInfiniteRequest.ts

@@ -1,10 +1,12 @@
 import type { InfiniteData, QueryKey, UseQueryOptions } from '@tanstack/react-query';
 import { useInfiniteQuery, useQueryClient } from '@tanstack/react-query';
+import type { RawAxiosRequestHeaders } from 'axios';
 import { startTransition, useEffect, useMemo, useState } from 'react';
 import { useEnvironmentVariables, useQueryConfig, useQueryHeaders } from '../config';
 
 import type { IRequestError, IRequestSuccess } from '../request';
 import { makeRequest } from '../request';
+import { usePauseFutureRequests } from '../stores';
 import type { DefaultRequestOptions, TanstackInfiniteQueryOption } from './queries.interface';
 
 interface Pagination {
@@ -32,10 +34,12 @@ export const useGetInfiniteRequest = <TResponse extends Record<string, any>>({
   const { API_URL, TIMEOUT } = useEnvironmentVariables();
   const { getHeaders } = useQueryHeaders();
   const [requestPath, setRequestPath] = useState<string>(path);
-  const [queryConfig, setQueryConfig] = useState<{ link: string; fetchOptions: any }>();
 
   const [options, setOptions] = useState<any>(queryOptions);
-  const { options: queryConfigOptions, setConfig } = useQueryConfig();
+  const { options: queryConfigOptions } = useQueryConfig();
+  const [requestPayload, setRequestPayload] = useState<Record<any, any>>();
+
+  const isFutureQueriesPaused = usePauseFutureRequests((state) => state.isFutureQueriesPaused);
 
   let queryClient = useQueryClient();
 
@@ -55,7 +59,7 @@ export const useGetInfiniteRequest = <TResponse extends Record<string, any>>({
   ) => {
     if (load) {
       // get request headers
-      const globalHeaders = getHeaders();
+      const globalHeaders: RawAxiosRequestHeaders = getHeaders();
 
       const requestOptions = {
         path: pageParam ?? requestPath,
@@ -66,7 +70,7 @@ export const useGetInfiniteRequest = <TResponse extends Record<string, any>>({
 
       let shouldContinue = true;
 
-      if (queryConfigOptions.queryMiddleware) {
+      if (queryConfigOptions?.queryMiddleware) {
         shouldContinue = await queryConfigOptions.queryMiddleware({ queryKey, ...requestOptions });
       }
 
@@ -115,7 +119,7 @@ export const useGetInfiniteRequest = <TResponse extends Record<string, any>>({
         sendRequest(res, rej, queryKey, pageParam)
       ),
     {
-      enabled: load || !queryConfigOptions.pauseFutureQueries,
+      enabled: load && !isFutureQueriesPaused,
       getNextPageParam: (lastPage) => constructPaginationLink('next_page', lastPage),
       getPreviousPageParam: (lastPage) => constructPaginationLink('previous_page', lastPage),
       ...options,
@@ -146,18 +150,25 @@ export const useGetInfiniteRequest = <TResponse extends Record<string, any>>({
       >
     | undefined
   > => {
-    if (!queryConfigOptions.pauseFutureQueries) {
+    if (!isFutureQueriesPaused) {
       await setOptionsAsync(fetchOptions);
       await updatedPathAsync(link);
 
       return query.data;
     } else {
-      setQueryConfig({ link, fetchOptions });
-
+      setRequestPayload({ link, fetchOptions });
       return undefined;
     }
   };
 
+  useEffect(() => {
+    if (!isFutureQueriesPaused && requestPayload) {
+      get(requestPayload.link, requestPayload.fetchOptions);
+      setRequestPayload(undefined);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isFutureQueriesPaused]);
+
   const updatedPathAsync = async (link: string) => {
     startTransition(() => {
       setRequestPath(link);
@@ -166,22 +177,19 @@ export const useGetInfiniteRequest = <TResponse extends Record<string, any>>({
 
   useEffect(() => {
     if (keyTracker) {
-      setConfig({ [keyTracker]: [requestPath, {}] });
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [keyTracker, requestPath]);
+      // set expiration time for the tracker
+      queryClient.setQueryDefaults([keyTracker], {
+        cacheTime: Infinity,
+        staleTime: Infinity,
+      });
 
-  useEffect(() => {
-    if (!queryConfigOptions.pauseFutureQueries && queryConfig) {
-      get(queryConfig.link, queryConfig.fetchOptions);
-      setQueryConfig(undefined);
+      queryClient.setQueryData([keyTracker], [requestPath, {}]);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [queryConfigOptions.pauseFutureQueries]);
+  }, [keyTracker, requestPath, queryClient, queryOptions?.staleTime]);
 
   return {
     get,
     ...query,
-    isLoading: query.isLoading || queryConfigOptions.pauseFutureQueries,
+    isLoading: query.isLoading || isFutureQueriesPaused,
   };
 };

package/src/queries/useGetRequest.ts

@@ -1,10 +1,12 @@
 import type { QueryKey, UseQueryOptions } from '@tanstack/react-query';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { startTransition, useEffect, useMemo, useState } from 'react';
+import type { RawAxiosRequestHeaders } from '../../node_modules/axios/index';
 import { useEnvironmentVariables, useQueryConfig, useQueryHeaders } from '../config';
 
 import type { IRequestError, IRequestSuccess } from '../request';
 import { makeRequest } from '../request';
+import { usePauseFutureRequests } from '../stores';
 import type { DefaultRequestOptions, IPagination, TanstackQueryOption } from './queries.interface';
 
 export const useGetRequest = <TResponse extends Record<string, any>>({
@@ -26,8 +28,10 @@ export const useGetRequest = <TResponse extends Record<string, any>>({
 
   const { API_URL, TIMEOUT } = useEnvironmentVariables();
   const { getHeaders } = useQueryHeaders();
-  const { options: queryConfigOptions, setConfig } = useQueryConfig();
-  const [queryConfig, setQueryConfig] = useState<{ link: string; fetchOptions: any }>();
+  const { options: queryConfigOptions } = useQueryConfig();
+  const [requestPayload, setRequestPayload] = useState<Record<any, any>>();
+
+  const isFutureQueriesPaused = usePauseFutureRequests((state) => state.isFutureQueriesPaused);
 
   let queryClient = useQueryClient();
 
@@ -43,7 +47,7 @@ export const useGetRequest = <TResponse extends Record<string, any>>({
   ) => {
     if (load) {
       // get request headers
-      const globalHeaders = getHeaders();
+      const globalHeaders: RawAxiosRequestHeaders = getHeaders();
 
       const [url] = queryKey;
       const requestUrl = (url ?? requestPath) as string;
@@ -57,7 +61,7 @@ export const useGetRequest = <TResponse extends Record<string, any>>({
 
       let shouldContinue = true;
 
-      if (queryConfigOptions.queryMiddleware) {
+      if (queryConfigOptions?.queryMiddleware) {
         shouldContinue = await queryConfigOptions.queryMiddleware({ queryKey, ...requestOptions });
       }
 
@@ -82,7 +86,7 @@ export const useGetRequest = <TResponse extends Record<string, any>>({
     ({ queryKey }) =>
       new Promise<IRequestSuccess<TResponse> | IRequestError>((res, rej) => sendRequest(res, rej, queryKey)),
     {
-      enabled: load,
+      enabled: load && !isFutureQueriesPaused,
       ...options,
     }
   );
@@ -95,10 +99,15 @@ export const useGetRequest = <TResponse extends Record<string, any>>({
 
   useEffect(() => {
     if (keyTracker) {
-      setConfig({ [keyTracker]: [requestPath, {}] });
+      // set expiration time for the tracker
+      queryClient.setQueryDefaults([keyTracker], {
+        cacheTime: Infinity,
+        staleTime: Infinity,
+      });
+
+      queryClient.setQueryData([keyTracker], [requestPath, {}]);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [keyTracker, requestPath]);
+  }, [keyTracker, requestPath, queryClient, queryOptions?.staleTime]);
 
   const nextPage = () => {
     if (query.data?.data.pagination) {
@@ -160,29 +169,28 @@ export const useGetRequest = <TResponse extends Record<string, any>>({
       Array<any>
     >
   ): Promise<IRequestSuccess<TResponse> | undefined> => {
-    if (!queryConfigOptions.pauseFutureQueries) {
+    if (!isFutureQueriesPaused) {
       await setOptionsAsync(fetchOptions);
       await updatedPathAsync(link);
 
       return query.data;
     } else {
-      setQueryConfig({ link, fetchOptions });
-
+      setRequestPayload({ link, fetchOptions });
       return undefined;
     }
   };
 
   useEffect(() => {
-    if (!queryConfigOptions.pauseFutureQueries && queryConfig) {
-      get(queryConfig.link, queryConfig.fetchOptions);
-      setQueryConfig(undefined);
+    if (!isFutureQueriesPaused && requestPayload) {
+      get(requestPayload.link, requestPayload.fetchOptions);
+      setRequestPayload(undefined);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [queryConfigOptions.pauseFutureQueries]);
+  }, [isFutureQueriesPaused]);
 
   return {
     ...query,
-    isLoading: query.isLoading || queryConfigOptions.pauseFutureQueries,
+    isLoading: query.isLoading || isFutureQueriesPaused,
     setRequestPath,
     nextPage,
     prevPage,

package/src/queries/usePatchRequest.ts

@@ -1,17 +1,22 @@
 import type { MutateOptions } from '@tanstack/react-query';
 import { useMutation } from '@tanstack/react-query';
+import type { RawAxiosRequestHeaders } from 'axios';
 import { useEffect, useState } from 'react';
 import { useEnvironmentVariables, useQueryConfig, useQueryHeaders } from '../config';
 import { scrollToTop } from '../helpers';
 import { useUploadProgress } from '../hooks';
 import { HttpMethod, makeRequest } from '../request';
 import type { IRequestError, IRequestSuccess } from '../request/request.interface';
+import { usePauseFutureRequests } from '../stores';
 import type { DefaultRequestOptions } from './queries.interface';
 
 export const usePatchRequest = <TResponse>({ path, baseUrl, headers }: { path: string } & DefaultRequestOptions) => {
   const { API_URL, TIMEOUT } = useEnvironmentVariables();
   const { uploadProgressPercent, onUploadProgress } = useUploadProgress();
-  const [mutationConfig, setMutationConfig] = useState<{ data: any; options: any }>();
+
+  const [requestPayload, setRequestPayload] = useState<Record<any, any>>();
+
+  const isFutureMutationsPaused = usePauseFutureRequests((state) => state.isFutureMutationsPaused);
 
   const { getHeaders } = useQueryHeaders();
 
@@ -19,7 +24,7 @@ export const usePatchRequest = <TResponse>({ path, baseUrl, headers }: { path: s
 
   const sendRequest = async (res: (value: any) => void, rej: (reason?: any) => void, data: any) => {
     // get request headers
-    const globalHeaders = getHeaders();
+    const globalHeaders: RawAxiosRequestHeaders = getHeaders();
 
     const requestOptions = {
       path: path,
@@ -33,7 +38,7 @@ export const usePatchRequest = <TResponse>({ path, baseUrl, headers }: { path: s
 
     let shouldContinue = true;
 
-    if (config.options.mutationMiddleware) {
+    if (config.options?.mutationMiddleware) {
       shouldContinue = await config.options.mutationMiddleware({
         mutationKey: [path, { type: 'mutation' }],
         ...requestOptions,
@@ -44,13 +49,13 @@ export const usePatchRequest = <TResponse>({ path, baseUrl, headers }: { path: s
       const patchResponse = await makeRequest<TResponse>(requestOptions);
       if (patchResponse.status) {
         // scroll to top after success
-        if (config.options.context !== 'app') {
+        if (config.options?.context !== 'app') {
           scrollToTop();
         }
         res(patchResponse as IRequestSuccess<TResponse>);
       } else {
         // scroll to top after error
-        if (config.options.context !== 'app') {
+        if (config.options?.context !== 'app') {
           scrollToTop();
         }
         rej(patchResponse);
@@ -73,26 +78,21 @@ export const usePatchRequest = <TResponse>({ path, baseUrl, headers }: { path: s
     data: any,
     options?: MutateOptions<IRequestSuccess<TResponse>, IRequestError, void, unknown> | undefined
   ): Promise<IRequestSuccess<TResponse> | undefined> => {
-    if (!config.options.pauseFutureMutations) {
+    if (!isFutureMutationsPaused) {
       return mutation.mutateAsync(data, options);
     } else {
-      setMutationConfig({ data, options });
+      setRequestPayload({ data, options });
       return undefined;
     }
   };
 
   useEffect(() => {
-    if (!config.options.pauseFutureMutations && mutationConfig) {
-      patch(mutationConfig.data, mutationConfig.options);
-      setMutationConfig(undefined);
+    if (!isFutureMutationsPaused && requestPayload) {
+      patch(requestPayload.data, requestPayload.options);
+      setRequestPayload(undefined);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [config.options.pauseFutureMutations]);
+  }, [isFutureMutationsPaused]);
 
-  return {
-    patch,
-    uploadProgressPercent,
-    ...mutation,
-    isLoading: mutation.isLoading || config.options.pauseFutureMutations,
-  };
+  return { patch, uploadProgressPercent, ...mutation, isLoading: mutation.isLoading || isFutureMutationsPaused };
 };