@ventlio/tanstack-query 0.3.0 → 0.3.2

package/src/queries/usePostRequest.ts

@@ -2,11 +2,13 @@ import type { MutateOptions } from '@tanstack/react-query';
 import { useMutation } from '@tanstack/react-query';
 import { useEnvironmentVariables, useQueryConfig, useQueryHeaders, useReactNativeEnv } from '../config';
 
+import type { RawAxiosRequestHeaders } from 'axios';
 import { useEffect, useState } from 'react';
 import { scrollToTop } from '../helpers';
 import { useUploadProgress } from '../hooks';
 import type { IMakeRequest, IRequestError, IRequestSuccess } from '../request';
 import { HttpMethod, makeRequest } from '../request';
+import { usePauseFutureRequests } from '../stores';
 import type { DefaultRequestOptions } from './queries.interface';
 
 export const usePostRequest = <TResponse>({
@@ -23,11 +25,13 @@ export const usePostRequest = <TResponse>({
   const { API_URL, TIMEOUT } = useEnvironmentVariables();
 
   const config = useQueryConfig();
-  const [mutationConfig, setMutationConfig] = useState<{ data: any; options: any }>();
 
   const { getHeaders } = useQueryHeaders();
   const { isApp } = useReactNativeEnv();
   const { uploadProgressPercent, onUploadProgress } = useUploadProgress();
+  const [requestPayload, setRequestPayload] = useState<Record<any, any>>();
+
+  const isFutureMutationsPaused = usePauseFutureRequests((state) => state.isFutureMutationsPaused);
 
   const sendRequest = async (
     res: (value: any) => void,
@@ -35,7 +39,7 @@ export const usePostRequest = <TResponse>({
     postData: { data: any; requestConfig?: Partial<IMakeRequest> }
   ) => {
     // get request headers
-    const globalHeaders = getHeaders();
+    const globalHeaders: RawAxiosRequestHeaders = getHeaders();
 
     const { data, requestConfig } = postData;
 
@@ -59,7 +63,7 @@ export const usePostRequest = <TResponse>({
 
     let shouldContinue = true;
 
-    if (config.options.mutationMiddleware) {
+    if (config.options?.mutationMiddleware) {
       shouldContinue = await config.options.mutationMiddleware({
         mutationKey: [path, { type: 'mutation' }],
         ...requestOptions,
@@ -72,13 +76,13 @@ export const usePostRequest = <TResponse>({
       if (postResponse.status) {
         // scroll to top after success
 
-        if (config.options.context !== 'app') {
+        if (config.options?.context !== 'app') {
           scrollToTop();
         }
         res(postResponse as IRequestSuccess<TResponse>);
       } else {
         // scroll to top after error
-        if (config.options.context !== 'app') {
+        if (config.options?.context !== 'app') {
           scrollToTop();
         }
         rej(postResponse);
@@ -110,22 +114,22 @@ export const usePostRequest = <TResponse>({
       | undefined
     ) & { requestConfig?: Partial<Omit<IMakeRequest, 'body'>> }
   ): Promise<IRequestSuccess<TResponse> | undefined> => {
-    if (!config.options.pauseFutureMutations) {
+    if (!isFutureMutationsPaused) {
       const { requestConfig, ...otherOptions } = options ?? {};
       return mutation.mutateAsync({ data, requestConfig }, otherOptions);
     } else {
-      setMutationConfig({ data, options });
+      setRequestPayload({ data, options });
       return undefined;
     }
   };
 
   useEffect(() => {
-    if (!config.options.pauseFutureMutations && mutationConfig) {
-      post(mutationConfig.data, mutationConfig.options);
-      setMutationConfig(undefined);
+    if (!isFutureMutationsPaused && requestPayload) {
+      post(requestPayload.data, requestPayload.options);
+      setRequestPayload(undefined);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [config.options.pauseFutureMutations]);
+  }, [isFutureMutationsPaused]);
 
-  return { post, uploadProgressPercent, ...mutation };
+  return { post, uploadProgressPercent, ...mutation, isLoading: mutation.isLoading || isFutureMutationsPaused };
 };

package/src/stores/index.ts

@@ -0,0 +1 @@
+export * from './usePauseFutureRequests';

package/src/stores/usePauseFutureRequests.ts

@@ -0,0 +1,25 @@
+import { create } from 'zustand';
+
+export interface PauseFutureRequest {
+  isFutureQueriesPaused: boolean;
+  isFutureMutationsPaused: boolean;
+
+  pauseFutureMutation: (status: boolean) => void;
+  pauseFutureQueries: (status: boolean) => void;
+}
+
+export const usePauseFutureRequests = create<PauseFutureRequest>((set) => {
+  const pauseFutureQueries = (status: boolean) => {
+    return set({ isFutureQueriesPaused: status });
+  };
+  const pauseFutureMutation = (status: boolean) => {
+    return set({ isFutureQueriesPaused: status });
+  };
+
+  return {
+    isFutureMutationsPaused: false,
+    isFutureQueriesPaused: false,
+    pauseFutureQueries,
+    pauseFutureMutation,
+  };
+});

package/src/types/index.ts

@@ -11,9 +11,6 @@ export interface BootstrapConfig {
   modelConfig?: BootstrapModelConfig;
   mutationMiddleware?: (mutateRequestConfig?: IMakeRequest & { mutationKey: QueryKey }) => Promise<boolean>;
   queryMiddleware?: (queryRequestConfig?: IMakeRequest & { queryKey: QueryKey }) => Promise<boolean>;
-  pauseFutureMutations?: boolean;
-  pauseFutureQueries?: boolean;
-  headers?: RawAxiosRequestHeaders;
 }
 
 export interface BootstrapModelConfig {
@@ -22,11 +19,11 @@ export interface BootstrapModelConfig {
 
 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;
 }