@ventlio/tanstack-query 0.2.72 → 0.2.74

package/README.md

@@ -1,4 +1,4 @@
-### This is not a replacement for @tanstack/react-query
+### This is a complementary library that should be used with @tanstack/react-query for API REQUESTS and more
 
 ## WHY THIS PACKAGE?
 
@@ -12,12 +12,27 @@ But we were not discouraged. So, we set out to find a solution which led to the
 
 > Please note that this package is still being developed and may not function as expected. We are working to refine its implementation structure to meet a functional standard. The documentation may not align with the current implementation, so if you encounter any difficulties while setting up the package, please raise an issue in the GitHub repository. We appreciate your patience and understanding as we work to improve this package.
 
-## Install
+### Tasks
+
+- [✅] Global settings for requests
+- [✅] Requests context implementations
+- [✅] Post, Get, Patch Requests
+- [✅] Query key tracker to track dynamic query and help fetch query cache from any page
+- [✅] Persistent queries implementation (Not completed)
+- [❌] Put request
+- [❌] Generic return type (this is currently an issue if the API does not return object with the necessary properties required by the library)
+- [❌] Generic Pagination for any response without infinite queries
+- [❌] Infinite Get Query implementation (still using implementation meant for our use case)
+- [❌] Server sent events
+- [❌] Socket implementations
+- [❌] Tests
+
+## Installation
 
 > You must install @tanstack/react-query and axios first to use this package
 
 ```
-npm install @tanstack/react-query axios
+yarn add @tanstack/react-query axios
 ```
 
 After that install this package
@@ -26,16 +41,41 @@ After that install this package
 $ npm install @ventlio/tanstack-query
 ```
 
+OR
+
 ```
 $ yarn add @ventlio/tanstack-query
 ```
 
+## CURRENT RETURN TYPE
+
+Currently the library return type expects data structure of the below schema, so depending on the API design,
+you can reach out to the developer to implement the return type that follows the below schema.
+
+```js
+export interface IRequestError {
+  statusCode: number;
+  message: string;
+  timeStamp: Date;
+  status: boolean;
+  data?: any;
+}
+
+export interface IRequestSuccess<T> {
+  statusCode: number;
+  message: string;
+  timeStamp: Date;
+  status: boolean;
+  data: T;
+}
+```
 
 ## Getting Started
 
 Follow the below instructions to have the package running on your project
 
 ### Set the environment variables
+
 ```env
 # For ReactJS
 REACT_APP_API_URL='https://api.example.com'
@@ -46,6 +86,7 @@ NEXT_PUBLIC_API_URL='https://api.example.com'
 NEXT_PUBLIC_API_TIMEOUT=300000
 
 ```
+
 ```js
 import { QueryClient } from '@tanstack/react-query';
 import { TanstackQueryConfig, bootstrapQueryRequest } from '@ventlio/tanstack-query';
@@ -56,6 +97,17 @@ const queryClient = new QueryClient();
 // do this before adding the queryClient to QueryClientProvider
 bootstrapQueryRequest(queryClient);
 
+// recommended setup for mobile apps as the .env setup won't work
+bootstrapQueryRequest(queryClient, {
+  context: 'app', // this is required to make the library switch to app context where necessary
+  environments: {
+    appBaseUrl: baseUrl,
+    appTimeout: 30000,
+  },
+  modelConfig: {
+    idColumn: 'id', // used for useQueryModel to uniquely identify query data in a collection/array instance
+  },
+});
 ```
 
 You can now use it in a QueryClientProvider
@@ -77,19 +129,17 @@ function App() {
 Updating the configurations inside a component
 
 ```jsx
-import {
-  useQueryBaseURL,
-  useQueryHeaders,
-  useQueryTimeout,
-} from '@ventlio/tanstack-query';
+import { useQueryBaseURL, useQueryHeaders, useQueryTimeout } from '@ventlio/tanstack-query';
 
 function LoginPage() {
   const { headers, setQueryHeaders } = useQueryHeaders();
-
+  const [authToken, setAuthToken] = useState();
   useEffect(() => {
     // after user has logged in successfully set the authorization header token
-    headers.Authorization = 'Bearer token'; // this will be used for subsequent queries
-    setQueryHeaders(headers);
+    // this should also be done mostly in the layout that contains the authenticated views of the app
+    // for instance in AuthLayout, so that after login in the authToken can still be used to authenticate future request
+    // when user refreshes the page
+    setQueryHeaders({ Authorization: `Bearer ${authToken}` });
   }, []);
 
   return <>{/** codes */}</>;
@@ -133,27 +183,16 @@ The `useGetRequest` hook returns an object with the following properties:
 import { useGetRequest } from '@ventlio/tanstack-query';
 
 const MyComponent = () => {
-  const {
-    data,
-    isLoading,
-    isError,
-    error,
-    updatePath,
-    nextPage,
-    prevPage,
-    get,
-    gotoPage,
-    page,
-    queryKey,
-  } = useGetRequest({
-    path: '/api/mydata',
-    load: true,
-    queryOptions: {
-      staleTime: 10000,
-      refetchOnWindowFocus: false,
-    },
-    keyTracker: 'mydata',
-  });
+  const { data, isLoading, isError, error, updatePath, nextPage, prevPage, get, gotoPage, page, queryKey } =
+    useGetRequest({
+      path: '/api/mydata',
+      load: true,
+      queryOptions: {
+        staleTime: 10000,
+        refetchOnWindowFocus: false,
+      },
+      keyTracker: 'mydata',
+    });
 
   return (
     <div>
@@ -419,8 +458,7 @@ import { useKeyTrackerModel } from '@ventlio/tanstack-query';
 2. Call `useKeyTrackerModel` with a `keyTracker` parameter which is a string that uniquely identifies the query key:
 
 ```javascript
-const { refetchQuery, getQueryKey, queryKey, data } =
-  useKeyTrackerModel < MyDataType > 'myKeyTracker';
+const { refetchQuery, getQueryKey, queryKey, data } = useKeyTrackerModel < MyDataType > 'myKeyTracker';
 ```
 
 3. Invoke `getQueryKey` function to retrieve the query key:
@@ -467,8 +505,7 @@ import { useKeyTrackerModel } from '@ventlio/tanstack-query';
 const MyComponent = () => {
   const queryClient = useQueryClient();
 
-  const { refetchQuery, getQueryKey, queryKey, data } =
-    useKeyTrackerModel < MyDataType > 'myKeyTracker';
+  const { refetchQuery, getQueryKey, queryKey, data } = useKeyTrackerModel < MyDataType > 'myKeyTracker';
 
   const handleClick = async () => {
     // Retrieve the query key

package/dist/index.js

@@ -9,6 +9,7 @@ export { useKeyTrackerModel } from './model/useKeyTrackerModel.js';
 export { useQueryModel } from './model/useQueryModel.js';
 export { useRefetchQuery } from './model/useRefetchQuery.js';
 export { useDeleteRequest } from './queries/useDeleteRequest.js';
+export { useGetInfiniteRequest } from './queries/useGetInfiniteRequest.js';
 export { useGetRequest } from './queries/useGetRequest.js';
 export { usePatchRequest } from './queries/usePatchRequest.js';
 export { usePostRequest } from './queries/usePostRequest.js';

package/dist/index.js.map

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

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import 'url-search-params-polyfill';
-import { useQueryClient, useQuery, useMutation } from '@tanstack/react-query';
+import { useQueryClient, useQuery, useInfiniteQuery, useMutation } from '@tanstack/react-query';
 import result from 'lodash.result';
 import lodashSet from 'lodash.set';
 import { useState, useMemo, useEffect, startTransition } from 'react';
@@ -396,11 +396,12 @@ const useDeleteRequest = (deleteOptions) => {
     const [options, setOptions] = useState();
     const { API_URL, TIMEOUT } = useEnvironmentVariables();
     const { getHeaders } = useQueryHeaders();
-    const sendRequest = async (res, rej) => {
+    const sendRequest = async (res, rej, queryKey) => {
         // get request headers
         const globalHeaders = getHeaders();
+        const [url] = (queryKey ?? []);
         const postResponse = await makeRequest({
-            path: requestPath,
+            path: url ?? requestPath,
             headers: { ...globalHeaders, ...headers },
             method: HttpMethod.DELETE,
             baseURL: baseUrl ?? API_URL,
@@ -413,7 +414,7 @@ const useDeleteRequest = (deleteOptions) => {
             rej(postResponse);
         }
     };
-    const query = useQuery([requestPath, {}], () => new Promise((res, rej) => sendRequest(res, rej)), { enabled: false, ...options });
+    const query = useQuery([requestPath, {}], ({ queryKey }) => new Promise((res, rej) => sendRequest(res, rej, queryKey)), { enabled: false, ...options });
     const updatedPathAsync = async (link) => {
         return updateDeletePath(link);
     };
@@ -431,6 +432,67 @@ const useDeleteRequest = (deleteOptions) => {
     return { destroy, ...query };
 };
 
+const useGetInfiniteRequest = ({ path, load = false, queryOptions, keyTracker, baseUrl, headers, }) => {
+    const { API_URL, TIMEOUT } = useEnvironmentVariables();
+    const { getHeaders } = useQueryHeaders();
+    let queryClient = useQueryClient();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    queryClient = useMemo(() => queryClient, []);
+    const sendRequest = async (res, rej, pageParam) => {
+        if (load) {
+            // get request headers
+            const globalHeaders = getHeaders();
+            const getResponse = await makeRequest({
+                path: pageParam ?? path,
+                headers: { ...globalHeaders, ...headers },
+                baseURL: baseUrl ?? API_URL,
+                timeout: TIMEOUT,
+            });
+            if (getResponse.status) {
+                res(getResponse);
+            }
+            else {
+                rej(getResponse);
+            }
+        }
+        else {
+            res(null);
+        }
+    };
+    const query = useInfiniteQuery([path, {}], ({ pageParam = path }) => new Promise((res, rej) => sendRequest(res, rej, pageParam)), {
+        enabled: load,
+        getNextPageParam: (lastPage, pages) => constructPaginationLink('next_page', lastPage, pages),
+        getPreviousPageParam: (lastPage, pages) => constructPaginationLink('previous_page', lastPage, pages),
+        ...queryOptions,
+    });
+    /**
+     *
+     * This pagination implementation is currently tied to our use case
+     */
+    const constructPaginationLink = (direction, lastPage, pages) => {
+        const [pathname, queryString] = lastPage.split('?');
+        const queryParams = new URLSearchParams(queryString);
+        const lastPageItem = pages[pages.length - 1];
+        queryParams.set('page', String(lastPageItem?.data.pagination[direction]));
+        return pathname + '?' + queryParams.toString();
+    };
+    useEffect(() => {
+        if (keyTracker) {
+            // set expiration time for the tracker
+            queryClient.setQueryDefaults([keyTracker], {
+                cacheTime: Infinity,
+                staleTime: Infinity,
+            });
+            queryClient.setQueryData([keyTracker], [path, {}]);
+        }
+    }, [keyTracker, path, queryClient, queryOptions?.staleTime]);
+    const flattenedData = query.data?.pages.flat() ?? [];
+    return {
+        ...query,
+        flattenedData,
+    };
+};
+
 const useGetRequest = ({ path, load = false, queryOptions, keyTracker, baseUrl, headers, }) => {
     const [requestPath, updatePath] = useState(path);
     const [options, setOptions] = useState(queryOptions);
@@ -440,12 +502,13 @@ const useGetRequest = ({ path, load = false, queryOptions, keyTracker, baseUrl,
     let queryClient = useQueryClient();
     // eslint-disable-next-line react-hooks/exhaustive-deps
     queryClient = useMemo(() => queryClient, []);
-    const sendRequest = async (res, rej) => {
+    const sendRequest = async (res, rej, queryKey) => {
         if (load) {
             // get request headers
             const globalHeaders = getHeaders();
+            const [url] = (queryKey ?? []);
             const getResponse = await makeRequest({
-                path: requestPath,
+                path: url ?? requestPath,
                 headers: { ...globalHeaders, ...headers },
                 baseURL: baseUrl ?? API_URL,
                 timeout: TIMEOUT,
@@ -461,7 +524,7 @@ const useGetRequest = ({ path, load = false, queryOptions, keyTracker, baseUrl,
             res(null);
         }
     };
-    const query = useQuery([requestPath, {}], () => new Promise((res, rej) => sendRequest(res, rej)), {
+    const query = useQuery([requestPath, {}], ({ queryKey }) => new Promise((res, rej) => sendRequest(res, rej, queryKey)), {
         enabled: load,
         ...options,
     });
@@ -624,5 +687,5 @@ const usePostRequest = ({ path, isFormData = false, baseUrl, headers, fileSelect
     return { post, ...mutation };
 };
 
-export { ContentType, HttpMethod, axiosInstance, bootstrapQueryRequest, buildFormData, errorTransformer, getDateInFuture, makeRequest, scrollToTop, successTransformer, useDeleteRequest, useEnvironmentVariables, useGetRequest, useKeyTrackerModel, usePatchRequest, usePostRequest, useQueryConfig, useQueryHeaders, useQueryModel, useReactNativeEnv, useRefetchQuery };
+export { ContentType, HttpMethod, axiosInstance, bootstrapQueryRequest, buildFormData, errorTransformer, getDateInFuture, makeRequest, scrollToTop, successTransformer, useDeleteRequest, useEnvironmentVariables, useGetInfiniteRequest, useGetRequest, useKeyTrackerModel, usePatchRequest, usePostRequest, useQueryConfig, useQueryHeaders, useQueryModel, useReactNativeEnv, useRefetchQuery };
 //# sourceMappingURL=index.mjs.map

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/queries/index.d.ts

@@ -1,5 +1,6 @@
 export * from './queries.interface';
 export * from './useDeleteRequest';
+export * from './useGetInfiniteRequest';
 export * from './useGetRequest';
 export * from './usePatchRequest';
 export * from './usePostRequest';

package/dist/queries/queries.interface.d.ts

@@ -1,4 +1,4 @@
-import type { UseQueryOptions } from '@tanstack/react-query';
+import type { UseInfiniteQueryOptions, UseQueryOptions } from '@tanstack/react-query';
 import type { RawAxiosRequestHeaders } from 'axios';
 import type { IRequestError, IRequestSuccess } from '../request';
 export interface IPagination {
@@ -10,6 +10,7 @@ export interface IPagination {
     total: number;
 }
 export type TanstackQueryOption<TResponse> = UseQueryOptions<IRequestSuccess<TResponse | undefined>, IRequestError, IRequestSuccess<TResponse | undefined>, Array<any>>;
+export type TanstackInfiniteQueryOption<TResponse> = UseInfiniteQueryOptions<IRequestSuccess<TResponse | undefined>, IRequestError, IRequestSuccess<TResponse | undefined>, Array<any>>;
 export interface DefaultRequestOptions {
     baseUrl?: string;
     headers?: RawAxiosRequestHeaders;

package/dist/queries/useDeleteRequest.js

@@ -13,11 +13,12 @@ const useDeleteRequest = (deleteOptions) => {
     const [options, setOptions] = useState();
     const { API_URL, TIMEOUT } = useEnvironmentVariables();
     const { getHeaders } = useQueryHeaders();
-    const sendRequest = async (res, rej) => {
+    const sendRequest = async (res, rej, queryKey) => {
         // get request headers
         const globalHeaders = getHeaders();
+        const [url] = (queryKey ?? []);
         const postResponse = await makeRequest({
-            path: requestPath,
+            path: url ?? requestPath,
             headers: { ...globalHeaders, ...headers },
             method: HttpMethod.DELETE,
             baseURL: baseUrl ?? API_URL,
@@ -30,7 +31,7 @@ const useDeleteRequest = (deleteOptions) => {
             rej(postResponse);
         }
     };
-    const query = useQuery([requestPath, {}], () => new Promise((res, rej) => sendRequest(res, rej)), { enabled: false, ...options });
+    const query = useQuery([requestPath, {}], ({ queryKey }) => new Promise((res, rej) => sendRequest(res, rej, queryKey)), { enabled: false, ...options });
     const updatedPathAsync = async (link) => {
         return updateDeletePath(link);
     };

package/dist/queries/useDeleteRequest.js.map

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

package/dist/queries/useGetInfiniteRequest.d.ts

@@ -0,0 +1,140 @@
+import type { IRequestSuccess } from '../request';
+import type { DefaultRequestOptions, TanstackInfiniteQueryOption } from './queries.interface';
+export declare const useGetInfiniteRequest: <TResponse extends Record<string, any>>({ path, load, queryOptions, keyTracker, baseUrl, headers, }: {
+    path: string;
+    load?: boolean | undefined;
+    queryOptions?: TanstackInfiniteQueryOption<TResponse> | undefined;
+    keyTracker?: string | undefined;
+} & DefaultRequestOptions) => {
+    flattenedData: IRequestSuccess<TResponse>[];
+    data: undefined;
+    error: any;
+    isError: true;
+    isLoading: false;
+    isLoadingError: true;
+    isRefetchError: false;
+    isSuccess: false;
+    status: "error";
+    fetchNextPage: (options?: import("@tanstack/react-query").FetchNextPageOptions | undefined) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<IRequestSuccess<TResponse>, any>>;
+    fetchPreviousPage: (options?: import("@tanstack/react-query").FetchPreviousPageOptions | undefined) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<IRequestSuccess<TResponse>, any>>;
+    hasNextPage?: boolean | undefined;
+    hasPreviousPage?: boolean | undefined;
+    isFetchingNextPage: boolean;
+    isFetchingPreviousPage: boolean;
+    dataUpdatedAt: number;
+    errorUpdatedAt: number;
+    failureCount: number;
+    failureReason: any;
+    errorUpdateCount: number;
+    isFetched: boolean;
+    isFetchedAfterMount: boolean;
+    isFetching: boolean;
+    isInitialLoading: boolean;
+    isPaused: boolean;
+    isPlaceholderData: boolean;
+    isPreviousData: boolean;
+    isRefetching: boolean;
+    isStale: boolean;
+    refetch: <TPageData>(options?: (import("@tanstack/react-query").RefetchOptions & import("@tanstack/react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/react-query").QueryObserverResult<import("@tanstack/react-query").InfiniteData<IRequestSuccess<TResponse>>, any>>;
+    remove: () => void;
+    fetchStatus: import("@tanstack/react-query").FetchStatus;
+} | {
+    flattenedData: IRequestSuccess<TResponse>[];
+    data: undefined;
+    error: null;
+    isError: false;
+    isLoading: true;
+    isLoadingError: false;
+    isRefetchError: false;
+    isSuccess: false;
+    status: "loading";
+    fetchNextPage: (options?: import("@tanstack/react-query").FetchNextPageOptions | undefined) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<IRequestSuccess<TResponse>, any>>;
+    fetchPreviousPage: (options?: import("@tanstack/react-query").FetchPreviousPageOptions | undefined) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<IRequestSuccess<TResponse>, any>>;
+    hasNextPage?: boolean | undefined;
+    hasPreviousPage?: boolean | undefined;
+    isFetchingNextPage: boolean;
+    isFetchingPreviousPage: boolean;
+    dataUpdatedAt: number;
+    errorUpdatedAt: number;
+    failureCount: number;
+    failureReason: any;
+    errorUpdateCount: number;
+    isFetched: boolean;
+    isFetchedAfterMount: boolean;
+    isFetching: boolean;
+    isInitialLoading: boolean;
+    isPaused: boolean;
+    isPlaceholderData: boolean;
+    isPreviousData: boolean;
+    isRefetching: boolean;
+    isStale: boolean;
+    refetch: <TPageData>(options?: (import("@tanstack/react-query").RefetchOptions & import("@tanstack/react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/react-query").QueryObserverResult<import("@tanstack/react-query").InfiniteData<IRequestSuccess<TResponse>>, any>>;
+    remove: () => void;
+    fetchStatus: import("@tanstack/react-query").FetchStatus;
+} | {
+    flattenedData: IRequestSuccess<TResponse>[];
+    data: import("@tanstack/react-query").InfiniteData<IRequestSuccess<TResponse>>;
+    error: any;
+    isError: true;
+    isLoading: false;
+    isLoadingError: false;
+    isRefetchError: true;
+    isSuccess: false;
+    status: "error";
+    fetchNextPage: (options?: import("@tanstack/react-query").FetchNextPageOptions | undefined) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<IRequestSuccess<TResponse>, any>>;
+    fetchPreviousPage: (options?: import("@tanstack/react-query").FetchPreviousPageOptions | undefined) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<IRequestSuccess<TResponse>, any>>;
+    hasNextPage?: boolean | undefined;
+    hasPreviousPage?: boolean | undefined;
+    isFetchingNextPage: boolean;
+    isFetchingPreviousPage: boolean;
+    dataUpdatedAt: number;
+    errorUpdatedAt: number;
+    failureCount: number;
+    failureReason: any;
+    errorUpdateCount: number;
+    isFetched: boolean;
+    isFetchedAfterMount: boolean;
+    isFetching: boolean;
+    isInitialLoading: boolean;
+    isPaused: boolean;
+    isPlaceholderData: boolean;
+    isPreviousData: boolean;
+    isRefetching: boolean;
+    isStale: boolean;
+    refetch: <TPageData>(options?: (import("@tanstack/react-query").RefetchOptions & import("@tanstack/react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/react-query").QueryObserverResult<import("@tanstack/react-query").InfiniteData<IRequestSuccess<TResponse>>, any>>;
+    remove: () => void;
+    fetchStatus: import("@tanstack/react-query").FetchStatus;
+} | {
+    flattenedData: IRequestSuccess<TResponse>[];
+    data: import("@tanstack/react-query").InfiniteData<IRequestSuccess<TResponse>>;
+    error: null;
+    isError: false;
+    isLoading: false;
+    isLoadingError: false;
+    isRefetchError: false;
+    isSuccess: true;
+    status: "success";
+    fetchNextPage: (options?: import("@tanstack/react-query").FetchNextPageOptions | undefined) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<IRequestSuccess<TResponse>, any>>;
+    fetchPreviousPage: (options?: import("@tanstack/react-query").FetchPreviousPageOptions | undefined) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<IRequestSuccess<TResponse>, any>>;
+    hasNextPage?: boolean | undefined;
+    hasPreviousPage?: boolean | undefined;
+    isFetchingNextPage: boolean;
+    isFetchingPreviousPage: boolean;
+    dataUpdatedAt: number;
+    errorUpdatedAt: number;
+    failureCount: number;
+    failureReason: any;
+    errorUpdateCount: number;
+    isFetched: boolean;
+    isFetchedAfterMount: boolean;
+    isFetching: boolean;
+    isInitialLoading: boolean;
+    isPaused: boolean;
+    isPlaceholderData: boolean;
+    isPreviousData: boolean;
+    isRefetching: boolean;
+    isStale: boolean;
+    refetch: <TPageData>(options?: (import("@tanstack/react-query").RefetchOptions & import("@tanstack/react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/react-query").QueryObserverResult<import("@tanstack/react-query").InfiniteData<IRequestSuccess<TResponse>>, any>>;
+    remove: () => void;
+    fetchStatus: import("@tanstack/react-query").FetchStatus;
+};

package/dist/queries/useGetInfiniteRequest.js

@@ -0,0 +1,72 @@
+import { useQueryClient, useInfiniteQuery } from '@tanstack/react-query';
+import { useMemo, useEffect } from 'react';
+import 'url-search-params-polyfill';
+import { useEnvironmentVariables } from '../config/useEnvironmentVariables.js';
+import { useQueryHeaders } from '../config/useQueryHeaders.js';
+import 'axios';
+import { makeRequest } from '../request/make-request.js';
+import '../request/request.enum.js';
+
+const useGetInfiniteRequest = ({ path, load = false, queryOptions, keyTracker, baseUrl, headers, }) => {
+    const { API_URL, TIMEOUT } = useEnvironmentVariables();
+    const { getHeaders } = useQueryHeaders();
+    let queryClient = useQueryClient();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    queryClient = useMemo(() => queryClient, []);
+    const sendRequest = async (res, rej, pageParam) => {
+        if (load) {
+            // get request headers
+            const globalHeaders = getHeaders();
+            const getResponse = await makeRequest({
+                path: pageParam ?? path,
+                headers: { ...globalHeaders, ...headers },
+                baseURL: baseUrl ?? API_URL,
+                timeout: TIMEOUT,
+            });
+            if (getResponse.status) {
+                res(getResponse);
+            }
+            else {
+                rej(getResponse);
+            }
+        }
+        else {
+            res(null);
+        }
+    };
+    const query = useInfiniteQuery([path, {}], ({ pageParam = path }) => new Promise((res, rej) => sendRequest(res, rej, pageParam)), {
+        enabled: load,
+        getNextPageParam: (lastPage, pages) => constructPaginationLink('next_page', lastPage, pages),
+        getPreviousPageParam: (lastPage, pages) => constructPaginationLink('previous_page', lastPage, pages),
+        ...queryOptions,
+    });
+    /**
+     *
+     * This pagination implementation is currently tied to our use case
+     */
+    const constructPaginationLink = (direction, lastPage, pages) => {
+        const [pathname, queryString] = lastPage.split('?');
+        const queryParams = new URLSearchParams(queryString);
+        const lastPageItem = pages[pages.length - 1];
+        queryParams.set('page', String(lastPageItem?.data.pagination[direction]));
+        return pathname + '?' + queryParams.toString();
+    };
+    useEffect(() => {
+        if (keyTracker) {
+            // set expiration time for the tracker
+            queryClient.setQueryDefaults([keyTracker], {
+                cacheTime: Infinity,
+                staleTime: Infinity,
+            });
+            queryClient.setQueryData([keyTracker], [path, {}]);
+        }
+    }, [keyTracker, path, queryClient, queryOptions?.staleTime]);
+    const flattenedData = query.data?.pages.flat() ?? [];
+    return {
+        ...query,
+        flattenedData,
+    };
+};
+
+export { useGetInfiniteRequest };
+//# sourceMappingURL=useGetInfiniteRequest.js.map

package/dist/queries/useGetInfiniteRequest.js.map

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

package/dist/queries/useGetRequest.js

@@ -16,12 +16,13 @@ const useGetRequest = ({ path, load = false, queryOptions, keyTracker, baseUrl,
     let queryClient = useQueryClient();
     // eslint-disable-next-line react-hooks/exhaustive-deps
     queryClient = useMemo(() => queryClient, []);
-    const sendRequest = async (res, rej) => {
+    const sendRequest = async (res, rej, queryKey) => {
         if (load) {
             // get request headers
             const globalHeaders = getHeaders();
+            const [url] = (queryKey ?? []);
             const getResponse = await makeRequest({
-                path: requestPath,
+                path: url ?? requestPath,
                 headers: { ...globalHeaders, ...headers },
                 baseURL: baseUrl ?? API_URL,
                 timeout: TIMEOUT,
@@ -37,7 +38,7 @@ const useGetRequest = ({ path, load = false, queryOptions, keyTracker, baseUrl,
             res(null);
         }
     };
-    const query = useQuery([requestPath, {}], () => new Promise((res, rej) => sendRequest(res, rej)), {
+    const query = useQuery([requestPath, {}], ({ queryKey }) => new Promise((res, rej) => sendRequest(res, rej, queryKey)), {
         enabled: load,
         ...options,
     });

package/dist/queries/useGetRequest.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ventlio/tanstack-query",
-  "version": "0.2.72",
+  "version": "0.2.74",
   "license": "MIT",
   "main": "dist/index.js",
   "contributors": [

package/src/queries/index.ts

@@ -1,5 +1,6 @@
 export * from './queries.interface';
 export * from './useDeleteRequest';
+export * from './useGetInfiniteRequest';
 export * from './useGetRequest';
 export * from './usePatchRequest';
 export * from './usePostRequest';

package/src/queries/queries.interface.ts

@@ -1,4 +1,4 @@
-import type { UseQueryOptions } from '@tanstack/react-query';
+import type { UseInfiniteQueryOptions, UseQueryOptions } from '@tanstack/react-query';
 import type { RawAxiosRequestHeaders } from 'axios';
 import type { IRequestError, IRequestSuccess } from '../request';
 
@@ -18,6 +18,13 @@ export type TanstackQueryOption<TResponse> = UseQueryOptions<
   Array<any>
 >;
 
+export type TanstackInfiniteQueryOption<TResponse> = UseInfiniteQueryOptions<
+  IRequestSuccess<TResponse | undefined>,
+  IRequestError,
+  IRequestSuccess<TResponse | undefined>,
+  Array<any>
+>;
+
 export interface DefaultRequestOptions {
   baseUrl?: string;
   headers?: RawAxiosRequestHeaders;

package/src/queries/useDeleteRequest.ts

@@ -1,4 +1,4 @@
-import type { UseQueryOptions } from '@tanstack/react-query';
+import type { QueryKey, UseQueryOptions } from '@tanstack/react-query';
 import { useQuery } from '@tanstack/react-query';
 import type { RawAxiosRequestHeaders } from 'axios';
 import { useState } from 'react';
@@ -16,12 +16,14 @@ export const useDeleteRequest = <TResponse>(deleteOptions?: DefaultRequestOption
 
   const { getHeaders } = useQueryHeaders();
 
-  const sendRequest = async (res: (value: any) => void, rej: (reason?: any) => void) => {
+  const sendRequest = async (res: (value: any) => void, rej: (reason?: any) => void, queryKey?: QueryKey) => {
     // get request headers
     const globalHeaders: RawAxiosRequestHeaders = getHeaders();
 
+    const [url] = (queryKey ?? []) as string[];
+
     const postResponse = await makeRequest<TResponse>({
-      path: requestPath,
+      path: url ?? requestPath,
       headers: { ...globalHeaders, ...headers },
       method: HttpMethod.DELETE,
       baseURL: baseUrl ?? API_URL,
@@ -37,7 +39,8 @@ export const useDeleteRequest = <TResponse>(deleteOptions?: DefaultRequestOption
 
   const query = useQuery<any, any, IRequestSuccess<TResponse>>(
     [requestPath, {}],
-    () => new Promise<IRequestSuccess<TResponse> | IRequestError>((res, rej) => sendRequest(res, rej)),
+    ({ queryKey }) =>
+      new Promise<IRequestSuccess<TResponse> | IRequestError>((res, rej) => sendRequest(res, rej, queryKey)),
     { enabled: false, ...options }
   );
 

package/src/queries/useGetInfiniteRequest.ts

@@ -0,0 +1,121 @@
+import { useInfiniteQuery, useQueryClient } from '@tanstack/react-query';
+import type { RawAxiosRequestHeaders } from 'axios';
+import { useEffect, useMemo } from 'react';
+import { useEnvironmentVariables, useQueryHeaders } from '../config';
+
+import type { IRequestError, IRequestSuccess } from '../request';
+import { makeRequest } from '../request';
+import type { DefaultRequestOptions, TanstackInfiniteQueryOption } from './queries.interface';
+
+interface Pagination {
+  previous_page: number;
+  current_page: number;
+  next_page: number;
+  size: number;
+  page_count: number;
+  total: number;
+}
+
+export const useGetInfiniteRequest = <TResponse extends Record<string, any>>({
+  path,
+  load = false,
+  queryOptions,
+  keyTracker,
+  baseUrl,
+  headers,
+}: {
+  path: string;
+  load?: boolean;
+  queryOptions?: TanstackInfiniteQueryOption<TResponse>;
+  keyTracker?: string;
+} & DefaultRequestOptions) => {
+  const { API_URL, TIMEOUT } = useEnvironmentVariables();
+  const { getHeaders } = useQueryHeaders();
+
+  let queryClient = useQueryClient();
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  queryClient = useMemo(() => queryClient, []);
+
+  const sendRequest = async (
+    res: (
+      value: IRequestError | IRequestSuccess<TResponse> | PromiseLike<IRequestError | IRequestSuccess<TResponse>>
+    ) => void,
+    rej: (reason?: any) => void,
+    pageParam?: string
+  ) => {
+    if (load) {
+      // get request headers
+      const globalHeaders: RawAxiosRequestHeaders = getHeaders();
+
+      const getResponse = await makeRequest<TResponse>({
+        path: pageParam ?? path,
+        headers: { ...globalHeaders, ...headers },
+        baseURL: baseUrl ?? API_URL,
+        timeout: TIMEOUT,
+      });
+
+      if (getResponse.status) {
+        res(getResponse as IRequestSuccess<TResponse>);
+      } else {
+        rej(getResponse);
+      }
+    } else {
+      res(null as any);
+    }
+  };
+
+  const query = useInfiniteQuery<any, any, IRequestSuccess<TResponse>>(
+    [path, {}],
+    ({ pageParam = path }) =>
+      new Promise<IRequestSuccess<TResponse> | IRequestError>((res, rej) => sendRequest(res, rej, pageParam)),
+    {
+      enabled: load,
+      getNextPageParam: (lastPage, pages) => constructPaginationLink('next_page', lastPage, pages),
+      getPreviousPageParam: (lastPage, pages) => constructPaginationLink('previous_page', lastPage, pages),
+      ...(queryOptions as any),
+    }
+  );
+
+  /**
+   *
+   * This pagination implementation is currently tied to our use case
+   */
+  const constructPaginationLink = (
+    direction: 'next_page' | 'previous_page',
+    lastPage: string,
+    pages: IRequestSuccess<
+      TResponse & {
+        pagination: Pagination;
+      }
+    >[]
+  ) => {
+    const [pathname, queryString] = lastPage.split('?');
+
+    const queryParams = new URLSearchParams(queryString);
+    const lastPageItem = pages[pages.length - 1];
+
+    queryParams.set('page', String(lastPageItem?.data.pagination[direction]));
+
+    return pathname + '?' + queryParams.toString();
+  };
+
+  useEffect(() => {
+    if (keyTracker) {
+      // set expiration time for the tracker
+      queryClient.setQueryDefaults([keyTracker], {
+        cacheTime: Infinity,
+        staleTime: Infinity,
+      });
+
+      queryClient.setQueryData([keyTracker], [path, {}]);
+    }
+  }, [keyTracker, path, queryClient, queryOptions?.staleTime]);
+
+  const flattenedData = query.data?.pages.flat() ?? [];
+
+  return {
+    ...query,
+    flattenedData,
+  };
+};

package/src/queries/useGetRequest.ts

@@ -1,4 +1,4 @@
-import type { UseQueryOptions } from '@tanstack/react-query';
+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';
@@ -37,14 +37,17 @@ export const useGetRequest = <TResponse extends Record<string, any>>({
     res: (
       value: IRequestError | IRequestSuccess<TResponse> | PromiseLike<IRequestError | IRequestSuccess<TResponse>>
     ) => void,
-    rej: (reason?: any) => void
+    rej: (reason?: any) => void,
+    queryKey?: QueryKey
   ) => {
     if (load) {
       // get request headers
       const globalHeaders: RawAxiosRequestHeaders = getHeaders();
 
+      const [url] = (queryKey ?? []) as string[];
+
       const getResponse = await makeRequest<TResponse>({
-        path: requestPath,
+        path: url ?? requestPath,
         headers: { ...globalHeaders, ...headers },
         baseURL: baseUrl ?? API_URL,
         timeout: TIMEOUT,
@@ -62,7 +65,8 @@ export const useGetRequest = <TResponse extends Record<string, any>>({
 
   const query = useQuery<any, any, IRequestSuccess<TResponse>>(
     [requestPath, {}],
-    () => new Promise<IRequestSuccess<TResponse> | IRequestError>((res, rej) => sendRequest(res, rej)),
+    ({ queryKey }) =>
+      new Promise<IRequestSuccess<TResponse> | IRequestError>((res, rej) => sendRequest(res, rej, queryKey)),
     {
       enabled: load,
       ...options,