@ventlio/tanstack-query 0.2.26 → 0.2.28

package/dist/config/useQueryHeaders.js

@@ -10,6 +10,8 @@ const useQueryHeaders = () => {
             queryFn: () => {
                 return queryClient.getQueryData(['config']);
             },
+            staleTime: Infinity,
+            cacheTime: Infinity,
         });
     };
     const setQueryHeaders = (newHeaders) => {

package/dist/config/useQueryHeaders.js.map

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

package/dist/index.mjs

@@ -25,6 +25,8 @@ const useQueryHeaders = () => {
             queryFn: () => {
                 return queryClient.getQueryData(['config']);
             },
+            staleTime: Infinity,
+            cacheTime: Infinity,
         });
     };
     const setQueryHeaders = (newHeaders) => {
@@ -138,6 +140,7 @@ async function makeRequest({ body, method = HttpMethod.GET, path, isFormData, he
     // configure body
     body = isFormData ? buildFormData(body) : body;
     // configure request header
+    console.log({ isFormData });
     if (!isFormData) {
         headers['Content-Type'] = ContentType.APPLICATION_JSON;
     }

package/dist/index.mjs.map

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

package/dist/request/make-request.js

@@ -9,6 +9,7 @@ async function makeRequest({ body, method = request_enum.HttpMethod.GET, path, i
     // configure body
     body = isFormData ? buildFormData.buildFormData(body) : body;
     // configure request header
+    console.log({ isFormData });
     if (!isFormData) {
         headers['Content-Type'] = request_enum.ContentType.APPLICATION_JSON;
     }

package/dist/request/make-request.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ventlio/tanstack-query",
-  "version": "0.2.26",
+  "version": "0.2.28",
   "license": "MIT",
   "main": "dist/index.js",
   "contributors": [
@@ -22,7 +22,8 @@
   },
   "scripts": {
     "build": "rimraf dist && rollup --config rollup.config.ts --configPlugin rollup-plugin-typescript2",
-    "build:watch": "yarn build -w"
+    "build:watch": "yarn build -w",
+    "test": "jest"
   },
   "peerDependencies": {
     "@tanstack/react-query": "^4.26.1",
@@ -47,13 +48,16 @@
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-typescript": "^11.0.0",
     "@tanstack/react-query": "^4.26.1",
+    "@testing-library/react-hooks": "^8.0.1",
     "@types/axios": "^0.14.0",
+    "@types/jest": "^29.5.1",
     "@types/node": "*",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
     "@typescript-eslint/eslint-plugin": "^5.54.1",
     "@typescript-eslint/parser": "^5.54.1",
     "axios": "^1.3.4",
+    "axios-mock-adapter": "^1.21.4",
     "eslint": "^8.36.0",
     "eslint-config-google": "^0.14.0",
     "eslint-config-prettier": "^8.7.0",
@@ -62,12 +66,15 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "jest": "^29.5.0",
+    "jest-environment-jsdom": "^29.5.0",
     "prettier": "^2.8.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rimraf": "^4.4.0",
     "rollup": "^3.19.1",
     "rollup-plugin-typescript2": "^0.34.1",
+    "ts-jest": "^29.1.0",
     "ts-node": "^10.9.1",
     "tslib": "^2.5.0",
     "typescript": "^4.9.5"

package/src/__tests__/queries/usePostRequest.spec.ts

@@ -0,0 +1,85 @@
+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);
+  });
+});

package/src/config/useQueryHeaders.ts

@@ -10,6 +10,8 @@ export const useQueryHeaders = (): IUseQueryHeaders => {
       queryFn: () => {
         return queryClient.getQueryData(['config']);
       },
+      staleTime: Infinity,
+      cacheTime: Infinity,
     });
   };
 

package/src/request/make-request.ts

@@ -19,6 +19,8 @@ export async function makeRequest<TResponse>({
 
   // configure request header
 
+  console.log({ isFormData });
+
   if (!isFormData) {
     headers['Content-Type'] = ContentType.APPLICATION_JSON;
   }