feat: add @tanstack/react-query package, custom QueryClientProvider, useQueryClient hook

.eslintrc.cjs

@@ -16,9 +16,10 @@
 
 const tsconfigPath = require('./tsconfig.json')
 
+
 module.exports = {
     parser: '@typescript-eslint/parser',
-    plugins: ['@typescript-eslint', 'react', 'prettier', 'import', 'simple-import-sort'],
+    plugins: ['@typescript-eslint', 'react', 'prettier', 'import', 'simple-import-sort', '@tanstack/query'],
     env: {
         browser: true,
         es2021: true,
@@ -42,6 +43,7 @@ module.exports = {
         'airbnb',
         'airbnb/hooks',
         'prettier',
+        'plugin:@tanstack/query/recommended'
     ],
     rules: {
         'prettier/prettier': ['error'],

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.17.0-pre-15",
+    "version": "1.18.0-pre-0",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",
@@ -40,13 +40,15 @@
         "@esbuild-plugins/node-globals-polyfill": "0.2.3",
         "@laynezh/vite-plugin-lib-assets": "1.1.0",
         "@sentry/browser": "^7.119.1",
+        "@tanstack/eslint-plugin-query": "<5",
         "@testing-library/jest-dom": "^5.16.2",
         "@testing-library/react": "^12.1.4",
         "@tippyjs/react": "^4.2.0",
         "@typeform/embed-react": "2.20.0",
         "@types/dompurify": "^3.0.5",
         "@types/json-schema": "^7.0.15",
         "@types/react": "17.0.39",
+        "@types/react-dates": "^21.8.6",
         "@types/react-dom": "17.0.13",
         "@types/react-router-dom": "^5.3.3",
         "@typescript-eslint/eslint-plugin": "8.3.0",
@@ -107,7 +109,7 @@
         "@lezer/highlight": "1.2.1",
         "@replit/codemirror-indentation-markers": "6.5.3",
         "@replit/codemirror-vscode-keymap": "6.0.2",
-        "@types/react-dates": "^21.8.6",
+        "@tanstack/react-query": "<5",
         "@uiw/codemirror-extensions-hyper-link": "4.23.10",
         "@uiw/codemirror-theme-github": "4.23.7",
         "@uiw/react-codemirror": "4.23.7",

src/Common/API/CoreAPI.ts

@@ -130,6 +130,50 @@ class CoreAPI {
         )
     }
 
+    /**
+     * Merges multiple AbortSignals into a single AbortSignal that aborts
+     * as soon as any of the input signals abort.
+     *
+     * This is useful when you want to race multiple async cancellation signals,
+     * for example, to support both a global timeout and a user-triggered abort.
+     *
+     * @param signals - AbortSignals to merge.
+     * @returns An AbortSignal that aborts if any input signal aborts.
+     */
+    private static mergeAbortSignals(...signals: (AbortSignal | undefined)[]): AbortSignal {
+        const controller = new AbortController()
+
+        // If any signal is already aborted, abort immediately and don't add listeners
+        if (signals.some((s) => s?.aborted)) {
+            controller.abort()
+            return controller.signal
+        }
+
+        const onAbort = () => controller.abort()
+
+        // Keep track of listeners for cleanup later
+        const cleanupFns: (() => void)[] = []
+
+        signals.forEach((signal) => {
+            if (signal && !signal.aborted) {
+                signal.addEventListener('abort', onAbort)
+                cleanupFns.push(() => signal.removeEventListener('abort', onAbort))
+            }
+        })
+
+        // Ensure cleanup happens when merged signal is aborted (by any means)
+        controller.signal.addEventListener(
+            'abort',
+            () => {
+                cleanupFns.forEach((fn) => fn())
+            },
+            // This ensures the listener is only run once
+            { once: true },
+        )
+
+        return controller.signal
+    }
+
     private fetchInTime = <T = object>({
         url,
         type,
@@ -138,10 +182,13 @@ class CoreAPI {
         isMultipartRequest,
     }: FetchInTimeParamsType<T>): Promise<ResponseType> => {
         const controller = options?.abortControllerRef?.current ?? new AbortController()
-        const signal = options?.abortControllerRef?.current?.signal || options?.signal || controller.signal
-        const timeoutPromise: Promise<ResponseType> = new Promise((resolve, reject) => {
-            const timeout = options?.timeout || this.timeout
+        const timeoutSignal = controller.signal
+
+        const mergedSignal = CoreAPI.mergeAbortSignals(options?.signal, timeoutSignal)
 
+        const timeout = options?.timeout || this.timeout
+
+        const timeoutPromise: Promise<ResponseType> = new Promise((_, reject) => {
             setTimeout(() => {
                 controller.abort()
                 if (options?.abortControllerRef?.current) {
@@ -165,12 +212,13 @@ class CoreAPI {
                 })
             }, timeout)
         })
+
         return Promise.race([
             this.fetchAPI({
                 url,
                 type,
                 data,
-                signal,
+                signal: mergedSignal,
                 preventAutoLogout: options?.preventAutoLogout || false,
                 preventLicenseRedirect: options?.preventLicenseRedirect || false,
                 shouldParseServerErrorForUnauthorizedUser: options?.shouldParseServerErrorForUnauthorizedUser,

src/Common/API/QueryClientProvider.tsx

@@ -0,0 +1,44 @@
+import { PropsWithChildren } from 'react'
+import {
+    MutationCache,
+    QueryCache,
+    QueryClient,
+    QueryClientProvider as RQQueryClientProvider,
+} from '@tanstack/react-query'
+
+import { showError } from '@Common/Helper'
+
+const queryClient = new QueryClient({
+    defaultOptions: {
+        queries: {
+            cacheTime: 0,
+            refetchOnWindowFocus: false,
+            refetchOnReconnect: false,
+            retry: false,
+            meta: { showToastError: true },
+        },
+        mutations: {
+            cacheTime: 0,
+            retry: false,
+            meta: { showToastError: true },
+        },
+    },
+    queryCache: new QueryCache({
+        onError: (error, query) => {
+            if (query.meta.showToastError) {
+                showError(error)
+            }
+        },
+    }),
+    mutationCache: new MutationCache({
+        onError: (error, _variables, _context, mutation) => {
+            if (mutation.meta.showToastError) {
+                showError(error)
+            }
+        },
+    }),
+})
+
+export const QueryClientProvider = ({ children }: PropsWithChildren<{}>) => (
+    <RQQueryClientProvider client={queryClient}>{children}</RQQueryClientProvider>
+)

src/Common/API/index.ts

@@ -9,4 +9,6 @@ const dashboardAPI = new CoreAPI({
 
 export const { post, put, patch, get, trash } = dashboardAPI
 export { default as CoreAPI } from './CoreAPI'
+export { QueryClientProvider } from './QueryClientProvider'
+export * from './reactQueryHooks'
 export { abortPreviousRequests, getIsRequestAborted, handleRedirectToLicenseActivation } from './utils'

src/Common/API/reactQueryHooks.ts

@@ -0,0 +1,23 @@
+import {
+    QueryKey,
+    useMutation as rqUseMutation,
+    UseMutationOptions,
+    UseMutationResult,
+    useQuery as rqUseQuery,
+    useQueryClient,
+    UseQueryOptions,
+    UseQueryResult,
+} from '@tanstack/react-query'
+
+import { ServerErrors } from '@Common/ServerError'
+import { ResponseType } from '@Common/Types'
+
+export const useQuery = <TQueryFnData = unknown, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(
+    options: UseQueryOptions<ResponseType<TQueryFnData>, ServerErrors, TData, TQueryKey>,
+): UseQueryResult<TData, ServerErrors> => rqUseQuery(options)
+
+export const useMutation = <TData = unknown, TVariables = void, TContext = unknown>(
+    options: UseMutationOptions<ResponseType<TData>, ServerErrors, TVariables, TContext>,
+): UseMutationResult<ResponseType<TData>, ServerErrors, TVariables, TContext> => rqUseMutation(options)
+
+export { useQueryClient }