@ventlio/tanstack-query 0.5.6 → 0.5.8

package/dist/types/index.d.ts

@@ -1,5 +1,5 @@
-import type { RawAxiosRequestHeaders } from 'axios';
-import type { IRequestError, IRequestSuccess } from '../request';
+import type { AxiosProgressEvent, RawAxiosRequestHeaders } from 'axios';
+import type { AppFileConfig, HttpMethod, IMakeRequest, IRequestError, IRequestSuccess } from '../request';
 export interface BootstrapConfig {
     environments?: {
         appBaseUrl: string;
@@ -7,12 +7,23 @@ export interface BootstrapConfig {
     };
     context?: ContextType;
     modelConfig?: BootstrapModelConfig;
-    middleware?: <T = any>(next: () => Promise<IRequestSuccess<T> | IRequestError>, configs?: {
+    middleware?: <T = any>(next: (options?: Partial<NextOptions>) => Promise<IRequestSuccess<T> | IRequestError>, configs?: {
         baseUrl: string;
         path: string;
         body?: Record<string, any>;
     }) => Promise<IRequestError | IRequestSuccess<T>>;
 }
+export interface NextOptions extends Partial<IMakeRequest> {
+    baseURL: string;
+    timeout: number;
+    path: string;
+    body: any;
+    method: HttpMethod;
+    isFormData: boolean;
+    headers: RawAxiosRequestHeaders;
+    appFileConfig: AppFileConfig;
+    onUploadProgress: (progressEvent: AxiosProgressEvent) => void;
+}
 export interface BootstrapModelConfig {
     idColumn: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ventlio/tanstack-query",
-  "version": "0.5.6",
+  "version": "0.5.8",
   "license": "MIT",
   "main": "dist/index.js",
   "contributors": [
@@ -87,6 +87,7 @@
     "src"
   ],
   "dependencies": {
+    "@tanstack/react-store": "^0.7.0",
     "lodash.result": "^4.5.2",
     "lodash.set": "^4.3.2",
     "url-search-params-polyfill": "^8.2.5",

package/src/config/bootStore.ts

@@ -0,0 +1,14 @@
+import { Store } from '@tanstack/react-store';
+import { BootstrapConfig } from '../types';
+
+export const bootStore = new Store<BootstrapConfig>({
+  context: 'web',
+  environments: {
+    appBaseUrl: undefined as any,
+    appTimeout: 30000,
+  },
+  middleware: (next) => {
+    return next();
+  },
+  modelConfig: undefined,
+});

package/src/config/bootstrapQueryRequest.ts

@@ -1,22 +1,11 @@
 import type { QueryClient } from '@tanstack/react-query';
 import 'url-search-params-polyfill';
 import type { BootstrapConfig } from '../types';
+import { bootStore } from './bootStore';
 
-export const bootstrapQueryRequest = (queryClient: QueryClient, options?: BootstrapConfig): void => {
-  // make query config doesn't expire
-
+export const bootstrapQueryRequest = async (queryClient: QueryClient, options: BootstrapConfig): Promise<void> => {
   // set default query config
-  const defaultMeta = {
-    headers: {
-      Authorization: ``,
-    },
-    options,
-  };
+  await queryClient.resumePausedMutations();
 
-  queryClient.setDefaultOptions({
-    queries: {
-      meta: defaultMeta,
-    },
-    mutations: { meta: defaultMeta },
-  });
+  bootStore.setState(() => options);
 };

package/src/config/index.ts

@@ -1,6 +1,5 @@
 export * from './bootstrapQueryRequest';
 export * from './config.interface';
 export * from './useEnvironmentVariables';
-export * from './useQueryConfig';
 export * from './useQueryHeaders';
 export * from './useReactNativeEnv';

package/src/config/useReactNativeEnv.ts

@@ -1,11 +1,12 @@
-import { useQueryConfig } from './useQueryConfig';
+import { useStore } from '@tanstack/react-store';
+import { bootStore } from './bootStore';
 
 export const useReactNativeEnv = () => {
-  const config = useQueryConfig();
+  const { environments, context } = useStore(bootStore);
 
-  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 = environments?.appBaseUrl;
+  const appTimeout: number | undefined = environments?.appTimeout;
+  const isApp = context === 'app';
 
   return { appUrl, appTimeout, isApp };
 };

package/src/model/useQueryModel.ts

@@ -1,7 +1,8 @@
 import { useQueryClient } from '@tanstack/react-query';
+import { useStore } from '@tanstack/react-store';
 import result from 'lodash.result';
 import { default as lodashSet } from 'lodash.set';
-import { useQueryConfig } from '../config';
+import { bootStore } from '../config/bootStore';
 import type { QueryModelAddPosition, QueryModelBuilder } from './model.interface';
 import { useKeyTrackerModel } from './useKeyTrackerModel';
 
@@ -9,7 +10,7 @@ export const useQueryModel = <T>(keyTracker: string): QueryModelBuilder<T> => {
   const queryClient = useQueryClient();
   const { getQueryKey } = useKeyTrackerModel(keyTracker);
   const queryKey = getQueryKey() as any[];
-  const config = useQueryConfig();
+  const config = useStore(bootStore);
 
   const add = (data: T, position?: QueryModelAddPosition, path?: string): T | undefined => {
     let records = (findAll(path) ?? []) as T[];
@@ -79,8 +80,7 @@ export const useQueryModel = <T>(keyTracker: string): QueryModelBuilder<T> => {
   };
 
   const getModelConfig = () => {
-    const { options } = config;
-    const { modelConfig } = options ?? {};
+    const { modelConfig } = config;
 
     return modelConfig;
   };

package/src/queries/useDeleteRequest.ts

@@ -1,7 +1,9 @@
 import type { QueryKey, UseQueryOptions } from '@tanstack/react-query';
 import { useQuery } from '@tanstack/react-query';
+import { useStore } from '@tanstack/react-store';
 import { useEffect, useState } from 'react';
-import { useEnvironmentVariables, useQueryConfig } from '../config';
+import { useEnvironmentVariables } from '../config';
+import { bootStore } from '../config/bootStore';
 import type { IRequestError, IRequestSuccess } from '../request';
 import { HttpMethod, makeRequest } from '../request';
 import { useHeaderStore, usePauseFutureRequests } from '../stores';
@@ -12,7 +14,8 @@ export const useDeleteRequest = <TResponse>(deleteOptions?: DefaultRequestOption
   const [requestPath, setRequestPath] = useState<string>('');
   const [options, setOptions] = useState<any>();
 
-  const { options: queryConfigOptions } = useQueryConfig();
+  const { middleware } = useStore(bootStore);
+
   const [requestPayload, setRequestPayload] = useState<Record<any, any>>();
 
   const isFutureQueriesPaused = usePauseFutureRequests((state) => state.isFutureQueriesPaused);
@@ -34,12 +37,18 @@ export const useDeleteRequest = <TResponse>(deleteOptions?: DefaultRequestOption
     };
 
     let deleteResponse: IRequestError | IRequestSuccess<TResponse>;
-    if (queryConfigOptions?.middleware) {
+    if (middleware) {
       // perform global middleware
-      deleteResponse = await queryConfigOptions.middleware(async () => await makeRequest<TResponse>(requestOptions), {
-        path: requestUrl,
-        baseUrl: baseUrl ?? API_URL,
-      });
+      deleteResponse = await middleware(
+        async (middlewareOptions) =>
+          await makeRequest<TResponse>(
+            middlewareOptions ? { ...requestOptions, ...middlewareOptions } : requestOptions
+          ),
+        {
+          path: requestUrl,
+          baseUrl: baseUrl ?? API_URL,
+        }
+      );
     } else {
       deleteResponse = await makeRequest<TResponse>(requestOptions);
     }

package/src/queries/useGetInfiniteRequest.ts

@@ -1,8 +1,10 @@
 import type { InfiniteData, UseQueryOptions } from '@tanstack/react-query';
 import { useInfiniteQuery, useQueryClient } from '@tanstack/react-query';
 import { startTransition, useEffect, useMemo, useState } from 'react';
-import { useEnvironmentVariables, useQueryConfig } from '../config';
+import { useEnvironmentVariables } from '../config';
 
+import { useStore } from '@tanstack/react-store';
+import { bootStore } from '../config/bootStore';
 import type { IRequestError, IRequestSuccess } from '../request';
 import { makeRequest } from '../request';
 import { useHeaderStore, usePauseFutureRequests } from '../stores';
@@ -35,7 +37,8 @@ export const useGetInfiniteRequest = <TResponse extends Record<string, any>>({
   const [requestPath, setRequestPath] = useState<string>(path);
 
   const [options, setOptions] = useState<any>(queryOptions);
-  const { options: queryConfigOptions } = useQueryConfig();
+  const { middleware } = useStore(bootStore);
+
   const [requestPayload, setRequestPayload] = useState<Record<any, any>>();
 
   const isFutureQueriesPaused = usePauseFutureRequests((state) => state.isFutureQueriesPaused);
@@ -66,12 +69,18 @@ export const useGetInfiniteRequest = <TResponse extends Record<string, any>>({
       };
 
       let getResponse: IRequestError | IRequestSuccess<TResponse>;
-      if (queryConfigOptions?.middleware) {
+      if (middleware) {
         // perform global middleware
-        getResponse = await queryConfigOptions.middleware(async () => await makeRequest<TResponse>(requestOptions), {
-          path,
-          baseUrl: baseUrl ?? API_URL,
-        });
+        getResponse = await middleware(
+          async (middlewareOptions) =>
+            await makeRequest<TResponse>(
+              middlewareOptions ? { ...requestOptions, ...middlewareOptions } : requestOptions
+            ),
+          {
+            path,
+            baseUrl: baseUrl ?? API_URL,
+          }
+        );
       } else {
         getResponse = await makeRequest<TResponse>(requestOptions);
       }

package/src/queries/useGetRequest.ts

@@ -1,7 +1,9 @@
 import { QueryKey, useQuery, useQueryClient, UseQueryOptions } from '@tanstack/react-query';
 import { startTransition, useEffect, useMemo, useState } from 'react';
-import { useEnvironmentVariables, useQueryConfig } from '../config';
+import { useEnvironmentVariables } from '../config';
 
+import { useStore } from '@tanstack/react-store';
+import { bootStore } from '../config/bootStore';
 import { IRequestError, IRequestSuccess, makeRequest } from '../request';
 import { useHeaderStore, usePauseFutureRequests } from '../stores';
 import { DefaultRequestOptions, IPagination, TanstackQueryOption } from './queries.interface';
@@ -24,9 +26,10 @@ export const useGetRequest = <TResponse extends Record<string, any>>({
   const [page, setPage] = useState<number>(1);
 
   const { API_URL, TIMEOUT } = useEnvironmentVariables();
+  const { middleware } = useStore(bootStore);
+
   const globalHeaders = useHeaderStore((state) => state.headers);
 
-  const { options: queryConfigOptions } = useQueryConfig();
   const [requestPayload, setRequestPayload] = useState<Record<any, any>>();
 
   const isFutureQueriesPaused = usePauseFutureRequests((state) => state.isFutureQueriesPaused);
@@ -54,12 +57,18 @@ export const useGetRequest = <TResponse extends Record<string, any>>({
     };
 
     let getResponse: IRequestError | IRequestSuccess<TResponse>;
-    if (queryConfigOptions?.middleware) {
+    if (middleware) {
       // perform global middleware
-      getResponse = await queryConfigOptions.middleware(async () => await makeRequest<TResponse>(requestOptions), {
-        path,
-        baseUrl: baseUrl ?? API_URL,
-      });
+      getResponse = await middleware(
+        async (middlewareOptions) =>
+          await makeRequest<TResponse>(
+            middlewareOptions ? { ...requestOptions, ...middlewareOptions } : requestOptions
+          ),
+        {
+          path,
+          baseUrl: baseUrl ?? API_URL,
+        }
+      );
     } else {
       getResponse = await makeRequest<TResponse>(requestOptions);
     }

package/src/queries/usePatchRequest.ts

@@ -1,7 +1,9 @@
 import type { MutateOptions } from '@tanstack/react-query';
 import { useMutation } from '@tanstack/react-query';
+import { useStore } from '@tanstack/react-store';
 import { useEffect, useState } from 'react';
-import { useEnvironmentVariables, useQueryConfig } from '../config';
+import { useEnvironmentVariables } from '../config';
+import { bootStore } from '../config/bootStore';
 import { scrollToTop } from '../helpers';
 import { useUploadProgress } from '../hooks';
 import { HttpMethod, makeRequest } from '../request';
@@ -17,8 +19,7 @@ export const usePatchRequest = <TResponse>({ path, baseUrl, headers }: { path: s
   const [requestPayload, setRequestPayload] = useState<Record<any, any>>();
 
   const isFutureMutationsPaused = usePauseFutureRequests((state) => state.isFutureMutationsPaused);
-
-  const config = useQueryConfig();
+  const { middleware, context } = useStore(bootStore);
 
   const sendRequest = async (res: (value: any) => void, rej: (reason?: any) => void, data: any) => {
     // get request headers
@@ -34,10 +35,10 @@ export const usePatchRequest = <TResponse>({ path, baseUrl, headers }: { path: s
     };
 
     let patchResponse: IRequestError | IRequestSuccess<TResponse>;
-    if (config.options?.middleware) {
+    if (middleware) {
       // perform global middleware
-      const middlewareResponse = await config.options.middleware(
-        async () => await makeRequest<TResponse>(requestOptions),
+      const middlewareResponse = await middleware(
+        async (options) => await makeRequest<TResponse>(options ? { ...requestOptions, ...options } : requestOptions),
         {
           path,
           baseUrl: baseUrl ?? API_URL,
@@ -51,13 +52,13 @@ export const usePatchRequest = <TResponse>({ path, baseUrl, headers }: { path: s
     }
     if (patchResponse.status) {
       // scroll to top after success
-      if (config.options?.context !== 'app') {
+      if (context !== 'app') {
         scrollToTop();
       }
       res(patchResponse as IRequestSuccess<TResponse>);
     } else {
       // scroll to top after error
-      if (config.options?.context !== 'app') {
+      if (context !== 'app') {
         scrollToTop();
       }
       rej(patchResponse);

package/src/queries/usePostRequest.ts

@@ -1,8 +1,10 @@
 import type { MutateOptions } from '@tanstack/react-query';
 import { useMutation } from '@tanstack/react-query';
-import { useEnvironmentVariables, useQueryConfig, useReactNativeEnv } from '../config';
+import { useEnvironmentVariables, useReactNativeEnv } from '../config';
 
+import { useStore } from '@tanstack/react-store';
 import { useEffect, useState } from 'react';
+import { bootStore } from '../config/bootStore';
 import { scrollToTop } from '../helpers';
 import { useUploadProgress } from '../hooks';
 import type { IMakeRequest, IRequestError, IRequestSuccess } from '../request';
@@ -23,7 +25,7 @@ export const usePostRequest = <TResponse>({
 } & DefaultRequestOptions) => {
   const { API_URL, TIMEOUT } = useEnvironmentVariables();
 
-  const config = useQueryConfig();
+  const { middleware, context } = useStore(bootStore);
 
   const globalHeaders = useHeaderStore((state) => state.headers);
   const { isApp } = useReactNativeEnv();
@@ -60,13 +62,16 @@ export const usePostRequest = <TResponse>({
     };
 
     let postResponse: IRequestError | IRequestSuccess<TResponse>;
-    if (config.options?.middleware) {
+    if (middleware) {
       // perform global middleware
-      postResponse = await config.options.middleware(async () => await makeRequest<TResponse>(requestOptions), {
-        path,
-        baseUrl: baseUrl ?? API_URL,
-        body: data,
-      });
+      postResponse = await middleware(
+        async (options) => await makeRequest<TResponse>(options ? { ...requestOptions, ...options } : requestOptions),
+        {
+          path,
+          baseUrl: baseUrl ?? API_URL,
+          body: data,
+        }
+      );
     } else {
       postResponse = await makeRequest<TResponse>(requestOptions);
     }
@@ -74,13 +79,13 @@ export const usePostRequest = <TResponse>({
     if (postResponse.status) {
       // scroll to top after success
 
-      if (config.options?.context !== 'app') {
+      if (context !== 'app') {
         scrollToTop();
       }
       res(postResponse as IRequestSuccess<TResponse>);
     } else {
       // scroll to top after error
-      if (config.options?.context !== 'app') {
+      if (context !== 'app') {
         scrollToTop();
       }
       rej(postResponse);

package/src/queries/usePutRequest.ts

@@ -1,7 +1,9 @@
 import type { MutateOptions } from '@tanstack/react-query';
 import { useMutation } from '@tanstack/react-query';
+import { useStore } from '@tanstack/react-store';
 import { useEffect, useState } from 'react';
-import { useEnvironmentVariables, useQueryConfig } from '../config';
+import { useEnvironmentVariables } from '../config';
+import { bootStore } from '../config/bootStore';
 import { scrollToTop } from '../helpers';
 import { useUploadProgress } from '../hooks';
 import { HttpMethod, makeRequest } from '../request';
@@ -18,7 +20,7 @@ export const usePutRequest = <TResponse>({ path, baseUrl, headers }: { path: str
 
   const isFutureMutationsPaused = usePauseFutureRequests((state) => state.isFutureMutationsPaused);
 
-  const config = useQueryConfig();
+  const { middleware, context } = useStore(bootStore);
 
   const sendRequest = async (res: (value: any) => void, rej: (reason?: any) => void, data: any) => {
     // get request headers
@@ -34,25 +36,28 @@ export const usePutRequest = <TResponse>({ path, baseUrl, headers }: { path: str
     };
 
     let putResponse: IRequestError | IRequestSuccess<TResponse>;
-    if (config.options?.middleware) {
+    if (middleware) {
       // perform global middleware
-      putResponse = await config.options.middleware(async () => await makeRequest<TResponse>(requestOptions), {
-        path,
-        baseUrl: baseUrl ?? API_URL,
-        body: data,
-      });
+      putResponse = await middleware(
+        async (options) => await makeRequest<TResponse>(options ? { ...requestOptions, ...options } : requestOptions),
+        {
+          path,
+          baseUrl: baseUrl ?? API_URL,
+          body: data,
+        }
+      );
     } else {
       putResponse = await makeRequest<TResponse>(requestOptions);
     }
     if (putResponse.status) {
       // scroll to top after success
-      if (config.options?.context !== 'app') {
+      if (context !== 'app') {
         scrollToTop();
       }
       res(putResponse as IRequestSuccess<TResponse>);
     } else {
       // scroll to top after error
-      if (config.options?.context !== 'app') {
+      if (context !== 'app') {
         scrollToTop();
       }
       rej(putResponse);

package/src/types/index.ts

@@ -1,5 +1,5 @@
-import type { RawAxiosRequestHeaders } from 'axios';
-import type { IRequestError, IRequestSuccess } from '../request';
+import type { AxiosProgressEvent, RawAxiosRequestHeaders } from 'axios';
+import type { AppFileConfig, HttpMethod, IMakeRequest, IRequestError, IRequestSuccess } from '../request';
 
 export interface BootstrapConfig {
   environments?: {
@@ -9,11 +9,23 @@ export interface BootstrapConfig {
   context?: ContextType;
   modelConfig?: BootstrapModelConfig;
   middleware?: <T = any>(
-    next: () => Promise<IRequestSuccess<T> | IRequestError>,
+    next: (options?: Partial<NextOptions>) => Promise<IRequestSuccess<T> | IRequestError>,
     configs?: { baseUrl: string; path: string; body?: Record<string, any> }
   ) => Promise<IRequestError | IRequestSuccess<T>>;
 }
 
+export interface NextOptions extends Partial<IMakeRequest> {
+  baseURL: string;
+  timeout: number;
+  path: string;
+  body: any;
+  method: HttpMethod;
+  isFormData: boolean;
+  headers: RawAxiosRequestHeaders;
+  appFileConfig: AppFileConfig;
+  onUploadProgress: (progressEvent: AxiosProgressEvent) => void;
+}
+
 export interface BootstrapModelConfig {
   idColumn: string;
 }

package/dist/config/bootstrapQueryRequest.js

@@ -1,21 +0,0 @@
-import 'url-search-params-polyfill';
-
-const bootstrapQueryRequest = (queryClient, options) => {
-    // make query config doesn't expire
-    // set default query config
-    const defaultMeta = {
-        headers: {
-            Authorization: ``,
-        },
-        options,
-    };
-    queryClient.setDefaultOptions({
-        queries: {
-            meta: defaultMeta,
-        },
-        mutations: { meta: defaultMeta },
-    });
-};
-
-export { bootstrapQueryRequest };
-//# sourceMappingURL=bootstrapQueryRequest.js.map

package/dist/config/useQueryConfig.d.ts

@@ -1,2 +0,0 @@
-import type { TanstackQueryConfig } from '../types';
-export declare const useQueryConfig: () => TanstackQueryConfig;

package/dist/config/useQueryConfig.js

@@ -1,11 +0,0 @@
-import { useQueryClient } from '@tanstack/react-query';
-
-const useQueryConfig = () => {
-    const queryClient = useQueryClient();
-    const mutationMeta = (queryClient.getDefaultOptions().mutations?.meta ?? {});
-    const queryMeta = (queryClient.getDefaultOptions().queries?.meta ?? {});
-    return { ...queryMeta, ...mutationMeta };
-};
-
-export { useQueryConfig };
-//# sourceMappingURL=useQueryConfig.js.map

package/dist/config/useQueryConfig.js.map

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

package/dist/config/useReactNativeEnv.js

@@ -1,12 +0,0 @@
-import { useQueryConfig } from './useQueryConfig.js';
-
-const useReactNativeEnv = () => {
-    const config = useQueryConfig();
-    const appUrl = config.options?.environments?.appBaseUrl;
-    const appTimeout = config.options?.environments?.appTimeout;
-    const isApp = config.options?.context === 'app';
-    return { appUrl, appTimeout, isApp };
-};
-
-export { useReactNativeEnv };
-//# sourceMappingURL=useReactNativeEnv.js.map

package/src/config/useQueryConfig.ts

@@ -1,11 +0,0 @@
-import { useQueryClient } from '@tanstack/react-query';
-import type { TanstackQueryConfig } from '../types';
-
-export const useQueryConfig = (): TanstackQueryConfig => {
-  const queryClient = useQueryClient();
-
-  const mutationMeta = (queryClient.getDefaultOptions().mutations?.meta ?? {}) as unknown as TanstackQueryConfig;
-  const queryMeta = (queryClient.getDefaultOptions().queries?.meta ?? {}) as unknown as TanstackQueryConfig;
-
-  return { ...queryMeta, ...mutationMeta };
-};