@ainias42/tanstack-ids 0.0.1 → 0.0.2

package/src/generateIdsQuery.ts

@@ -3,15 +3,15 @@ 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;
 
@@ -96,10 +96,15 @@ export function generateIdsQuery<
         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
         );
@@ -175,26 +180,26 @@ export function generateIdsQuery<
         return hoistReactQueryKitAttributes(queryHook, useFilter);
     }
 
-    function generateInfiniteQuery<PageParams, FuncArguments extends any[]>(
-        queryClient: QueryClient,
+    function generateInfiniteQuery<PageParams, Meta, FuncArguments extends any[] = []>(
         {
             queryFn,
             ...options
         }: Omit<
-            CreateInfiniteQueryOptions<IdType[], FuncArguments, Error, PageParams>,
+            CreateInfiniteQueryOptions<{ data: IdType[], meta: Meta }, FuncArguments, Error, PageParams>,
             'getNextPageParam' | 'getPreviousPageParam' | 'queryKey' | 'fetcher'
         > & {
             queryFn: (
                 pageParams: PageParams,
                 args: FuncArguments,
                 context: QueryFunctionContext<[string, FuncArguments], PageParams>
-            ) => Promise<Type[]> | Type[];
+            ) => 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[];
@@ -202,16 +207,35 @@ export function generateIdsQuery<
                 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 infiniteQueryHook = createInfiniteQuery<{
+            data: IdType[],
+            meta: Meta
+        }, FuncArguments, Error, PageParams>({
             ...options,
+            use: [function myTestMiddleware(useQueryNext) {
+                return (options, currentQueryClient) => {
+                    queryClient = useQueryClient(currentQueryClient);
+                    return useQueryNext(options, queryClient);
+                };
+            }],
             queryKey: [`${key}-infinite-query`],
             fetcher: async (_, ctx) => {
                 const context = ctx as typeof ctx & { pageParam: PageParams };
@@ -220,41 +244,90 @@ export function generateIdsQuery<
                     context.queryKey[1] as FuncArguments,
                     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))),
+                        firstPageMeta: firstPage.meta,
+                        getFirstPage: () => ArrayHelper.noUndefined(firstPage.data.map(findEntity)),
+                        getAllPages: () => allPages.map(page => ArrayHelper.noUndefined(page.data.map(findEntity))),
                         firstPageParam,
                         allPageParams,
-                        firstPageLength: firstPage.length
+                        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
             );
-            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
@@ -266,7 +339,7 @@ export function generateIdsQuery<
 
             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]);
 
@@ -276,7 +349,7 @@ export function generateIdsQuery<
             };
         }
 
-        // @ts-expect-error type is okay
+        // @ts-expect-error wrong type in tanstack-query
         return hoistReactQueryKitAttributes(infiniteQueryHook, useInfiniteQuery);
     }
 

package/src/hooks/formatInitialPage.ts

@@ -0,0 +1,12 @@
+export function formatInitialPage<Type>(data?: Type, pageParam: any = 1) {
+    if (data) {
+        return {
+            initialData: {
+                pages: [data],
+                pageParams: [pageParam]
+            },
+            initialDataUpdatedAt: Date.now(),
+        };
+    }
+    return {};
+}

package/src/index.ts

@@ -4,6 +4,7 @@ export * from './generateQuery';
 export * from './hoistReactQueryKitAttributes';
 export * from './noop';
 export * from './NotFoundError';
+export * from './hooks/formatInitialPage';
 export * from './hooks/useArrayData';
 export * from './hooks/useIndexedData';
 export * from './QueryContext/QueriesContext';