feat: add timeout for videos fetch requests

AXeL-dev · Jun 20, 2022 · c6dddc6 · c6dddc6
1 parent f03c47d
commit c6dddc6
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 4 deletions.
diff --git a/src/store/services/youtube/api.ts b/src/store/services/youtube/api.ts
@@ -1,7 +1,13 @@
-import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
+import {
+  createApi,
+  FetchArgs,
+  fetchBaseQuery,
+} from '@reduxjs/toolkit/query/react';
+import { BaseQueryApi } from '@reduxjs/toolkit/dist/query/baseQueryTypes';
 import { RootState } from 'store';
+import { FetchError } from 'types';
 
-const baseQuery = fetchBaseQuery({
+const defaultBaseQuery = fetchBaseQuery({
   baseUrl: 'https://www.googleapis.com/youtube/v3/',
   prepareHeaders: (headers, { getState }) => {
     const apiKey = (getState() as RootState).settings.apiKey;
@@ -12,6 +18,24 @@ const baseQuery = fetchBaseQuery({
   },
 });
 
+const baseQuery = (
+  args: string | FetchArgs,
+  api: BaseQueryApi,
+  extraOptions: { timeout?: number } = {}
+) =>
+  Promise.race([
+    defaultBaseQuery(args, api, extraOptions),
+    new Promise((resolve) =>
+      setTimeout(
+        () =>
+          resolve({
+            error: { status: 'FETCH_ERROR', error: FetchError.TIMEOUT },
+          }),
+        extraOptions.timeout ?? 10000
+      )
+    ) as ReturnType<typeof defaultBaseQuery>,
+  ]);
+
 export const youtubeApi = createApi({
   reducerPath: 'youtubeApi',
   baseQuery,

diff --git a/src/store/services/youtube/endpoints.ts b/src/store/services/youtube/endpoints.ts
@@ -3,7 +3,7 @@ import { FetchBaseQueryError } from '@reduxjs/toolkit/dist/query';
 import { niceDuration, shortenLargeNumber, TimeAgo } from 'helpers/utils';
 import { Channel, ChannelActivities, Response, Video, VideoFlags } from 'types';
 import { saveVideos } from 'store/reducers/videos';
-import { parseVideoField, evaluateField } from './utils';
+import { parseVideoField, evaluateField, isFetchTimeoutError } from './utils';
 
 type FindChannelByNameArgs = {
   name: string;
@@ -156,6 +156,15 @@ const extendedApi = youtubeApi.injectEndpoints({
           })
         );
         if (!result.data) {
+          if (isFetchTimeoutError(result.error)) {
+            console.error(result.error);
+            return {
+              data: {
+                items: [],
+                total: 0,
+              },
+            };
+          }
           return { error: result.error as FetchBaseQueryError };
         }
         return {
@@ -180,6 +189,15 @@ const extendedApi = youtubeApi.injectEndpoints({
           })
         );
         if (activities.error) {
+          if (isFetchTimeoutError(activities.error)) {
+            console.error(activities.error);
+            return {
+              data: {
+                items: [],
+                total: 0,
+              },
+            };
+          }
           return { error: activities.error as FetchBaseQueryError };
         }
         const { items, total } = queries.getChannelActivities.transformResponse(

diff --git a/src/store/services/youtube/utils.ts b/src/store/services/youtube/utils.ts
@@ -1,4 +1,8 @@
-import { Video, ChannelFilterOperator } from 'types';
+import { FetchBaseQueryError } from '@reduxjs/toolkit/dist/query';
+import { Video, ChannelFilterOperator, FetchError } from 'types';
+
+export const isFetchTimeoutError = (err: FetchBaseQueryError | undefined) =>
+  err && err.status === 'FETCH_ERROR' && err.error === FetchError.TIMEOUT;
 
 export const parseVideoField = (video: Video, field: string) => {
   const parsed = video[field as keyof Video];

diff --git a/src/types/api.ts b/src/types/api.ts
@@ -1,3 +1,7 @@
+export enum FetchError {
+  TIMEOUT = 'timed out',
+}
+
 export interface Response {
   kind?: string;
   etag?: string;