dependencies: upgrade react-query from 4 to 5

odd-platform-ui/package.json

@@ -45,7 +45,7 @@
     "@mui/system": "^5.14.4",
     "@mui/x-date-pickers": "^5.0.20",
     "@reduxjs/toolkit": "^1.9.5",
-    "@tanstack/react-query": "^4.32.6",
+    "@tanstack/react-query": "^5.0.5",
     "@tanstack/react-virtual": "3.0.0-beta.60",
     "@uiw/react-md-editor": "^3.23.5",
     "@visx/curve": "^3.3.0",

odd-platform-ui/src/components/DataEntityDetails/DatasetStructure/DatasetStructureCompare/DatasetStructureCompare.tsx

@@ -43,7 +43,11 @@ const DatasetStructureCompare: FC = () => {
         />
       )}
       {isLoading && <AppLoadingPage />}
-      <AppErrorPage showError={isError} offsetTop={210} error={error as ErrorState} />
+      <AppErrorPage
+        showError={isError}
+        offsetTop={210}
+        error={error as unknown as ErrorState}
+      />
       <EmptyContentPlaceholder
         isContentLoaded={isSuccess}
         isContentEmpty={!data?.structureDiffList.length}

odd-platform-ui/src/components/DataEntityDetails/DatasetStructure/DatasetStructureOverview/DatasetStructureView/DatasetFieldOverview/DatasetFieldHeader/DatasetFieldInternalNameForm/DatasetFieldInternalNameForm.tsx

@@ -21,7 +21,7 @@ const DatasetFieldInternalNameForm = ({
   const formId = 'datasetField-internal-name';
   const {
     mutateAsync: updateName,
-    isLoading: isInternalNameUpdating,
+    isPending: isInternalNameUpdating,
     isSuccess: isInternalNameUpdated,
   } = useUpdateDatasetFieldInternalName();
 

odd-platform-ui/src/components/DataEntityDetails/DatasetStructure/DatasetStructureOverview/DatasetStructureView/DatasetFieldOverview/DatasetFieldTerms/AssignFieldTermForm/AssignFieldTermForm.tsx

@@ -14,7 +14,7 @@ const AssignFieldTermForm: FC<AssignFieldTermFormProps> = ({
   datasetFieldId,
   handleAddTerm,
 }) => {
-  const { isLoading, isSuccess, mutateAsync: addTerm } = useAddDatasetFieldTerm();
+  const { isPending, isSuccess, mutateAsync: addTerm } = useAddDatasetFieldTerm();
 
   const onSubmit = useCallback(
     (clearState: () => void) =>
@@ -32,7 +32,7 @@ const AssignFieldTermForm: FC<AssignFieldTermFormProps> = ({
       onSubmit={onSubmit}
       openBtnEl={openBtnEl}
       handleCloseSubmittedForm={isSuccess}
-      isLoading={isLoading}
+      isLoading={isPending}
     />
   );
 };

odd-platform-ui/src/components/DataEntityDetails/Overview/OverviewAttachments/EditLinkForm/EditLinkForm.tsx

@@ -18,7 +18,7 @@ const EditLinkForm: FC<EditLinkFormProps> = ({ openBtn, linkId, name, url }) =>
   const { t } = useTranslation();
   const { dataEntityId } = useAppParams();
 
-  const { mutate: updateLink, isLoading, isSuccess } = useUpdateDataEntityLink();
+  const { mutate: updateLink, isPending, isSuccess } = useUpdateDataEntityLink();
 
   const { reset, formState, handleSubmit, control } = useForm<DataEntityLinkFormData>({
     defaultValues: { name, url },
@@ -90,7 +90,7 @@ const EditLinkForm: FC<EditLinkFormProps> = ({ openBtn, linkId, name, url }) =>
       renderContent={formContent}
       renderActions={formActionButtons}
       handleCloseSubmittedForm={isSuccess}
-      isLoading={isLoading}
+      isLoading={isPending}
       clearState={clearState}
     />
   );

odd-platform-ui/src/components/DataEntityDetails/Overview/OverviewAttachments/SaveFilesForm/SaveFilesForm.tsx

@@ -18,7 +18,7 @@ const SaveFilesForm: FC<SaveFilesFormProps> = ({ openBtn, maxSize }) => {
   const formId = 'save-files-form';
   const { dataEntityId } = useAppParams();
 
-  const { mutate: saveFile, isLoading, isSuccess } = useSaveDataEntityFile();
+  const { mutate: saveFile, isPending, isSuccess } = useSaveDataEntityFile();
 
   const [uploadedFile, setUploadedFile] = useState<Blob | undefined>(undefined);
   const { reset, handleSubmit, control } = useForm<FormData>({
@@ -92,7 +92,7 @@ const SaveFilesForm: FC<SaveFilesFormProps> = ({ openBtn, maxSize }) => {
       type='submit'
       form={formId}
       fullWidth
-      disabled={!uploadedFile || isLoading}
+      disabled={!uploadedFile || isPending}
     />
   );
 
@@ -106,7 +106,7 @@ const SaveFilesForm: FC<SaveFilesFormProps> = ({ openBtn, maxSize }) => {
       renderContent={formContent}
       renderActions={formActionButtons}
       handleCloseSubmittedForm={isSuccess}
-      isLoading={isLoading}
+      isLoading={isPending}
       clearState={clearState}
       confirmOnClose
     />

odd-platform-ui/src/components/DataEntityDetails/Overview/OverviewAttachments/SaveLinksForm/SaveLinksForm.tsx

@@ -15,7 +15,7 @@ const SaveLinksForm: FC<SaveLinksFormProps> = ({ openBtn }) => {
   const formId = 'save-links-form';
   const { dataEntityId } = useAppParams();
 
-  const { mutate: saveLinks, isLoading, isSuccess } = useSaveDataEntityLinks();
+  const { mutate: saveLinks, isPending, isSuccess } = useSaveDataEntityLinks();
 
   const methods = useForm<DataEntityLinkListFormData>({
     defaultValues: { items: [{ name: '', url: '' }] },
@@ -87,7 +87,7 @@ const SaveLinksForm: FC<SaveLinksFormProps> = ({ openBtn }) => {
       renderContent={formContent}
       renderActions={formActionButtons}
       handleCloseSubmittedForm={isSuccess}
-      isLoading={isLoading}
+      isLoading={isPending}
       clearState={clearState}
     />
   );

odd-platform-ui/src/components/DataEntityDetails/Overview/OverviewStats/OverviewEntityGroupItems/OverviewEntityGroupItems.tsx

@@ -106,7 +106,7 @@ const OverviewEntityGroupItems: FC = () => {
                 scrollableTarget='entity-group-items-list'
                 dataLength={entities.length}
                 next={fetchNextPage}
-                hasMore={!!hasNextPage}
+                hasMore={hasNextPage}
                 loader={
                   <Grid container justifyContent='center' mt={3}>
                     <AppCircularProgress size={30} background='transparent' />

odd-platform-ui/src/components/Directory/DataSourceList/DataSourceList.tsx

@@ -106,7 +106,11 @@ const DataSourceList: FC = () => {
   return (
     <>
       {isLoading && <AppLoadingPage />}
-      <AppErrorPage showError={isError} offsetTop={210} error={error as ErrorState} />
+      <AppErrorPage
+        showError={isError}
+        offsetTop={210}
+        error={error as unknown as ErrorState}
+      />
       {dataSourceList && (
         <S.Container>
           <DirectoryBreadCrumbs />

odd-platform-ui/src/components/Directory/Directory/Directory.tsx

@@ -27,7 +27,11 @@ const Directory: FC = () => {
         <Typography variant='h0'>{t('Directories')}</Typography>
       </Grid>
       {isLoading && <AppLoadingPage />}
-      <AppErrorPage showError={isError} offsetTop={210} error={error as ErrorState} />
+      <AppErrorPage
+        showError={isError}
+        offsetTop={210}
+        error={error as unknown as ErrorState}
+      />
       {dataSourceTypes && (
         <ScrollableContainer $offsetY={70}>
           <Grid container mt={3} columnGap={1} rowGap={3}>

odd-platform-ui/src/components/Directory/Entities/Entities.tsx

@@ -60,7 +60,7 @@ const Entities: FC = () => {
       <AppErrorPage
         showError={isTypesError || isEntitiesError}
         offsetTop={210}
-        error={(typesError || entitiesError) as ErrorState}
+        error={(typesError ?? entitiesError) as ErrorState}
       />
       <S.Container>
         <DirectoryBreadCrumbs dataSourceName={dataSourceName} />
@@ -80,7 +80,7 @@ const Entities: FC = () => {
         {types && <EntitiesTabs types={types} />}
         <EntitiesList
           entities={entities}
-          hasNextPage={!!hasNextPage}
+          hasNextPage={hasNextPage}
           isEntitiesLoaded={isEntitiesLoaded}
           isContentEmpty={!total}
           fetchNextPage={fetchNextPage}

odd-platform-ui/src/components/Directory/Entities/EntitiesList/EntitiesList.tsx

@@ -1,7 +1,7 @@
 import React, { type FC } from 'react';
 import InfiniteScroll from 'react-infinite-scroll-component';
 import { Grid } from '@mui/material';
-import type { InfiniteQueryObserverResult } from '@tanstack/react-query';
+import type { InfiniteData, InfiniteQueryObserverResult } from '@tanstack/react-query';
 import {
   AppCircularProgress,
   EmptyContentPlaceholder,
@@ -19,7 +19,7 @@ interface EntitiesResultsListProps {
   isEntitiesLoaded: boolean;
   isContentEmpty: boolean;
   fetchNextPage: () => Promise<
-    InfiniteQueryObserverResult<DataSourceEntityList, ErrorState>
+    InfiniteQueryObserverResult<InfiniteData<DataSourceEntityList>, ErrorState>
   >;
 }
 

odd-platform-ui/src/components/shared/elements/AppErrorPage/AppErrorPage.tsx

@@ -10,7 +10,6 @@ interface AppErrorPageProps {
   error?: ErrorState;
   offsetTop?: number;
 }
-
 const AppErrorPage: React.FC<AppErrorPageProps> = ({
   showError,
   error,
@@ -27,7 +26,7 @@ const AppErrorPage: React.FC<AppErrorPageProps> = ({
           </Typography>
         </Grid>
         <Grid item alignItems='center'>
-          <Typography variant='h1'>{error?.statusText || t('Unknown Error')}</Typography>
+          <Typography variant='h1'>{error?.statusText ?? t('Unknown Error')}</Typography>
           <Grid container alignItems='center'>
             <Typography variant='body1'>{t('Return to the')}</Typography>
             <Button text={t('Home Page')} to='/' buttonType='tertiary-m' />

odd-platform-ui/src/components/shared/elements/EntityStatus/StatusSettingsForm/StatusSettingsForm.tsx

@@ -42,7 +42,7 @@ const StatusSettingsForm: FC<StatusSettingsFormProps> = ({
   const { add } = useAppDateTime();
   const {
     mutateAsync: updateStatus,
-    isLoading: isStatusUpdating,
+    isPending: isStatusUpdating,
     isSuccess: isStatusUpdated,
   } = useUpdateDataEntityStatus();
 

odd-platform-ui/src/index.tsx

@@ -29,11 +29,11 @@ declare module 'styled-components' {
 
 const queryClient = new QueryClient({
   queryCache: new QueryCache({
-    onError: async e => {
-      if ((e as Error).message === '401') {
+    onError: (e: unknown) => {
+      if (e instanceof Error && e.message === '401') {
         window.location.reload();
       }
-      await showServerErrorToast(e as Response);
+      showServerErrorToast(e as Response);
     },
   }),
   defaultOptions: {
@@ -42,9 +42,7 @@ const queryClient = new QueryClient({
       refetchOnWindowFocus: false,
     },
     mutations: {
-      async onError(e) {
-        await showServerErrorToast(e as Response);
-      },
+      onError: async (e: unknown) => await showServerErrorToast(e as Response),
     },
   },
 });

odd-platform-ui/src/lib/hooks/api/dataEntity.ts

@@ -1,4 +1,9 @@
-import { useInfiniteQuery, useMutation, useQuery } from '@tanstack/react-query';
+import {
+  type InfiniteData,
+  useInfiniteQuery,
+  useMutation,
+  useQuery,
+} from '@tanstack/react-query';
 import { dataEntityApi } from 'lib/api';
 import { showServerErrorToast, showSuccessToast } from 'lib/errorHandling';
 import type {
@@ -26,7 +31,7 @@ export function useDataEntityMetrics({
     queryKey: ['dataEntityMetrics', dataEntityId],
     queryFn: async () =>
       dataEntityApi.getDataEntityMetrics({ dataEntityId }).catch(err => {
-        showServerErrorToast(err as Response, {
+        showServerErrorToast(err, {
           additionalMessage: 'while loading metrics',
         });
       }),
@@ -41,7 +46,7 @@ export function useDataEntityGroupLineage({ dataEntityId }: { dataEntityId: numb
     queryKey: ['dataEntityGroupLineage', dataEntityId],
     queryFn: () =>
       dataEntityApi.getDataEntityGroupsLineage({ dataEntityGroupId: dataEntityId }),
-    cacheTime: 0,
+    gcTime: 0,
     select: (data): DataEntityGroupLineage =>
       data.items.reduce(
         (memo, lineage) => {
@@ -115,9 +120,15 @@ export function useGetDataEntityGroupItems({
   size,
   query,
 }: UseGetDataEntityGroupItems) {
-  return useInfiniteQuery<DataEntityGroupList, ErrorState, DataEntityGroupList>({
+  return useInfiniteQuery<
+    DataEntityGroupList,
+    ErrorState,
+    InfiniteData<DataEntityGroupList>,
+    ['dataEntityGroupItems', UseGetDataEntityGroupItems],
+    number
+  >({
     queryKey: ['dataEntityGroupItems', { dataEntityGroupId, size, query }],
-    queryFn: async ({ pageParam = 1 }) => {
+    queryFn: async ({ pageParam }) => {
       const response = await dataEntityApi.getDataEntityGroupsItems({
         dataEntityGroupId,
         size,
@@ -127,17 +138,18 @@ export function useGetDataEntityGroupItems({
 
       const totalItems = response.pageInfo.total;
       const totalPageCount = Math.ceil(totalItems / size);
-      let nextPage = pageParam;
+      let nextPage;
 
       if (pageParam < totalPageCount) {
-        nextPage += 1;
+        nextPage = pageParam + 1;
       }
 
       return {
         ...response,
         pageInfo: { ...response.pageInfo, nextPage },
       };
     },
+    initialPageParam: 1,
     getNextPageParam: lastPage => lastPage.pageInfo.nextPage,
   });
 }

odd-platform-ui/src/lib/hooks/api/dataEntityAttachments/dataEntityFiles.ts

@@ -74,9 +74,9 @@ export function useSaveDataEntityFile() {
         uploadId,
       });
     },
-    onSuccess: async () => {
+    onSuccess: () => {
       showSuccessToast({ message: 'File successfully saved!' });
-      await client.invalidateQueries(['dataEntityAttachments']);
+      client.invalidateQueries({ queryKey: ['dataEntityAttachments'] });
     },
   });
 }
@@ -100,7 +100,7 @@ export function useDeleteDataEntityFile() {
       dataEntityAttachmentApi.deleteFile(params),
     onSuccess: async () => {
       showSuccessToast({ message: 'File successfully deleted!' });
-      await client.invalidateQueries(['dataEntityAttachments']);
+      await client.invalidateQueries({ queryKey: ['dataEntityAttachments'] });
     },
   });
 }

odd-platform-ui/src/lib/hooks/api/dataEntityAttachments/dataEntityLinks.ts

@@ -34,7 +34,7 @@ export function useSaveDataEntityLinks() {
       await dataEntityAttachmentApi.saveLinks(params),
     onSuccess: async () => {
       showSuccessToast({ message: 'Links successfully saved!' });
-      await client.invalidateQueries(['dataEntityAttachments']);
+      await client.invalidateQueries({ queryKey: ['dataEntityAttachments'] });
     },
   });
 }
@@ -47,7 +47,7 @@ export function useUpdateDataEntityLink() {
       await dataEntityAttachmentApi.updateLink(params),
     onSuccess: async () => {
       showSuccessToast({ message: 'Link successfully updated!' });
-      await client.invalidateQueries(['dataEntityAttachments']);
+      await client.invalidateQueries({ queryKey: ['dataEntityAttachments'] });
     },
   });
 }
@@ -60,7 +60,7 @@ export function useDeleteDataEntityLink() {
       dataEntityAttachmentApi.deleteLink(params),
     onSuccess: async () => {
       showSuccessToast({ message: 'Link successfully deleted!' });
-      await client.invalidateQueries(['dataEntityAttachments']);
+      await client.invalidateQueries({ queryKey: ['dataEntityAttachments'] });
     },
   });
 }