@ainias42/tanstack-ids 0.0.1 → 0.0.3

package/src/QueryContext/useQueriesIsFetching.ts

@@ -4,5 +4,5 @@ import { useQueriesStore } from '@/QueryContext/useQueriesStore';
 
 export function useQueriesIsFetching(contextId?: number) {
     const context = useContext(QueriesContext);
-    return useQueriesStore(s => s.isFetching(contextId ?? context));
+    return useQueriesStore((s) => s.isFetching(contextId ?? context));
 }

package/src/QueryContext/useQueriesReload.ts

@@ -5,7 +5,7 @@ import { useQueryClient } from '@tanstack/react-query';
 
 export function useQueriesReload(contextId?: number) {
     const context = useContext(QueriesContext);
-    const reloadContext = useQueriesStore(s => s.reload);
+    const reloadContext = useQueriesStore((s) => s.reload);
     const queryClient = useQueryClient();
 
     return useCallback(async () => {

package/src/QueryContext/useQueriesStore.ts

@@ -21,14 +21,14 @@ function initialState() {
                 items: URecord<number, QueryItem>;
             }
         >,
-        subContexts: {} as URecord<number, number[]>
+        subContexts: {} as URecord<number, number[]>,
     };
 }
 
 export type QueriesStoreState = ReturnType<typeof actionsGenerator> & ReturnType<typeof initialState>;
 type SetState = (
     newState: Partial<QueriesStoreState> | QueriesStoreState | ((state: QueriesStoreState) => QueriesStoreState | void),
-    replace?: boolean
+    replace?: boolean,
 ) => void;
 type GetState = () => Readonly<QueriesStoreState>;
 const actionsGenerator = (set: SetState, get: GetState) => ({
@@ -38,11 +38,11 @@ const actionsGenerator = (set: SetState, get: GetState) => ({
     },
     generateContextId() {
         let id = 0;
-        set(state => {
+        set((state) => {
             state.lastContextId++;
             state.contexts[state.lastContextId] = {
                 lastId: 0,
-                items: {}
+                items: {},
             };
             id = state.lastContextId;
         });
@@ -50,7 +50,7 @@ const actionsGenerator = (set: SetState, get: GetState) => ({
     },
     setItem(contextId: number, itemId: number | undefined, item: QueryItem) {
         let id = itemId;
-        set(state => {
+        set((state) => {
             const contextData = state.contexts[contextId];
             if (!contextData) {
                 return;
@@ -68,34 +68,34 @@ const actionsGenerator = (set: SetState, get: GetState) => ({
         if (!itemId) {
             return;
         }
-        set(state => {
+        set((state) => {
             delete state.contexts[contextId]?.items[itemId];
         });
     },
     isFetching(contextId: number): boolean {
         const state = get();
         return (
-            ObjectHelper.values(state.contexts[contextId]?.items ?? {}).some(item => item.isFetching) ||
-            (state.subContexts[contextId]?.some(id => state.isFetching(id)) ?? false)
+            ObjectHelper.values(state.contexts[contextId]?.items ?? {}).some((item) => item.isFetching) ||
+            (state.subContexts[contextId]?.some((id) => state.isFetching(id)) ?? false)
         );
     },
     isFetchingByScope(contextId: number, scope: { global: boolean; subContexts: boolean }): boolean {
         const state = get();
         return (
             ((scope.global &&
-                ObjectHelper.values(state.contexts[contextId]?.items ?? {}).some(item => item.isFetching)) ||
-                (scope.subContexts && state.subContexts[contextId]?.some(id => state.isFetching(id)))) ??
+                ObjectHelper.values(state.contexts[contextId]?.items ?? {}).some((item) => item.isFetching)) ||
+                (scope.subContexts && state.subContexts[contextId]?.some((id) => state.isFetching(id)))) ??
             false
         );
     },
     getError(contextId: number): any {
         const state = get();
 
-        const error = ObjectHelper.values(state.contexts[contextId]?.items ?? {}).find(item => item.error)?.error;
+        const error = ObjectHelper.values(state.contexts[contextId]?.items ?? {}).find((item) => item.error)?.error;
         if (error) {
             return error;
         }
-        const subContextWithError = state.subContexts[contextId]?.find(childId => state.getError(childId));
+        const subContextWithError = state.subContexts[contextId]?.find((childId) => state.getError(childId));
         if (subContextWithError) {
             return state.getError(subContextWithError);
         }
@@ -104,7 +104,7 @@ const actionsGenerator = (set: SetState, get: GetState) => ({
     getAllKeys(contextId: number): Set<string> {
         const state = get();
 
-        const keys = new Set(ObjectHelper.values(state.contexts[contextId]?.items ?? {}).flatMap(item => item.keys));
+        const keys = new Set(ObjectHelper.values(state.contexts[contextId]?.items ?? {}).flatMap((item) => item.keys));
 
         const subContext = state.subContexts[contextId];
         if (subContext) {
@@ -123,28 +123,28 @@ const actionsGenerator = (set: SetState, get: GetState) => ({
 
         const keys = state.getAllKeys(contextId);
         return queryClient.refetchQueries({
-            predicate: query => keys.has(query.queryHash)
+            predicate: (query) => keys.has(query.queryHash),
         });
     },
     addSubContext(parent: number, child: number) {
-        set(state => {
+        set((state) => {
             const newChildren = state.subContexts[parent] ?? [];
             newChildren.push(child);
             state.subContexts[parent] = newChildren;
         });
     },
     removeSubContext(parent: number, child: number) {
-        set(state => {
-            state.subContexts[parent] = state.subContexts[parent]?.filter(id => id !== child);
+        set((state) => {
+            state.subContexts[parent] = state.subContexts[parent]?.filter((id) => id !== child);
         });
-    }
+    },
 });
 
 export const useQueriesStore = create<QueriesStoreState>()(
     subscribeWithSelector(
         immer((set, get) => ({
             ...initialState(),
-            ...actionsGenerator(set, get)
-        }))
-    )
+            ...actionsGenerator(set, get),
+        })),
+    ),
 );

package/src/QueryContext/useQuerySubscribeToReload.ts

@@ -1,23 +1,24 @@
 import { QueriesContext } from '@/QueryContext/QueriesContext';
-import { useContext, useLayoutEffect, useRef } from 'react';
+import { useClientLayoutEffect } from '@ainias42/react-bootstrap-mobile';
+import { useContext, useRef } from 'react';
 import { useQueriesStore } from '@/QueryContext/useQueriesStore';
 
 export function useQueriesSubscribeToReload(keys: string[], isFetching: boolean, error: any) {
     const contextId = useContext(QueriesContext);
-    const setItem = useQueriesStore(s => s.setItem);
-    const removeItem = useQueriesStore(s => s.removeItem);
+    const setItem = useQueriesStore((s) => s.setItem);
+    const removeItem = useQueriesStore((s) => s.removeItem);
     const id = useRef<number | undefined>();
 
-    useLayoutEffect(() => {
+    useClientLayoutEffect(() => {
         id.current = setItem(contextId, id.current, {
             keys,
             error,
-            isFetching
+            isFetching,
         });
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [contextId, error, isFetching, setItem, ...keys]);
 
-    useLayoutEffect(() => {
+    useClientLayoutEffect(() => {
         return () => removeItem(contextId, id.current);
     }, [contextId, removeItem]);
 }

package/src/QueryContext/useScopedQueriesIsFetching.ts

@@ -5,5 +5,5 @@ import { useQueriesStore } from '@/QueryContext/useQueriesStore';
 export function useScopedQueriesIsFetching(scope: { global: boolean; subContexts: boolean }, contextId?: number) {
     const context = useContext(QueriesContext);
 
-    return useQueriesStore(s => s.isFetchingByScope(contextId ?? context, scope));
+    return useQueriesStore((s) => s.isFetchingByScope(contextId ?? context, scope));
 }

package/src/generateIdsQuery.ts

@@ -3,39 +3,39 @@ import { NotFoundError } from '@/NotFoundError';
 import { create, windowScheduler } from '@yornaath/batshit';
 import { createInfiniteQuery, createQuery } from 'react-query-kit';
 import { generateQuery } from '@/generateQuery';
-import { hashKey, useQueries } from '@tanstack/react-query';
+import { hashKey, useQueries, useQueryClient } from '@tanstack/react-query';
 import { hoistReactQueryKitAttributes } from '@/hoistReactQueryKitAttributes';
 import { useIndexedData } from '@/hooks/useIndexedData';
 import { useMemo, useRef } from 'react';
 import { useQueriesSubscribeToReload } from '@/QueryContext/useQuerySubscribeToReload';
-import type { CreateInfiniteQueryOptions, CreateQueryOptions } from 'react-query-kit';
+import type { Awaitable, Override, URecord } from '@ainias42/js-helper';
+import type { CreateInfiniteQueryOptions, CreateQueryOptions, QueryHookOptions } from 'react-query-kit';
 import type { QueriesResults } from '@tanstack/react-query/build/legacy/useQueries';
 import type { QueryClient, QueryFunctionContext, UseQueryOptions, UseQueryResult } from '@tanstack/react-query';
-import type { URecord } from '@ainias42/js-helper';
 
 export type Unpacked<T> = T extends (infer U)[] ? U : T;
 
 type DeepPartial<T> = T extends object
     ? {
-        [P in keyof T]?: DeepPartial<T[P]>;
-    }
+          [P in keyof T]?: DeepPartial<T[P]>;
+      }
     : T;
 
 export function generateIdsQuery<
     IdType extends number | string | symbol,
     Type extends {
         id: IdType;
-    }
+    },
 >(
     key: string,
     fetcher: (ids: IdType[]) => Promise<Type[]> | Type[],
     additionalQueryOptions?: Omit<CreateQueryOptions<Type, [IdType]>, 'queryKey' | 'fetcher'> & {
         schedulerTime?: number;
-    }
+    },
 ) {
     const batch = create<URecord<IdType, Type>[], IdType, Type>({
-        fetcher: async ids => {
-            return [ArrayHelper.arrayToObject(await fetcher(ids), value => value.id)];
+        fetcher: async (ids) => {
+            return [ArrayHelper.arrayToObject(await fetcher(ids), (value) => value.id)];
         },
         resolver: ([items], id) => {
             const item = items?.[id];
@@ -44,13 +44,13 @@ export function generateIdsQuery<
             }
             return item;
         },
-        scheduler: windowScheduler(additionalQueryOptions?.schedulerTime ?? 15)
+        scheduler: windowScheduler(additionalQueryOptions?.schedulerTime ?? 15),
     });
 
     const useQueryHook = createQuery<Type, [IdType]>({
         queryKey: [key],
-        fetcher: identifier => batch.fetch(identifier[0]),
-        ...additionalQueryOptions
+        fetcher: (identifier) => batch.fetch(identifier[0]),
+        ...additionalQueryOptions,
     });
 
     function useManyHook(
@@ -58,16 +58,16 @@ export function generateIdsQuery<
         otherAdditionalQueryOptions: Omit<
             UseQueryOptions<Type, unknown, Type, [string, [IdType]]>,
             'context' | 'fetcher' | 'queryKey'
-        > & { reloadWithContext?: boolean } = {}
+        > & { reloadWithContext?: boolean } = {},
     ) {
-        const queries = ids.map(id => ({
+        const queries = ids.map((id) => ({
             ...useQueryHook.getOptions([id]),
-            ...otherAdditionalQueryOptions
+            ...otherAdditionalQueryOptions,
         }));
 
         const results = useQueries<Type[], QueriesResults<Type[]>>({
             // @ts-expect-error wrong type in tanstack-query
-            queries
+            queries,
         }) as UseQueryResult<Type, Error>[];
 
         const oldData = useRef<typeof results>([]);
@@ -84,24 +84,32 @@ export function generateIdsQuery<
         }
 
         const shouldReload = otherAdditionalQueryOptions.reloadWithContext ?? true;
-        const keys = shouldReload ? ids.map(id => hashKey(useQueryHook.getKey([id as DeepPartial<IdType>]))) : [];
+        const keys = shouldReload ? ids.map((id) => hashKey(useQueryHook.getKey([id as DeepPartial<IdType>]))) : [];
 
         // eslint-disable-next-line react-hooks/exhaustive-deps
-        const isFetching = useMemo(() => oldData.current.some(item => item.isFetching), [oldData.current]);
+        const isFetching = useMemo(() => oldData.current.some((item) => item.isFetching), [oldData.current]);
         // eslint-disable-next-line react-hooks/exhaustive-deps
-        const error = useMemo(() => oldData.current.find(item => item.error)?.error, [oldData.current]);
+        const error = useMemo(() => oldData.current.find((item) => item.error)?.error, [oldData.current]);
 
         useQueriesSubscribeToReload(keys, isFetching, error);
 
         return returnData.current;
     }
 
-    function useOneHook(identifier: IdType) {
-        const result = useQueryHook({variables: [identifier]});
+    function useOneHook(
+        identifier: IdType,
+        otherAdditionalQueryOptions: Omit<
+            QueryHookOptions<Type, unknown, Type, [IdType]>,
+            'context' | 'fetcher' | 'queryKey' | 'variables'
+        > & { reloadWithContext?: boolean } = {},
+    ) {
+        const result = useQueryHook({ ...otherAdditionalQueryOptions, variables: [identifier] });
+
+        const shouldReload = otherAdditionalQueryOptions.reloadWithContext ?? true;
         useQueriesSubscribeToReload(
-            [hashKey(useQueryHook.getKey([identifier as DeepPartial<IdType>]))],
+            shouldReload ? [hashKey(useQueryHook.getKey([identifier as DeepPartial<IdType>]))] : [],
             result.isFetching,
-            result.error
+            result.error,
         );
         return result;
     }
@@ -111,29 +119,45 @@ export function generateIdsQuery<
         FuncArguments extends Parameters<Func>['length'] extends 0
             ? void
             : Parameters<Func> = Parameters<Func>['length'] extends 0 ? void : Parameters<Func>,
-        ResultAsArray extends boolean = false
+        ResultAsArray extends boolean = false,
     >(
-        queryClient: QueryClient,
         filterFunc: Func,
         additionalOptions?: Omit<CreateQueryOptions<IdType[], [FuncArguments]>, 'queryKey' | 'fetcher'> & {
             resultAsArray?: ResultAsArray;
             subKey?: string;
-        }
+        },
     ) {
+        let queryClient: QueryClient | undefined;
+
+        function getQueryClient() {
+            if (!queryClient) {
+                throw new Error('QueryClient not set');
+            }
+            return queryClient;
+        }
+
         const queryHook = generateQuery(
             `${key}-filter${additionalOptions?.subKey ? `-${additionalOptions.subKey}` : ''}`,
             async (filter: FuncArguments) => {
                 const result = await filterFunc(filter);
-                return result.map(item => {
-                    queryClient.setQueryData(useQueryHook.getKey([item.id as DeepPartial<IdType>]), item);
+                return result.map((item) => {
+                    getQueryClient().setQueryData(useQueryHook.getKey([item.id as DeepPartial<IdType>]), item);
                     return item.id;
                 });
             },
             {
                 initialDataUpdatedAt: 0,
                 ...additionalOptions,
-                initialData: (additionalOptions?.initialData as IdType[]) ?? []
-            }
+                initialData: (additionalOptions?.initialData as IdType[]) ?? [],
+                use: [
+                    function myTestMiddleware(useQueryNext) {
+                        return (options2, currentQueryClient) => {
+                            queryClient = useQueryClient(currentQueryClient);
+                            return useQueryNext(options2, queryClient);
+                        };
+                    },
+                ],
+            },
         );
 
         type QueryHookArgument = Parameters<typeof queryHook>[0];
@@ -142,12 +166,12 @@ export function generateIdsQuery<
         function useFilter<Args extends HookArgs>(
             ...args: Args
         ): ResultAsArray extends true ? UseQueryResult<Type, Error>[] : URecord<IdType, UseQueryResult<Type, Error>> {
-            const result = queryHook({variables: args} as QueryHookArgument);
+            const result = queryHook({ variables: args } as QueryHookArgument);
 
             useQueriesSubscribeToReload(
                 [hashKey(queryHook.getKey(args as Parameters<(typeof queryHook)['getKey']>[0]))],
                 result.isFetching,
-                result.error
+                result.error,
             );
 
             // When staleTime is same as filterStaleTime, then the queries will run at the same time as the filter
@@ -155,10 +179,10 @@ export function generateIdsQuery<
             // filter will be saved inside the queryClient, so the queries will be updated with the new data.
             // Same goes for reloading with context.
             // Other usages of useManyHook are not affected by this.
-            const indexedResult = useManyHook(result.data, {staleTime: Infinity, reloadWithContext: false});
+            const indexedResult = useManyHook(result.data, { staleTime: Infinity, reloadWithContext: false });
             const arrayResult: UseQueryResult<Type, Error>[] = useMemo(
-                () => ArrayHelper.noUndefined(result.data.map(id => indexedResult[id])),
-                [indexedResult, result.data]
+                () => ArrayHelper.noUndefined(result.data.map((id) => indexedResult[id])),
+                [indexedResult, result.data],
             );
 
             if (additionalOptions?.resultAsArray) {
@@ -169,118 +193,212 @@ export function generateIdsQuery<
             return indexedResult as ResultAsArray extends true
                 ? UseQueryResult<Type, Error>[]
                 : URecord<IdType, UseQueryResult<Type, Error>>;
-
         }
 
         return hoistReactQueryKitAttributes(queryHook, useFilter);
     }
 
-    function generateInfiniteQuery<PageParams, FuncArguments extends any[]>(
-        queryClient: QueryClient,
-        {
-            queryFn,
-            ...options
-        }: Omit<
-            CreateInfiniteQueryOptions<IdType[], FuncArguments, Error, PageParams>,
-            'getNextPageParam' | 'getPreviousPageParam' | 'queryKey' | 'fetcher'
-        > & {
-            queryFn: (
-                pageParams: PageParams,
-                args: FuncArguments,
-                context: QueryFunctionContext<[string, FuncArguments], PageParams>
-            ) => Promise<Type[]> | Type[];
-            getNextPageParam: (options: {
-                getLastPage: () => Type[];
-                getAllPages: () => Type[][];
-                lastPageParam: PageParams;
-                allPageParams: PageParams[];
-                lastPageLength: number;
-            }) => PageParams | undefined;
-            getPreviousPageParam?: (options: {
-                getFirstPage: () => Type[];
-                getAllPages: () => Type[][];
-                firstPageParam: PageParams;
-                allPageParams: PageParams[];
-                firstPageLength: number;
-            }) => PageParams | undefined;
+    function generateInfiniteQuery<PageParams, Meta, FuncArguments extends any[] = []>({
+        queryFn,
+        ...options
+    }: Omit<
+        CreateInfiniteQueryOptions<{ data: IdType[]; meta: Meta }, FuncArguments, Error, PageParams>,
+        'getNextPageParam' | 'getPreviousPageParam' | 'queryKey' | 'fetcher'
+    > & {
+        queryFn: (
+            pageParams: PageParams,
+            args: FuncArguments,
+            context: QueryFunctionContext<[string, FuncArguments], PageParams>,
+        ) => Awaitable<{ data: Type[]; meta: Meta }>;
+        getNextPageParam: (options: {
+            getLastPage: () => Type[];
+            getAllPages: () => Type[][];
+            lastPageParam: PageParams;
+            allPageParams: PageParams[];
+            lastPageLength: number;
+            lastPageMeta: Meta;
+        }) => PageParams | undefined;
+        getPreviousPageParam?: (options: {
+            getFirstPage: () => Type[];
+            getAllPages: () => Type[][];
+            firstPageParam: PageParams;
+            allPageParams: PageParams[];
+            firstPageLength: number;
+            firstPageMeta: Meta;
+        }) => PageParams | undefined;
+    }) {
+        let queryClient: QueryClient | undefined;
+
+        function getQueryClient() {
+            if (!queryClient) {
+                throw new Error('QueryClient not set');
+            }
+            return queryClient;
         }
-    ) {
+
         function findEntity(id: IdType) {
-            return queryClient.getQueryData(useQueryHook.getKey([id as DeepPartial<IdType>])) as Type | undefined;
+            return getQueryClient().getQueryData(useQueryHook.getKey([id as DeepPartial<IdType>])) as Type | undefined;
         }
 
-        const {getPreviousPageParam} = options;
-        const infiniteQueryHook = createInfiniteQuery<IdType[], FuncArguments, Error, PageParams>({
+        const { getPreviousPageParam } = options;
+        const infiniteQueryHook = createInfiniteQuery<
+            {
+                data: IdType[];
+                meta: Meta;
+            },
+            FuncArguments,
+            Error,
+            PageParams
+        >({
             ...options,
+            use: [
+                function myTestMiddleware(useQueryNext) {
+                    return (options2, currentQueryClient) => {
+                        queryClient = useQueryClient(currentQueryClient);
+                        return useQueryNext(options2, queryClient);
+                    };
+                },
+            ],
             queryKey: [`${key}-infinite-query`],
             fetcher: async (_, ctx) => {
                 const context = ctx as typeof ctx & { pageParam: PageParams };
                 const result = await queryFn(
                     context.pageParam,
                     context.queryKey[1] as FuncArguments,
-                    context as QueryFunctionContext<[string, FuncArguments], PageParams>
+                    context as QueryFunctionContext<[string, FuncArguments], PageParams>,
                 );
-                return result.map(item => {
-                    queryClient.setQueryData(useQueryHook.getKey([item.id as DeepPartial<IdType>]), item);
-                    return item.id;
-                });
+                return {
+                    meta: result.meta,
+                    data: result.data.map((item) => {
+                        getQueryClient().setQueryData(useQueryHook.getKey([item.id as DeepPartial<IdType>]), item);
+                        return item.id;
+                    }),
+                };
             },
-            getNextPageParam: (lastPage: IdType[], allPages: IdType[][], lastPageParam, allPageParams) => {
+            getNextPageParam: (
+                lastPage: { meta: Meta; data: IdType[] },
+                allPages: {
+                    meta: Meta;
+                    data: IdType[];
+                }[],
+                lastPageParam,
+                allPageParams,
+            ) => {
                 return options.getNextPageParam({
-                    getLastPage: () => ArrayHelper.noUndefined(lastPage.map(findEntity)),
-                    getAllPages: () => allPages.map(page => ArrayHelper.noUndefined(page.map(findEntity))),
+                    lastPageMeta: lastPage.meta,
+                    getLastPage: () => ArrayHelper.noUndefined(lastPage.data.map(findEntity)),
+                    getAllPages: () => allPages.map((page) => ArrayHelper.noUndefined(page.data.map(findEntity))),
                     lastPageParam,
                     allPageParams,
-                    lastPageLength: lastPage.length
+                    lastPageLength: lastPage.data.length,
                 });
             },
             getPreviousPageParam: !getPreviousPageParam
                 ? undefined
                 : (firstPage, allPages, firstPageParam, allPageParams) => {
-                    return getPreviousPageParam({
-                        getFirstPage: () => ArrayHelper.noUndefined(firstPage.map(findEntity)),
-                        getAllPages: () => allPages.map(page => ArrayHelper.noUndefined(page.map(findEntity))),
-                        firstPageParam,
-                        allPageParams,
-                        firstPageLength: firstPage.length
-                    });
-                }
+                      return getPreviousPageParam({
+                          firstPageMeta: firstPage.meta,
+                          getFirstPage: () => ArrayHelper.noUndefined(firstPage.data.map(findEntity)),
+                          getAllPages: () => allPages.map((page) => ArrayHelper.noUndefined(page.data.map(findEntity))),
+                          firstPageParam,
+                          allPageParams,
+                          firstPageLength: firstPage.data.length,
+                      });
+                  },
         });
 
-        function useInfiniteQuery(...args: FuncArguments) {
-            const result = infiniteQueryHook({variables: args});
+        type HookOptions = Override<
+            Parameters<typeof infiniteQueryHook>[0] & {
+                select?: undefined;
+            },
+            {
+                initialData?: {
+                    pages: { data: Type[]; meta: Meta }[];
+                    pageParams: PageParams[];
+                };
+            }
+        >;
+
+        type InfiniteQueryArgs = FuncArguments extends
+            | {
+                  length: 0;
+              }
+            | symbol
+            | undefined
+            ? [HookOptions] | []
+            : [HookOptions];
+
+        function useInfiniteQuery(...args: InfiniteQueryArgs) {
+            const infiniteQueryClient = useQueryClient();
+
+            let infiniteOptions: Parameters<typeof infiniteQueryHook>[0] & {
+                select?: undefined;
+            };
+            if (args.length === 1 && 'initialData' in args[0] && args[0].initialData) {
+                const { initialData } = args[0];
+                infiniteOptions = {
+                    ...args[0],
+                    initialData: {
+                        pages: initialData.pages.map((page) => ({
+                            ...page,
+                            data: page.data.map((item) => {
+                                infiniteQueryClient.setQueryData(
+                                    useQueryHook.getKey([item.id as DeepPartial<IdType>]),
+                                    item,
+                                );
+                                return item.id;
+                            }),
+                        })),
+                        pageParams: initialData.pageParams,
+                    },
+                } as Parameters<typeof infiniteQueryHook>[0] & {
+                    select?: undefined;
+                };
+            } else {
+                infiniteOptions =
+                    (args[0] as Parameters<typeof infiniteQueryHook>[0] & {
+                        select?: undefined;
+                    }) ?? {};
+            }
+            const result = infiniteQueryHook(infiniteOptions);
             useQueriesSubscribeToReload(
-                [hashKey(infiniteQueryHook.getKey(args as Parameters<(typeof infiniteQueryHook)['getKey']>[0]))],
+                [
+                    hashKey(
+                        infiniteQueryHook.getKey(
+                            infiniteOptions.variables as Parameters<(typeof infiniteQueryHook)['getKey']>[0],
+                        ),
+                    ),
+                ],
                 result.isFetching,
-                result.error
+                result.error,
             );
-            const ids = useMemo(() => result.data?.pages.flat() ?? [], [result.data?.pages]);
+            const ids = useMemo(() => result.data?.pages.flatMap((page) => page.data) ?? [], [result.data?.pages]);
 
             // When staleTime is same as filterStaleTime, then the queries will run at the same time as the filter
             // Because of this, use staleTime: Inifinity to prevent the queries from running again. The result of the
             // filter will be saved inside the queryClient, so the queries will be updated with the new data.
             // Same goes for reloading with context.
             // Other usages of useManyHook are not affected by this.
-            const manyData = useManyHook(ids, {staleTime: Infinity, reloadWithContext: false});
+            const manyData = useManyHook(ids, { staleTime: Infinity, reloadWithContext: false });
             const indexedData = useIndexedData(manyData);
 
             const pages = useMemo(() => {
                 return result.data
-                    ? result.data.pages.map(page => ArrayHelper.noUndefined(page.map(id => indexedData[id])))
+                    ? result.data.pages.map((page) => ArrayHelper.noUndefined(page.data.map((id) => indexedData[id])))
                     : [];
             }, [indexedData, result.data]);
 
             return {
                 ...result,
-                data: !result.data ? undefined : {...result.data, pages}
+                data: !result.data ? undefined : { ...result.data, pages },
             };
         }
 
-        // @ts-expect-error type is okay
+        // @ts-expect-error wrong type in tanstack-query
         return hoistReactQueryKitAttributes(infiniteQueryHook, useInfiniteQuery);
     }
 
     const useMany = hoistReactQueryKitAttributes(useQueryHook, useManyHook);
     const useOne = hoistReactQueryKitAttributes(useQueryHook, useOneHook);
-    return {useMany, useOne, generateFilter, generateInfiniteQuery};
+    return { useMany, useOne, generateFilter, generateInfiniteQuery };
 }