[Human App] HUM-50: abort conflicting queries (humanprotocol#2667)

KacperKoza343 · Oct 28, 2024 · 3577dfc · 3577dfc
1 parent 55529bc
commit 3577dfc
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 14 deletions.
diff --git a/packages/apps/human-app/frontend/.eslintrc.cjs b/packages/apps/human-app/frontend/.eslintrc.cjs
@@ -37,6 +37,13 @@ module.exports = {
     // allow imports from material react table library
     camelcase: ['error', { allow: ['MRT_'] }],
     'react/jsx-pascal-case': ['error', { ignore: ['MRT_'] }],
+    '@typescript-eslint/restrict-template-expressions': [
+      'error',
+      {
+        allowNumber: true,
+        allowNullish: true,
+      },
+    ],
   },
   settings: {
     'import/resolver': {

diff --git 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<SuccessInput, SuccessOutput>(
     url: string | URL,
-    fetcherOptions: FetcherOptionsWithValidation<SuccessInput, SuccessOutput>
+    fetcherOptions: FetcherOptionsWithValidation<SuccessInput, SuccessOutput>,
+    abortSignal?: AbortSignal
   ): Promise<SuccessOutput>;
 
   async function fetcher(
     url: FetcherUrl,
-    fetcherOptions: FetcherOptionsWithoutValidation
+    fetcherOptions: FetcherOptionsWithoutValidation,
+    abortSignal?: AbortSignal
   ): Promise<unknown>;
 
   async function fetcher<SuccessInput, SuccessOutput>(
     url: FetcherUrl,
-    fetcherOptions: FetcherOptions<SuccessInput, SuccessOutput>
+    fetcherOptions: FetcherOptions<SuccessInput, SuccessOutput>,
+    abortSignal?: AbortSignal
     // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents -- required unknown for correct type intellisense
   ): Promise<SuccessOutput | unknown> {
     let fetcherOptionsWithDefaults = defaultFetcherConfig?.options
@@ -99,10 +102,17 @@ export function createFetcher(defaultFetcherConfig?: {
       : fetcherOptions.options;
     if (fetcherOptions.authenticated) {
       fetcherOptionsWithDefaults = appendHeader(fetcherOptionsWithDefaults, {
-        Authorization: `Bearer ${browserAuthProvider.getAccessToken() ?? ''}`,
+        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
@@ -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
@@ -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

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
@@ -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],
   });
 }