From 58945f2217da76c32f69e318df6af920d3ac34a8 Mon Sep 17 00:00:00 2001 From: KacperKoza343 Date: Mon, 21 Oct 2024 16:15:53 +0200 Subject: [PATCH 1/2] feat(human-app/fronend): add requests cancelation --- .../human-app/frontend/src/api/fetcher.ts | 19 +++++++++++++++---- .../services/worker/available-jobs-data.ts | 12 ++++++++---- .../src/api/services/worker/my-jobs-data.ts | 12 ++++++++---- 3 files changed, 31 insertions(+), 12 deletions(-) diff --git a/packages/apps/human-app/frontend/src/api/fetcher.ts b/packages/apps/human-app/frontend/src/api/fetcher.ts index 7a65ea2af..c56a36b8d 100644 --- a/packages/apps/human-app/frontend/src/api/fetcher.ts +++ b/packages/apps/human-app/frontend/src/api/fetcher.ts @@ -73,17 +73,20 @@ export function createFetcher(defaultFetcherConfig?: { }) { async function fetcher( url: string | URL, - fetcherOptions: FetcherOptionsWithValidation + fetcherOptions: FetcherOptionsWithValidation, + abortSignal?: AbortSignal ): Promise; async function fetcher( url: FetcherUrl, - fetcherOptions: FetcherOptionsWithoutValidation + fetcherOptions: FetcherOptionsWithoutValidation, + abortSignal?: AbortSignal ): Promise; async function fetcher( url: FetcherUrl, - fetcherOptions: FetcherOptions + fetcherOptions: FetcherOptions, + abortSignal?: AbortSignal // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents -- required unknown for correct type intellisense ): Promise { let fetcherOptionsWithDefaults = defaultFetcherConfig?.options @@ -99,10 +102,18 @@ export function createFetcher(defaultFetcherConfig?: { : fetcherOptions.options; if (fetcherOptions.authenticated) { fetcherOptionsWithDefaults = appendHeader(fetcherOptionsWithDefaults, { - Authorization: `Bearer ${browserAuthProvider.getAccessToken() ?? ''}`, + // eslint-disable-next-line @typescript-eslint/restrict-template-expressions + Authorization: `Bearer ${browserAuthProvider.getAccessToken()}`, }); } + if (abortSignal) { + fetcherOptionsWithDefaults = { + ...fetcherOptionsWithDefaults, + signal: abortSignal, + }; + } + const baseUrl = (() => { const currentUrl = fetcherOptions.baseUrl ? () => fetcherOptions.baseUrl diff --git a/packages/apps/human-app/frontend/src/api/services/worker/available-jobs-data.ts b/packages/apps/human-app/frontend/src/api/services/worker/available-jobs-data.ts index e7408a47b..d030c12e1 100644 --- a/packages/apps/human-app/frontend/src/api/services/worker/available-jobs-data.ts +++ b/packages/apps/human-app/frontend/src/api/services/worker/available-jobs-data.ts @@ -31,7 +31,10 @@ type GetJobTableDataDto = JobsFilterStoreProps['filterParams'] & { oracle_address: string; }; -const getAvailableJobsTableData = async (dto: GetJobTableDataDto) => { +const getAvailableJobsTableData = async ( + dto: GetJobTableDataDto, + abortSignal: AbortSignal +) => { return apiClient( `${apiPaths.worker.jobs.path}?${stringifyUrlQueryObject({ ...dto })}`, { @@ -40,7 +43,8 @@ const getAvailableJobsTableData = async (dto: GetJobTableDataDto) => { options: { method: 'GET', }, - } + }, + abortSignal ); }; @@ -51,7 +55,7 @@ export function useGetAvailableJobsData() { return useQuery({ queryKey: ['availableJobs', dto], - queryFn: () => getAvailableJobsTableData(dto), + queryFn: ({ signal }) => getAvailableJobsTableData(dto, signal), }); } @@ -63,7 +67,7 @@ export function useInfiniteGetAvailableJobsData() { return useInfiniteQuery({ initialPageParam: 0, queryKey: ['availableJobsInfinite', dto], - queryFn: () => getAvailableJobsTableData(dto), + queryFn: ({ signal }) => getAvailableJobsTableData(dto, signal), getNextPageParam: (pageParams) => { return pageParams.total_pages - 1 <= pageParams.page ? undefined diff --git a/packages/apps/human-app/frontend/src/api/services/worker/my-jobs-data.ts b/packages/apps/human-app/frontend/src/api/services/worker/my-jobs-data.ts index 2715289ed..4bb0c5e2f 100644 --- a/packages/apps/human-app/frontend/src/api/services/worker/my-jobs-data.ts +++ b/packages/apps/human-app/frontend/src/api/services/worker/my-jobs-data.ts @@ -35,7 +35,10 @@ type GetMyJobTableDataDto = MyJobsFilterStoreProps['filterParams'] & { oracle_address: string; }; -const getMyJobsTableData = async (dto: GetMyJobTableDataDto) => { +const getMyJobsTableData = async ( + dto: GetMyJobTableDataDto, + abortSignal: AbortSignal +) => { return apiClient( `${apiPaths.worker.myJobs.path}?${stringifyUrlQueryObject({ ...dto })}`, { @@ -44,7 +47,8 @@ const getMyJobsTableData = async (dto: GetMyJobTableDataDto) => { options: { method: 'GET', }, - } + }, + abortSignal ); }; @@ -54,7 +58,7 @@ export function useGetMyJobsData() { const dto = { ...filterParams, oracle_address: address ?? '' }; return useQuery({ queryKey: ['myJobs', dto], - queryFn: () => getMyJobsTableData(dto), + queryFn: ({ signal }) => getMyJobsTableData(dto, signal), }); } @@ -66,7 +70,7 @@ export function useInfiniteGetMyJobsData() { return useInfiniteQuery({ initialPageParam: 0, queryKey: ['myJobsInfinite', dto], - queryFn: () => getMyJobsTableData(dto), + queryFn: ({ signal }) => getMyJobsTableData(dto, signal), getNextPageParam: (pageParams) => { return pageParams.total_pages - 1 <= pageParams.page ? undefined From 417bcdccd29952bfd26094bc98008fd842a7a763 Mon Sep 17 00:00:00 2001 From: KacperKoza343 Date: Fri, 25 Oct 2024 15:12:59 +0200 Subject: [PATCH 2/2] [HUM-50] add abort signal to oracles data service --- .../human-app/frontend/src/api/services/worker/oracles.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/apps/human-app/frontend/src/api/services/worker/oracles.ts b/packages/apps/human-app/frontend/src/api/services/worker/oracles.ts index c3c980185..a17e16b73 100644 --- a/packages/apps/human-app/frontend/src/api/services/worker/oracles.ts +++ b/packages/apps/human-app/frontend/src/api/services/worker/oracles.ts @@ -31,8 +31,10 @@ const H_CAPTCHA_ORACLE: OracleSuccessResponse = { export async function getOracles({ selected_job_types, + signal, }: { selected_job_types: string[]; + signal: AbortSignal; }) { let oracles = [H_CAPTCHA_ORACLE]; const queryParams = selected_job_types.length @@ -44,7 +46,8 @@ export async function getOracles({ { successSchema: OraclesSuccessSchema, options: { method: 'GET' }, - } + }, + signal ); oracles = oracles.concat(result); @@ -55,7 +58,7 @@ export async function getOracles({ export function useGetOracles() { const { selected_job_types } = useJobsTypesOraclesFilter(); return useQuery({ - queryFn: () => getOracles({ selected_job_types }), + queryFn: ({ signal }) => getOracles({ selected_job_types, signal }), queryKey: ['oracles', selected_job_types], }); }