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