@ventlio/tanstack-query 0.3.1 → 0.3.3

package/src/queries/usePatchRequest.ts

@@ -1,17 +1,23 @@
 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 [requestPayload, setRequestPayload] = useState<Record<any, any>>();
+
+  const isFutureMutationsPaused = usePauseFutureRequests((state) => state.isFutureMutationsPaused);
+
   const { getHeaders } = useQueryHeaders();
 
   const config = useQueryConfig();
@@ -71,9 +77,22 @@ export const usePatchRequest = <TResponse>({ path, baseUrl, headers }: { path: s
   const patch = async (
     data: any,
     options?: MutateOptions<IRequestSuccess<TResponse>, IRequestError, void, unknown> | undefined
-  ): Promise<IRequestSuccess<TResponse>> => {
-    return mutation.mutateAsync(data, options);
+  ): Promise<IRequestSuccess<TResponse> | undefined> => {
+    if (!isFutureMutationsPaused) {
+      return mutation.mutateAsync(data, options);
+    } else {
+      setRequestPayload({ data, options });
+      return undefined;
+    }
   };
 
-  return { patch, uploadProgressPercent, ...mutation };
+  useEffect(() => {
+    if (!isFutureMutationsPaused && requestPayload) {
+      patch(requestPayload.data, requestPayload.options);
+      setRequestPayload(undefined);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isFutureMutationsPaused]);
+
+  return { patch, uploadProgressPercent, ...mutation, isLoading: mutation.isLoading || isFutureMutationsPaused };
 };

package/src/queries/usePostRequest.ts

@@ -3,10 +3,12 @@ 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>({
@@ -27,6 +29,9 @@ export const usePostRequest = <TResponse>({
   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,
@@ -108,10 +113,23 @@ export const usePostRequest = <TResponse>({
       | { requestConfig?: Partial<Omit<IMakeRequest, 'body'>> }
       | undefined
     ) & { requestConfig?: Partial<Omit<IMakeRequest, 'body'>> }
-  ): Promise<IRequestSuccess<TResponse>> => {
-    const { requestConfig, ...otherOptions } = options ?? {};
-    return mutation.mutateAsync({ data, requestConfig }, otherOptions);
+  ): Promise<IRequestSuccess<TResponse> | undefined> => {
+    if (!isFutureMutationsPaused) {
+      const { requestConfig, ...otherOptions } = options ?? {};
+      return mutation.mutateAsync({ data, requestConfig }, otherOptions);
+    } else {
+      setRequestPayload({ data, options });
+      return undefined;
+    }
   };
 
-  return { post, uploadProgressPercent, ...mutation };
+  useEffect(() => {
+    if (!isFutureMutationsPaused && requestPayload) {
+      post(requestPayload.data, requestPayload.options);
+      setRequestPayload(undefined);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isFutureMutationsPaused]);
+
+  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/__tests__/queries/usePostRequest.spec.ts

@@ -1,77 +0,0 @@
-import { renderHook } from '@testing-library/react-hooks';
-import axios from 'axios';
-import MockAdapter from 'axios-mock-adapter';
-import { usePostRequest } from '../../queries';
-
-const mockAxios = new MockAdapter(axios);
-
-describe('usePostRequest', () => {
-  const path = '/test';
-  const postData = { name: 'John Doe' };
-  const response = { id: 123, name: 'John Doe' };
-
-  beforeEach(() => {
-    mockAxios.reset();
-  });
-
-  it('should return post function and mutation object', () => {
-    const { result } = renderHook(() => usePostRequest<{ id: number; name: string }>({ path }));
-
-    expect(result.current.post).toBeInstanceOf(Function);
-    expect(result.current.isLoading).toBe(false);
-    expect(result.current.isSuccess).toBe(false);
-    expect(result.current.isError).toBe(false);
-  });
-
-  it('should make post request and return response data', async () => {
-    mockAxios.onPost(path).reply(200, response);
-
-    const { result, waitForNextUpdate } = renderHook(() => usePostRequest<{ id: number; name: string }>({ path }));
-
-    const responsePromise = result.current.post(postData);
-
-    expect(result.current.isLoading).toBe(true);
-
-    await waitForNextUpdate();
-
-    expect(result.current.isLoading).toBe(false);
-    expect(result.current.isSuccess).toBe(true);
-    expect(result.current.data).toEqual(response);
-    expect(await responsePromise).toEqual(response);
-  });
-
-  it('should make post request and return error', async () => {
-    const errorMessage = 'Request failed with status code 500';
-    mockAxios.onPost(path).reply(500, { message: errorMessage });
-
-    const { result, waitForNextUpdate } = renderHook(() => usePostRequest<{ id: number; name: string }>({ path }));
-
-    const responsePromise = result.current.post(postData);
-
-    expect(result.current.isLoading).toBe(true);
-
-    await waitForNextUpdate();
-
-    expect(result.current.isLoading).toBe(false);
-    expect(result.current.isError).toBe(true);
-    expect(result.current.error?.message).toBe(errorMessage);
-
-    await expect(responsePromise).rejects.toEqual({
-      message: errorMessage,
-    });
-  });
-
-  it('should make post request with FormData', async () => {
-    const formData = new FormData();
-    formData.append('name', 'John Doe');
-    mockAxios.onPost(path).reply(200, response);
-
-    const { result } = renderHook(() => usePostRequest<{ id: number; name: string }>({ path, isFormData: true }));
-
-    const responsePromise = result.current.post(formData);
-
-    expect(result.current.isLoading).toBe(true);
-
-    await expect(responsePromise).resolves.toEqual(response);
-  });
-});