♻️ refactor(react-query): update react query

package.json

@@ -33,6 +33,7 @@
   "bin": "./bin/dashpress",
   "dependencies": {
     "@dashpress/bacteria": "^0.0.12",
+    "@tanstack/react-query": "^5.28.9",
     "@tanstack/react-table": "^8.7.9",
     "bcrypt": "^5.0.1",
     "change-case": "^4.1.2",
@@ -71,7 +72,6 @@
     "react-final-form-arrays": "^3.1.4",
     "react-hot-toast": "^2.2.0",
     "react-paginate": "^8.1.3",
-    "react-query": "^3.39.2",
     "react-quill": "^2.0.0",
     "react-select": "^5.3.2",
     "react-simple-code-editor": "^0.11.0",
@@ -102,19 +102,19 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^14.2.1",
-    "@types/node": "^18.0.0",
-    "@types/react-dom": "^18.0.4",
     "@types/cryptr": "^4.0.1",
     "@types/formidable": "^3.4.5",
     "@types/jsonwebtoken": "^8.5.8",
     "@types/lodash": "^4.14.182",
     "@types/microseconds": "^0.2.0",
+    "@types/node": "^18.0.0",
     "@types/nodemailer": "^6.4.6",
     "@types/prismjs": "^1.26.0",
     "@types/qs": "^6.9.7",
     "@types/ramda": "0.27.40",
     "@types/react": "^18.0.11",
     "@types/react-datepicker": "^4.4.1",
+    "@types/react-dom": "^18.0.4",
     "@typescript-eslint/eslint-plugin": "^5.31.0",
     "@typescript-eslint/parser": "^5.31.0",
     "babel-loader": "^8.2.5",

src/frontend/components/FEPaginationTable/useFEPagination.spec.tsx

@@ -1,5 +1,5 @@
 import fetchMock from "jest-fetch-mock";
-import { QueryClient, QueryClientProvider } from "react-query";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { waitFor } from "@testing-library/react";
 import { FieldQueryFilter, FilterOperators } from "shared/types/data";
 import { renderHook } from "__tests__/_/lib/renderHook";

src/frontend/components/FEPaginationTable/useFEPagination.ts

@@ -1,4 +1,4 @@
-import { useQuery, UseQueryResult } from "react-query";
+import { useQuery, UseQueryResult } from "@tanstack/react-query";
 import {
   FieldQueryFilter,
   FilterOperators,
@@ -18,72 +18,70 @@ export function useFEPagination<T>(
   endPoint: string,
   dataState: IPaginatedDataState<T>
 ): UseQueryResult<PaginatedData<T>> {
-  return useQuery<PaginatedData<T>>(
-    getQueryCachekey(endPoint),
-    async () => {
+  return useQuery<PaginatedData<T>>({
+    queryKey: getQueryCachekey(endPoint),
+    queryFn: async () => {
       return await makeGetRequest(endPoint, "Data could not be retrieved");
     },
-    {
-      select: (data: any) => {
-        let returnData: T[] = data as unknown as T[];
-        if (dataState.filters) {
-          returnData = returnData.filter((datum) => {
-            return dataState.filters.every(($filter) => {
-              const filter = $filter as unknown as FieldQueryFilter;
-              const filterValue = filter.value.value;
-              const currentValue = datum[filter.id];
-              if (!filterValue) {
-                return true;
-              }
-              switch (filter.value.operator) {
-                case FilterOperators.CONTAINS:
-                  return currentValue
-                    .toLowerCase()
-                    .includes((filterValue as string).toLowerCase());
-                case FilterOperators.EQUAL_TO:
-                  return currentValue === filterValue;
-                case FilterOperators.NOT_EQUAL:
-                  return currentValue !== filterValue;
-                case FilterOperators.LESS_THAN:
-                  return currentValue < filterValue;
-                case FilterOperators.GREATER_THAN:
-                  return currentValue > filterValue;
-                case FilterOperators.IN:
-                  return (filterValue as string[]).includes(currentValue);
-                case FilterOperators.NOT_IN:
-                  return !(filterValue as string[]).includes(currentValue);
-              }
+    select: (data: any) => {
+      let returnData: T[] = data as unknown as T[];
+      if (dataState.filters) {
+        returnData = returnData.filter((datum) => {
+          return dataState.filters.every(($filter) => {
+            const filter = $filter as unknown as FieldQueryFilter;
+            const filterValue = filter.value.value;
+            const currentValue = datum[filter.id];
+            if (!filterValue) {
               return true;
-            });
+            }
+            switch (filter.value.operator) {
+              case FilterOperators.CONTAINS:
+                return currentValue
+                  .toLowerCase()
+                  .includes((filterValue as string).toLowerCase());
+              case FilterOperators.EQUAL_TO:
+                return currentValue === filterValue;
+              case FilterOperators.NOT_EQUAL:
+                return currentValue !== filterValue;
+              case FilterOperators.LESS_THAN:
+                return currentValue < filterValue;
+              case FilterOperators.GREATER_THAN:
+                return currentValue > filterValue;
+              case FilterOperators.IN:
+                return (filterValue as string[]).includes(currentValue);
+              case FilterOperators.NOT_IN:
+                return !(filterValue as string[]).includes(currentValue);
+            }
+            return true;
           });
-        }
+        });
+      }
 
-        if (dataState.sortBy && dataState.sortBy.length > 0) {
-          const { id, desc } = dataState.sortBy[0];
+      if (dataState.sortBy && dataState.sortBy.length > 0) {
+        const { id, desc } = dataState.sortBy[0];
 
-          returnData = returnData.sort((a, b) => {
-            const value1 = (desc ? b : a)[id];
-            const value2 = (desc ? a : b)[id];
-            if (typeof value1 === "number") {
-              return compareNumbers(value1, value2);
-            }
+        returnData = returnData.sort((a, b) => {
+          const value1 = (desc ? b : a)[id];
+          const value2 = (desc ? a : b)[id];
+          if (typeof value1 === "number") {
+            return compareNumbers(value1, value2);
+          }
 
-            return compareString(value1, value2);
-          });
-        }
-        const totalReturnData = returnData.length;
-        const pageSize = dataState.pageSize || DEFAULT_PAGE_SIZE;
+          return compareString(value1, value2);
+        });
+      }
+      const totalReturnData = returnData.length;
+      const pageSize = dataState.pageSize || DEFAULT_PAGE_SIZE;
 
-        return {
-          pageIndex: dataState.pageIndex,
-          pageSize,
-          totalRecords: totalReturnData,
-          data: returnData.slice(
-            (dataState.pageIndex - 1) * pageSize,
-            dataState.pageIndex * pageSize
-          ),
-        };
-      },
-    }
-  );
+      return {
+        pageIndex: dataState.pageIndex,
+        pageSize,
+        totalRecords: totalReturnData,
+        data: returnData.slice(
+          (dataState.pageIndex - 1) * pageSize,
+          dataState.pageIndex * pageSize
+        ),
+      };
+    },
+  });
 }

src/frontend/design-system/components/Table/Stories.tsx

@@ -87,7 +87,7 @@ Empty.args = {
     },
     isLoading: false,
     error: false,
-    isPreviousData: false,
+    isPlaceholderData: false,
   },
 };
 
@@ -102,7 +102,7 @@ Error.args = {
     },
     isLoading: false,
     error: "Some Error Occured",
-    isPreviousData: false,
+    isPlaceholderData: false,
   },
 };
 
@@ -117,14 +117,14 @@ Loading.args = {
     },
     isLoading: true,
     error: false,
-    isPreviousData: false,
+    isPlaceholderData: false,
   },
 };
 
 export const PreviousData = Template.bind({});
 PreviousData.args = {
   tableData: {
     ...TABLE_DATA,
-    isPreviousData: true,
+    isPlaceholderData: true,
   },
 };

src/frontend/design-system/components/Table/data/index.tsx

@@ -41,7 +41,7 @@ export const TABLE_DATA = {
   },
   isLoading: false,
   error: false,
-  isPreviousData: false,
+  isPlaceholderData: false,
 };
 
 export const TABLE_COLUMNS: ITableColumn[] = [

src/frontend/design-system/components/Table/index.tsx

@@ -67,7 +67,7 @@ export function Table<T extends unknown>({
     },
     isLoading,
     error,
-    isPreviousData,
+    isPlaceholderData,
   } = tableData;
 
   const totalPageCount = getPageCount(data.totalRecords, data.pageSize);
@@ -111,7 +111,7 @@ export function Table<T extends unknown>({
     return <TableSkeleton lean={lean} />;
   }
 
-  const previousDataRender = isPreviousData ? (
+  const previousDataRender = isPlaceholderData ? (
     <BaseSkeleton
       height="2px"
       width="100%"

src/frontend/design-system/components/Table/types.ts

@@ -1,6 +1,6 @@
 import { HeaderContext } from "@tanstack/react-table";
 import { ReactNode } from "react";
-import { UseQueryResult } from "react-query";
+import { UseQueryResult } from "@tanstack/react-query";
 import {
   IPaginatedDataState,
   PaginatedData,
@@ -27,7 +27,7 @@ export interface ITableProps<T> {
   columns: ITableColumn[];
   tableData: Pick<
     UseQueryResult<PaginatedData<Record<string, unknown>>, unknown>,
-    "data" | "isLoading" | "error" | "isPreviousData"
+    "data" | "isLoading" | "error" | "isPlaceholderData"
   >;
   lean?: true;
   border?: boolean;

src/frontend/hooks/auth/preferences.store.ts

@@ -1,4 +1,4 @@
-import { useMutation } from "react-query";
+import { useMutation } from "@tanstack/react-query";
 import { makeActionRequest } from "frontend/lib/data/makeRequest";
 import { useStorageApi } from "frontend/lib/data/useApi";
 import { useWaitForResponseMutationOptions } from "frontend/lib/data/useMutate/useWaitForResponseMutationOptions";
@@ -55,10 +55,13 @@ export function useUpsertUserPreferenceMutation<T extends UserPreferencesKeys>(
     successMessage: MAKE_USER_PREFERENCE_CRUD_CONFIG(key).MUTATION_LANG.SAVED,
   });
 
-  return useMutation(async (values: UserPreferencesValueType<T>) => {
-    await makeActionRequest("PUT", userPrefrencesApiPath(key), {
-      data: values,
-    });
-    return values;
-  }, apiMutateOptions);
+  return useMutation({
+    mutationFn: async (values: UserPreferencesValueType<T>) => {
+      await makeActionRequest("PUT", userPrefrencesApiPath(key), {
+        data: values,
+      });
+      return values;
+    },
+    ...apiMutateOptions,
+  });
 }

src/frontend/hooks/configuration/configuration.store.ts

@@ -1,4 +1,4 @@
-import { useMutation } from "react-query";
+import { useMutation } from "@tanstack/react-query";
 import {
   APP_CONFIGURATION_CONFIG,
   AppConfigurationKeys,
@@ -95,10 +95,13 @@ export function useUpsertConfigurationMutation<T extends AppConfigurationKeys>(
     successMessage: MAKE_APP_CONFIGURATION_CRUD_CONFIG(key).MUTATION_LANG.SAVED,
   });
 
-  return useMutation(async (values: AppConfigurationValueType<T>) => {
-    await makeActionRequest("PUT", configurationApiPath(key, entity, "PUT"), {
-      data: values,
-    });
-    return values;
-  }, apiMutateOptions);
+  return useMutation({
+    mutationFn: async (values: AppConfigurationValueType<T>) => {
+      await makeActionRequest("PUT", configurationApiPath(key, entity, "PUT"), {
+        data: values,
+      });
+      return values;
+    },
+    ...apiMutateOptions,
+  });
 }

src/frontend/hooks/data/data.store.ts

@@ -1,6 +1,6 @@
 import qs from "qs";
 import { useRouter } from "next/router";
-import { useMutation } from "react-query";
+import { useMutation } from "@tanstack/react-query";
 import { FieldQueryFilter, FilterOperators } from "shared/types/data";
 import { CRUD_CONFIG_NOT_FOUND } from "frontend/lib/crud-config";
 import { makeActionRequest } from "frontend/lib/data/makeRequest";
@@ -38,7 +38,7 @@ export const useEntityDataDetails = ({
     ENTITY_DETAILS_PATH({ entity, entityId, column }),
     {
       errorMessage: entityCrudConfig.TEXT_LANG.NOT_FOUND,
-      enabled: column !== SYSTEM_LOADING_VALUE,
+      enabled: column !== SYSTEM_LOADING_VALUE && !!entityId,
       defaultData: {},
     }
   );
@@ -129,6 +129,7 @@ export const useEntityReferenceCount = (
 export const useEntityDataReference = (entity: string, entityId: string) => {
   return useApi<string>(ENTITY_REFERENCE_PATH({ entity, entityId }), {
     errorMessage: CRUD_CONFIG_NOT_FOUND("Reference data"),
+    enabled: !!entityId && !!entity,
     defaultData: "",
   });
 };
@@ -160,11 +161,11 @@ export function useEntityDataCreationMutation(
         }),
   });
 
-  return useMutation(
-    async (data: Record<string, string>) =>
+  return useMutation({
+    mutationFn: async (data: Record<string, string>) =>
       await makeActionRequest("POST", `/api/data/${entity}`, { data }),
-    apiMutateOptions
-  );
+    ...apiMutateOptions,
+  });
 }
 
 export function useEntityDataUpdationMutation(
@@ -184,13 +185,13 @@ export function useEntityDataUpdationMutation(
 
   const metadata = useEntityMetadataDetails({ entity, entityId });
 
-  return useMutation(
-    async (data: Record<string, string>) =>
+  return useMutation({
+    mutationFn: async (data: Record<string, string>) =>
       await makeActionRequest("PATCH", `/api/data/${entity}/${entityId}`, {
         data: { ...data, ...metadata },
       }),
-    apiMutateOptions
-  );
+    ...apiMutateOptions,
+  });
 }
 
 export function useEntityDataDeletionMutation(
@@ -220,9 +221,9 @@ export function useEntityDataDeletionMutation(
     successMessage: entityCrudConfig.MUTATION_LANG.DELETE,
   });
   // eyes on optimstic delete here
-  return useMutation(
-    async (id: string) =>
+  return useMutation({
+    mutationFn: async (id: string) =>
       await makeActionRequest("DELETE", `/api/data/${entity}/${id}`),
-    apiMutateOptions
-  );
+    ...apiMutateOptions,
+  });
 }

src/frontend/lib/data/QueryClient.tsx

@@ -1,5 +1,9 @@
 import React, { ReactNode } from "react";
-import { QueryClientProvider, QueryClient, QueryCache } from "react-query";
+import {
+  QueryClientProvider,
+  QueryClient,
+  QueryCache,
+} from "@tanstack/react-query";
 
 export const queryCache = new QueryCache();