@ventlio/tanstack-query 0.2.73 → 0.2.74

package/README.md

@@ -18,9 +18,11 @@ But we were not discouraged. So, we set out to find a solution which led to the
 - [✅] Requests context implementations
 - [✅] Post, Get, Patch Requests
 - [✅] Query key tracker to track dynamic query and help fetch query cache from any page
-- [Not Completed] Persistent queries implementation
+- [✅] 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
@@ -299,10 +301,11 @@ import { usePatchRequest } from '@ventlio/tanstack-query';
 
 function App() {
   const { patch, isLoading, isError, isSuccess, data } =
-    usePatchRequest<User>(
+    usePatchRequest <
+    User >
     {
       path: '/users/1',
-    });
+    };
 
   const updateUser = async (user: User) => {
     await patch(user);

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.73",
+  "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,