// useAutoInfiniteQuery.ts
const getEntities = async <T>(
requestExtendedOptions: RequestExtendedOptions
): Promise<T> => {
return request<Record<string, T>>(requestExtendedOptions).then(
(result) => Object.values(result)[0]
);
};
const useAutoInfiniteQuery = <T extends Record<string, unknown>>(
infiniteQueryOptions: UseInfiniteQueryOptions<T[]>,
requestExtendedOptions: RequestExtendedOptions
): UseInfiniteQueryResult<T[]> => {
const query = useInfiniteQuery<T[]>({
retry: (_, error) => {
if (error === 'Size too big') {
// do something to reduce first
}
return true;
},
queryFn: ({ pageParam }) =>
getEntities<T[]>({
...requestExtendedOptions,
variables: {
...requestExtendedOptions.variables,
...pageParam,
},
}),
getNextPageParam: (lastPage, pages) =>
lastPage.length >=
(requestExtendedOptions.variables?.first)
? { id: pages.at(-1)?.at(-1)?.id }
: undefined,
...infiniteQueryOptions,
});
useEffect(() => {
if (!query.isFetchingNextPage && query.hasNextPage) query.fetchNextPage();
}, [query]);
return query;
};
// useGetEntities.ts
const query = useAutoInfiniteQuery<Entities>(
{ queryKey: [`getEntitiesQuery`] },
{
url: 'https://myurl',
document: myQuery,
variables: { ... },
}
);
// useAutoInfiniteQuery.ts
const getEntities = async <T>(
requestExtendedOptions: RequestExtendedOptions
): Promise<T> => {
return request<Record<string, T>>(requestExtendedOptions).then(
(result) => Object.values(result)[0]
);
};
const useAutoInfiniteQuery = <T extends Record<string, unknown>>(
infiniteQueryOptions: UseInfiniteQueryOptions<T[]>,
requestExtendedOptions: RequestExtendedOptions
): UseInfiniteQueryResult<T[]> => {
const query = useInfiniteQuery<T[]>({
retry: (_, error) => {
if (error === 'Size too big') {
// do something to reduce first
}
return true;
},
queryFn: ({ pageParam }) =>
getEntities<T[]>({
...requestExtendedOptions,
variables: {
...requestExtendedOptions.variables,
...pageParam,
},
}),
getNextPageParam: (lastPage, pages) =>
lastPage.length >=
(requestExtendedOptions.variables?.first)
? { id: pages.at(-1)?.at(-1)?.id }
: undefined,
...infiniteQueryOptions,
});
useEffect(() => {
if (!query.isFetchingNextPage && query.hasNextPage) query.fetchNextPage();
}, [query]);
return query;
};
// useGetEntities.ts
const query = useAutoInfiniteQuery<Entities>(
{ queryKey: [`getEntitiesQuery`] },
{
url: 'https://myurl',
document: myQuery,
variables: { ... },
}
);