beyondessential · hrazasalman · Sep 10, 2024 · Sep 2, 2024 · Sep 3, 2024 · Sep 3, 2024
diff --git a/packages/admin-panel/src/VizBuilderApp/api/queries/useReportPreview.js b/packages/admin-panel/src/VizBuilderApp/api/queries/useReportPreview.js
@@ -3,7 +3,7 @@
  *  Copyright (c) 2017 - 2021 Beyond Essential Systems Pty Ltd
  */
 import moment from 'moment';
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { post } from '../api';
 import { DEFAULT_REACT_QUERY_OPTIONS } from '../constants';
 

diff --git a/packages/datatrak-web/src/views/VerifyEmailPage.tsx b/packages/datatrak-web/src/views/VerifyEmailPage.tsx
@@ -4,7 +4,7 @@
  */
 import React, { useState } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { EMAIL_VERIFICATION_STATUS } from '@tupaia/ui-components';
 import { get } from '../api';
 import { LoginPage } from '.';

diff --git a/packages/tupaia-web/package.json b/packages/tupaia-web/package.json
@@ -26,6 +26,7 @@
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "^4.0.0-alpha.57",
     "@material-ui/styles": "^4.9.10",
+    "@tanstack/react-query": "4.36.1",
     "@tupaia/types": "workspace:*",
     "@tupaia/ui-chart-components": "workspace:*",
     "@tupaia/ui-components": "workspace:*",
@@ -40,7 +41,6 @@
     "react-dom": "^16.13.1",
     "react-hook-form": "^6.15.1",
     "react-leaflet": "^3.2.1",
-    "react-query": "^3.39.3",
     "react-router": "6.3.0",
     "react-router-dom": "6.3.0",
     "react-slick": "^0.30.2",

diff --git a/packages/tupaia-web/src/AppProviders.tsx b/packages/tupaia-web/src/AppProviders.tsx
@@ -3,7 +3,7 @@
  * Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
  */
 import React, { ReactNode } from 'react';
-import { QueryClient, QueryClientProvider } from 'react-query';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ThemeProvider as MuiThemeProvider, StylesProvider } from '@material-ui/core/styles';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import { ThemeProvider } from 'styled-components';

diff --git a/packages/tupaia-web/src/api/mutations/useDownloadFiles.ts b/packages/tupaia-web/src/api/mutations/useDownloadFiles.ts
@@ -3,7 +3,7 @@
  * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
-import { useMutation } from 'react-query';
+import { useMutation } from '@tanstack/react-query';
 import downloadJs from 'downloadjs';
 import { getUniqueFileNameParts } from '@tupaia/utils';
 import { get } from '../api';

diff --git a/packages/tupaia-web/src/api/mutations/useDownloadRawData.ts b/packages/tupaia-web/src/api/mutations/useDownloadRawData.ts
@@ -2,7 +2,7 @@
  * Tupaia
  *  Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
  */
-import { useMutation } from 'react-query';
+import { useMutation } from '@tanstack/react-query';
 import downloadJs from 'downloadjs';
 import { get } from '..';
 

diff --git a/packages/tupaia-web/src/api/mutations/useEmailDashboard.tsx b/packages/tupaia-web/src/api/mutations/useEmailDashboard.tsx
@@ -2,7 +2,7 @@
  * Tupaia
  *  Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
  */
-import { useMutation } from 'react-query';
+import { useMutation } from '@tanstack/react-query';
 import { TupaiaWebEmailDashboardRequest } from '@tupaia/types';
 import { API_URL, post } from '../api';
 import { Dashboard, DashboardItem, EntityCode, ProjectCode } from '../../types';

diff --git a/packages/tupaia-web/src/api/mutations/useExportDashboard.tsx b/packages/tupaia-web/src/api/mutations/useExportDashboard.tsx
@@ -2,7 +2,7 @@
  * Tupaia
  *  Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
  */
-import { useMutation } from 'react-query';
+import { useMutation } from '@tanstack/react-query';
 import { TupaiaWebExportDashboardRequest } from '@tupaia/types';
 import { API_URL, post } from '../api';
 import { DashboardName, EntityCode, ProjectCode } from '../../types';

diff --git a/packages/tupaia-web/src/api/mutations/useExportMapOverlay.ts b/packages/tupaia-web/src/api/mutations/useExportMapOverlay.ts
@@ -2,7 +2,7 @@
  * Tupaia
  *  Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
-import { useMutation } from 'react-query';
+import { useMutation } from '@tanstack/react-query';
 import { LatLng } from 'leaflet';
 import { MapOverlay } from '@tupaia/types';
 import { LegendProps } from '@tupaia/ui-map-components';

diff --git a/packages/tupaia-web/src/api/mutations/useExportToExcel.ts b/packages/tupaia-web/src/api/mutations/useExportToExcel.ts
@@ -2,7 +2,7 @@
  * Tupaia
  *  Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
  */
-import { useMutation } from 'react-query';
+import { useMutation } from '@tanstack/react-query';
 import { getBrowserTimeZone } from '@tupaia/utils';
 import { DashboardItem, EntityCode, ProjectCode } from '../../types';
 import { get } from '..';

diff --git a/packages/tupaia-web/src/api/mutations/useLogin.ts b/packages/tupaia-web/src/api/mutations/useLogin.ts
@@ -3,7 +3,7 @@
  *  Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
  */
 
-import { useMutation, useQueryClient } from 'react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { Location, useLocation, useNavigate } from 'react-router';
 import { gaEvent, useModal } from '../../utils';
 import { post } from '../api';

diff --git a/packages/tupaia-web/src/api/mutations/useLogout.ts b/packages/tupaia-web/src/api/mutations/useLogout.ts
@@ -3,7 +3,7 @@
  *  Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
  */
 
-import { useMutation, useQueryClient } from 'react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { post } from '../api';
 import { gaEvent } from '../../utils';
@@ -16,7 +16,7 @@ export const useLogout = () => {
   const queryClient = useQueryClient();
   const navigate = useNavigate();
 
-  return useMutation('logout', () => post('logout'), {
+  return useMutation(['logout'], () => post('logout'), {
     onMutate: () => {
       gaEvent('User', 'Log out');
     },

diff --git a/packages/tupaia-web/src/api/mutations/useOneTimeLogin.ts b/packages/tupaia-web/src/api/mutations/useOneTimeLogin.ts
@@ -3,7 +3,7 @@
  *  Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
  */
 
-import { useMutation, useQueryClient } from 'react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { post } from '../api';
 
 type LoginCredentials = {

diff --git a/packages/tupaia-web/src/api/mutations/useRegister.ts b/packages/tupaia-web/src/api/mutations/useRegister.ts
@@ -3,7 +3,7 @@
  *  Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
  */
 
-import { useMutation } from 'react-query';
+import { useMutation } from '@tanstack/react-query';
 import { post } from '../api';
 
 // Todo: replace with request body type from backend

diff --git a/packages/tupaia-web/src/api/mutations/useRequestCountryAccess.ts b/packages/tupaia-web/src/api/mutations/useRequestCountryAccess.ts
@@ -3,7 +3,7 @@
  *  Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
  */
 
-import { useMutation, useQueryClient } from 'react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { useParams, useSearchParams } from 'react-router-dom';
 import { post } from '../api';
 import { URL_SEARCH_PARAMS } from '../../constants';

diff --git a/packages/tupaia-web/src/api/mutations/useRequestResetPassword.ts b/packages/tupaia-web/src/api/mutations/useRequestResetPassword.ts
@@ -3,7 +3,7 @@
  *  Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
  */
 
-import { useMutation } from 'react-query';
+import { useMutation } from '@tanstack/react-query';
 import { post } from '../api';
 
 type ResetPasswordParams = {

diff --git a/packages/tupaia-web/src/api/mutations/useResendVerificationEmail.ts b/packages/tupaia-web/src/api/mutations/useResendVerificationEmail.ts
@@ -3,7 +3,7 @@
  *  Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
  */
 
-import { useMutation } from 'react-query';
+import { useMutation } from '@tanstack/react-query';
 import { post } from '../api';
 
 type RequestBody = {

diff --git a/packages/tupaia-web/src/api/mutations/useResetPassword.ts b/packages/tupaia-web/src/api/mutations/useResetPassword.ts
@@ -3,7 +3,7 @@
  *  Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
  */
 
-import { useMutation } from 'react-query';
+import { useMutation } from '@tanstack/react-query';
 import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
 import { post } from '../api';
 import { URL_SEARCH_PARAMS } from '../../constants';

diff --git a/packages/tupaia-web/src/api/mutations/useSubscribeDashboard.ts b/packages/tupaia-web/src/api/mutations/useSubscribeDashboard.ts
@@ -3,7 +3,7 @@
  *  Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
  */
 
-import { useMutation } from 'react-query';
+import { useMutation } from '@tanstack/react-query';
 import { TupaiaWebSubscribeDashboardRequest } from '@tupaia/types';
 import { post } from '../api';
 

diff --git a/packages/tupaia-web/src/api/mutations/useUnsubscribeDashboard.ts b/packages/tupaia-web/src/api/mutations/useUnsubscribeDashboard.ts
@@ -3,7 +3,7 @@
  *  Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
  */
 
-import { useMutation } from 'react-query';
+import { useMutation } from '@tanstack/react-query';
 import { TupaiaWebUnsubscribeDashboardRequest } from '@tupaia/types';
 import { put } from '../api';
 

diff --git a/packages/tupaia-web/src/api/mutations/useUnsubscribeDashboardMailingList.ts b/packages/tupaia-web/src/api/mutations/useUnsubscribeDashboardMailingList.ts
@@ -3,7 +3,7 @@
  *  Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
  */
 
-import { useMutation } from 'react-query';
+import { useMutation } from '@tanstack/react-query';
 import { TupaiaWebUnsubscribeDashboardMailingListRequest } from '@tupaia/types';
 import { put } from '../api';
 

diff --git a/packages/tupaia-web/src/api/queries/useDashboards.ts b/packages/tupaia-web/src/api/queries/useDashboards.ts
@@ -2,7 +2,7 @@
  * Tupaia
  *  Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
  */
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { TupaiaWebDashboardsRequest } from '@tupaia/types';
 import { EntityCode, ProjectCode } from '../../types';
 import { get } from '../api';

diff --git a/packages/tupaia-web/src/api/queries/useEntities.ts b/packages/tupaia-web/src/api/queries/useEntities.ts
@@ -3,7 +3,7 @@
  *  Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
  */
 import { AxiosRequestConfig } from 'axios';
-import { useQuery, QueryObserverOptions } from 'react-query';
+import { useQuery, QueryObserverOptions } from '@tanstack/react-query';
 import { get } from '../api';
 import { Entity } from '../../types';
 

diff --git a/packages/tupaia-web/src/api/queries/useEntity.ts b/packages/tupaia-web/src/api/queries/useEntity.ts
@@ -3,7 +3,7 @@
  *  Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
  */
 
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { useLocation } from 'react-router';
 import { EntityCode, ProjectCode, Entity } from '../../types';
 import { get } from '../api';

diff --git a/packages/tupaia-web/src/api/queries/useEntityAncestors.ts b/packages/tupaia-web/src/api/queries/useEntityAncestors.ts
@@ -3,7 +3,7 @@
  *  Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
  */
 
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { Entity, EntityCode, ProjectCode } from '../../types';
 import { get } from '../api';
 

diff --git a/packages/tupaia-web/src/api/queries/useEntitySearch.ts b/packages/tupaia-web/src/api/queries/useEntitySearch.ts
@@ -3,7 +3,7 @@
  *  Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
  */
 
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { ProjectCode, Entity } from '../../types';
 import { get } from '../api';
 import { useDebounce } from '../../utils';

diff --git a/packages/tupaia-web/src/api/queries/useLandingPage.ts b/packages/tupaia-web/src/api/queries/useLandingPage.ts
@@ -4,7 +4,7 @@
  *
  */
 
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { useParams } from 'react-router';
 import { get } from '../api';
 import { SingleLandingPage } from '../../types';

diff --git a/packages/tupaia-web/src/api/queries/useMapOverlayReport.ts b/packages/tupaia-web/src/api/queries/useMapOverlayReport.ts
@@ -3,7 +3,7 @@
  *  Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
  */
 import moment, { Moment } from 'moment';
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { momentToDateString } from '@tupaia/utils';
 import { TupaiaWebMapOverlaysRequest } from '@tupaia/types';
 import {

diff --git a/packages/tupaia-web/src/api/queries/useMapOverlays.ts b/packages/tupaia-web/src/api/queries/useMapOverlays.ts
@@ -3,7 +3,7 @@
  *  Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
  */
 import { useSearchParams } from 'react-router-dom';
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { POLYGON_MEASURE_TYPES } from '@tupaia/ui-map-components';
 import { TupaiaWebMapOverlaysRequest } from '@tupaia/types';
 import { get } from '../api';

diff --git a/packages/tupaia-web/src/api/queries/useProject.ts b/packages/tupaia-web/src/api/queries/useProject.ts
@@ -4,7 +4,7 @@
  *
  */
 
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { SingleProject } from '../../types';
 import { get } from '../api';
 import { useUser } from './useUser';

diff --git a/packages/tupaia-web/src/api/queries/useProjectCountryAccessList.ts b/packages/tupaia-web/src/api/queries/useProjectCountryAccessList.ts
@@ -3,7 +3,7 @@
  * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { ProjectCountryAccessListRequest } from '@tupaia/types';
 import { get } from '../api';
 import { ProjectCode } from '../../types';

diff --git a/packages/tupaia-web/src/api/queries/useProjects.ts b/packages/tupaia-web/src/api/queries/useProjects.ts
@@ -3,12 +3,12 @@
  *  Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
  */
 
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { get } from '../api';
 
 export const useProjects = () => {
   return useQuery(
-    'projects',
+    ['projects'],
     () =>
       get('projects', {
         params: {

diff --git a/packages/tupaia-web/src/api/queries/useReport.ts b/packages/tupaia-web/src/api/queries/useReport.ts
@@ -4,7 +4,7 @@
  *
  */
 import moment, { Moment } from 'moment';
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { formatDateForApi, getBrowserTimeZone } from '@tupaia/utils';
 import { TupaiaWebReportRequest } from '@tupaia/types';
 import { get } from '../api';

diff --git a/packages/tupaia-web/src/api/queries/useUser.ts b/packages/tupaia-web/src/api/queries/useUser.ts
@@ -3,13 +3,13 @@
  *  Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
  */
 
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { TupaiaWebUserRequest } from '@tupaia/types';
 import { get } from '../api';
 
 export const useUser = () => {
   const userResponse = useQuery(
-    'getUser',
+    ['getUser'],
     (): Promise<TupaiaWebUserRequest.ResBody> => get('getUser'),
   );
   const { data: user } = userResponse;

diff --git a/packages/tupaia-web/src/components/FetchErrorAlert.tsx b/packages/tupaia-web/src/components/FetchErrorAlert.tsx
@@ -7,7 +7,7 @@ import React from 'react';
 import styled from 'styled-components';
 import { Typography, Link } from '@material-ui/core';
 import { Alert as BaseAlert, TextButton } from '@tupaia/ui-components';
-import { UseQueryResult } from 'react-query';
+import { UseQueryResult } from '@tanstack/react-query';
 
 const ErrorLink = styled(Link)`
   color: inherit;

diff --git a/packages/tupaia-web/src/features/DashboardItem/DashboardItemContext.ts b/packages/tupaia-web/src/features/DashboardItem/DashboardItemContext.ts
@@ -4,7 +4,7 @@
  */
 
 import { createContext } from 'react';
-import { UseQueryResult } from 'react-query';
+import { UseQueryResult } from '@tanstack/react-query';
 import { DashboardItemConfig, DashboardItemReport } from '@tupaia/types';
 import { DashboardItem } from '../../types';
 

diff --git a/packages/tupaia-web/src/features/Map/utils/useDefaultMapOverlay.ts b/packages/tupaia-web/src/features/Map/utils/useDefaultMapOverlay.ts
@@ -4,7 +4,7 @@
  */
 
 import { useEffect } from 'react';
-import { useQueryClient } from 'react-query';
+import { useQueryClient } from '@tanstack/react-query';
 import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
 import { useMapOverlays, useProject } from '../../../api/queries';
 import {

diff --git a/packages/tupaia-web/src/features/Map/utils/useMapOverlayTableData.ts b/packages/tupaia-web/src/features/Map/utils/useMapOverlayTableData.ts
@@ -110,7 +110,7 @@ export const useMapOverlayTableData = ({
     isLoading,
     isFetched,
     isFetching,
-    isIdle,
+    fetchStatus,
     isPreviousData,
     error: mapOverlayReportError,
     refetch: refetchMapOverlayReport,
@@ -134,7 +134,7 @@ export const useMapOverlayTableData = ({
     hiddenValues: hiddenValues ? hiddenValues : {},
   });
 
-  const loadingData = isLoading || isFetching || (!isFetched && !isIdle);
+  const loadingData = isLoading || isFetching || (!isFetched && fetchStatus !== 'idle');
 
   const isLoadingDifferentMeasureLevel =
     (!isPreviousData || data?.measureLevel !== selectedOverlay?.measureLevel) && loadingData;

diff --git a/packages/tupaia-web/src/types/react-query.d.ts b/packages/tupaia-web/src/types/react-query.d.ts
@@ -1,9 +1,9 @@
-import { UseQueryResult as ReactQueryUseQueryResult } from 'react-query';
+import { UseQueryResult as ReactQueryUseQueryResult } from '@tanstack/react-query';
 
-declare module 'react-query' {
+declare module '@tanstack/react-query' {
   export type UseQueryResult = Omit<ReactQueryUseQueryResult, 'error'> & {
     error?: ReactQueryUseQueryResult['error'] & {
       code?: number;
-    }; // override this to make code a valid type, as it is not present in types with react-query
+    }; // override this to make code a valid type, as it is not present in types with @tanstack/react-query
   };
 }