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

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.14.0-pre-0",
+    "version": "1.14.0-beta-1",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",
@@ -106,6 +106,7 @@
         "@lezer/highlight": "1.2.1",
         "@replit/codemirror-indentation-markers": "6.5.3",
         "@replit/codemirror-vscode-keymap": "6.0.2",
+        "@tanstack/react-query": "<5",
         "@types/react-dates": "^21.8.6",
         "@uiw/codemirror-extensions-hyper-link": "4.23.10",
         "@uiw/codemirror-theme-github": "4.23.7",

src/Common/API/QueryClientProvider.tsx

@@ -0,0 +1,46 @@
+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} contextSharing>
+        {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 './useQueryClient'
 export { abortPreviousRequests, getIsRequestAborted, handleRedirectToLicenseActivation } from './utils'

src/Common/API/useQueryClient.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 }

src/index.ts

@@ -16,6 +16,8 @@
 
 import { OverrideMergeStrategyType } from '@Pages/Applications'
 
+import '@tanstack/react-query'
+
 export interface customEnv {
     SENTRY_ENV?: string
     SENTRY_ERROR_ENABLED?: boolean
@@ -168,6 +170,23 @@ declare global {
     }
 }
 
+declare module '@tanstack/react-query' {
+    export interface QueryMeta {
+        /**
+         * Optional flag indicating whether to display a toast notification for errors.
+         * @default true
+         */
+        showToastError?: boolean
+    }
+    export interface MutationMeta {
+        /**
+         * Optional flag indicating whether to display a toast notification for errors.
+         * @default true
+         */
+        showToastError?: boolean
+    }
+}
+
 export * from './Common'
 export * from './Pages'
 export * from './Shared'