Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-06-02 21:24:20 -04:00
Code Issues Packages Projects Releases Wiki Activity

Expose more react query options to useFetch

Browse Source
This commit is contained in:
Zoe Roux 2023-12-01 18:33:49 +01:00
parent bd84989454
commit e0f41be887
1 changed files with 37 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
front/packages/models/src/query.tsx
View File

@ -23,7 +23,7 @@ import {
dehydrate,
QueryClient,
QueryFunctionContext,
QueryKey,
QueryOptions,
useInfiniteQuery,
useQuery,
} from "@tanstack/react-query";
@ -48,14 +48,14 @@ export const setApiUrl = (apiUrl: string) => {
export const queryFn = async <Data,>(
context:
| QueryFunctionContext
| (QueryFunctionContext & { timeout?: number })
| {
path: (string | false | undefined | null)[];
body?: object;
method: "GET" | "POST" | "DELETE";
authenticated?: boolean;
apiUrl?: string;
abortSignal?: AbortSignal;
timeout?: number;
},
type?: z.ZodType<Data>,
token?: string | null,
@ -79,6 +79,9 @@ export const queryFn = async <Data,>(
.replace("/?", "?");
let resp;
try {
const controller = context.timeout !== undefined ? new AbortController() : undefined;
if (controller) setTimeout(() => controller.abort(), context.timeout);
resp = await fetch(path, {
// @ts-ignore
method: context.method,
@ -88,7 +91,7 @@ export const queryFn = async <Data,>(
...(token ? { Authorization: token } : {}),
...("body" in context ? { "Content-Type": "application/json" } : {}),
},
signal: "abortSignal" in context ? context.abortSignal : undefined,
signal: controller?.signal,
});
} catch (e) {
console.log("Fetch error", e);
@ -106,8 +109,7 @@ export const queryFn = async <Data,>(
data = { errors: [error] } as KyooErrors;
}
console.log(
`Invalid response (${
"method" in context && context.method ? context.method : "GET"
`Invalid response (${"method" in context && context.method ? context.method : "GET"
} ${path}):`,
data,
resp.status,
@ -160,6 +162,10 @@ export type QueryIdentifier<T = unknown, Ret = T> = {
* A custom get next function if the infinite query is not a page.
*/
getNext?: (item: unknown) => string | undefined;
placeholderData?: T | (() => T);
enabled?: boolean;
timeout?: number;
};
export type QueryPage<Props = {}, Items = unknown> = ComponentType<
@ -193,7 +199,9 @@ const toQueryKey = <Data, Ret>(query: QueryIdentifier<Data, Ret>) => {
export const useFetch = <Data,>(query: QueryIdentifier<Data>) => {
return useQuery<Data, KyooErrors>({
queryKey: toQueryKey(query),
queryFn: (ctx) => queryFn(ctx, query.parser),
queryFn: (ctx) => queryFn({ ...ctx, timeout: query.timeout }, query.parser),
placeholderData: query.placeholderData as any,
enabled: query.enabled,
});
};
@ -202,18 +210,22 @@ export const useInfiniteFetch = <Data, Ret>(query: QueryIdentifier<Data, Ret>) =
// eslint-disable-next-line react-hooks/rules-of-hooks
const ret = useInfiniteQuery<Data[], KyooErrors>({
queryKey: toQueryKey(query),
queryFn: (ctx) => queryFn(ctx, z.array(query.parser)),
queryFn: (ctx) => queryFn({ ...ctx, timeout: query.timeout }, z.array(query.parser)),
getNextPageParam: query.getNext,
initialPageParam: undefined,
placeholderData: query.placeholderData as any,
enabled: query.enabled,
});
return { ...ret, items: ret.data?.pages.flatMap((x) => x) as unknown as Ret[] | undefined };
}
// eslint-disable-next-line react-hooks/rules-of-hooks
const ret = useInfiniteQuery<Page<Data>, KyooErrors>({
queryKey: toQueryKey(query),
queryFn: (ctx) => queryFn(ctx, Paged(query.parser)),
queryFn: (ctx) => queryFn({ ...ctx, timeout: query.timeout }, Paged(query.parser)),
getNextPageParam: (page: Page<Data>) => page?.next || undefined,
initialPageParam: undefined,
placeholderData: query.placeholderData as any,
enabled: query.enabled,
});
const items = ret.data?.pages.flatMap((x) => x.items);
return {