Merge pull request #276 from jaredh159/update-react-query

dash/app/package.json

@@ -23,7 +23,7 @@
     "@shared/string": "workspace:*",
     "@shared/tailwind": "workspace:*",
     "@shared/ts-utils": "workspace:*",
-    "@tanstack/react-query": "4.29.12",
+    "@tanstack/react-query": "5.14.0",
     "classnames": "^2.3.1",
     "graphql": "^16.5.0",
     "immer": "10.0.2",

dash/app/src/components/routes/AdminSettings.tsx

@@ -74,9 +74,9 @@ const AdminSettings: React.FC = () => {
     },
   );
 
-  const notificationProps = makeNotificationProps(state, saveNotification.isLoading);
+  const notificationProps = makeNotificationProps(state, saveNotification.isPending);
 
-  if (query.isLoading) {
+  if (query.isPending) {
     return <Loading />;
   }
 

dash/app/src/components/routes/CombinedUsersActivityFeed.tsx

@@ -35,7 +35,7 @@ const CombinedUsersActivityFeedRoute: React.FC = () => {
     },
   );
 
-  if (query.isLoading) {
+  if (query.isPending) {
     return <Loading />;
   }
 

dash/app/src/components/routes/CombinedUsersActivitySummaries.tsx

@@ -9,7 +9,7 @@ const CombinedUsersActivitySummariesRoute: React.FC = () => {
     Current.api.combinedUsersActivitySummaries(entireDays(14)),
   );
 
-  if (query.isLoading) {
+  if (query.isPending) {
     return <Loading />;
   }
 

dash/app/src/components/routes/Computer.tsx

@@ -34,7 +34,7 @@ const Computer: React.FC = () => {
   const [releaseChannel, setReleaseChannel] = useState<ReleaseChannel>(`stable`);
 
   const zip = useZip(getComputer, latestAppVersions);
-  if (zip.isLoading) return <Loading />;
+  if (zip.isPending) return <Loading />;
   if (zip.isError) return <ApiErrorMessage error={zip.error} />;
   const [deviceData, appVersionsData] = zip.data;
 

dash/app/src/components/routes/Computers.tsx

@@ -6,7 +6,7 @@ import Current from '../../environment';
 const Computers: React.FC = () => {
   const query = useQuery(Key.devices, Current.api.getDevices);
 
-  if (query.isLoading) {
+  if (query.isPending) {
     return <Loading />;
   }
 

dash/app/src/components/routes/Dashboard.tsx

@@ -11,7 +11,7 @@ const DashboardRoute: React.FC = () => {
     Current.api.createPendingAppConnection({ userId }),
   );
 
-  if (widgetsQuery.isLoading) {
+  if (widgetsQuery.isPending) {
     return <Loading />;
   }
 

dash/app/src/components/routes/HollandTalk.tsx

@@ -57,7 +57,7 @@ const HollandTalk: React.FC = () => {
         >
           Submit <i className="fas fa-arrow-right ml-2" />
         </Button>
-        {subscription.isLoading && <Loading className="mt-6" />}
+        {subscription.isPending && <Loading className="mt-6" />}
         {!emailValid && subscription.isIdle && (
           <Message
             heading="Invalid email address"

dash/app/src/components/routes/Keychain.tsx

@@ -104,15 +104,15 @@ const Keychain: React.FC = () => {
       setDescription={(description) => dispatch({ type: `updateDesc`, description })}
       deleteKeychain={deleteKeychain}
       deleteKey={deleteKey}
-      saveButtonDisabled={saveKeychain.isLoading || !isDirty(editableKeychain)}
+      saveButtonDisabled={saveKeychain.isPending || !isDirty(editableKeychain)}
       onSave={() => saveKeychain.mutate(editableKeychain)}
       beginEditKey={(id) => dispatch({ type: `beginEditKey`, id })}
       updateEditingKey={(event) => dispatch({ type: `updateEditingKey`, event })}
       dismissEditKeyModal={() => dispatch({ type: `cancelEditKey` })}
       onKeySave={() => saveKey.mutate(undefined)}
       onCreateNewKey={() => dispatch({ type: `createNewKey` })}
       keyModalSaveButtonDisabled={
-        toKeyRecord(state.editingKey) === null || saveKey.isLoading
+        toKeyRecord(state.editingKey) === null || saveKey.isPending
       }
     />
   );

dash/app/src/components/routes/Keychains.tsx

@@ -9,7 +9,7 @@ const Keychains: React.FC = () => {
     invalidating: [Key.adminKeychains],
   });
 
-  if (query.isLoading) {
+  if (query.isPending) {
     return <Loading />;
   }
 

dash/app/src/components/routes/Login.tsx

@@ -28,7 +28,7 @@ export const Login: React.FC = () => {
     return <Navigate to={redirectUrl ?? `/`} replace />;
   }
 
-  if (loginMutation.isLoading || requestMagicLink.isLoading) {
+  if (loginMutation.isPending || requestMagicLink.isPending) {
     return <FullscreenModalForm state="ongoing" />;
   }
 

dash/app/src/components/routes/MagicLink.tsx

@@ -30,7 +30,7 @@ const MagicLink: React.FC = () => {
     return <FullscreenModalForm state="failed" error={error} />;
   }
 
-  if (query.isLoading) {
+  if (query.isPending) {
     return <FullscreenModalForm state="ongoing" />;
   }
 

dash/app/src/components/routes/Signup.tsx

@@ -9,7 +9,7 @@ const Signup: React.FC = () => {
   const [password, setPassword] = useState(``);
   const signup = useMutation(() => Current.api.signup({ email, password }));
 
-  if (signup.isLoading) {
+  if (signup.isPending) {
     return <FullscreenModalForm state="ongoing" />;
   }
 

dash/app/src/components/routes/SuspendFilter.tsx

@@ -51,7 +51,7 @@ const SuspendFilter: React.FC = () => {
     { invalidating: [queryKey], toast: `update:suspend-filter-request` },
   );
 
-  if (query.isLoading) {
+  if (query.isPending) {
     return <Loading />;
   }
 
@@ -95,7 +95,7 @@ const SuspendFilter: React.FC = () => {
         label: `Grant`,
         action: () => update.mutate(`accepted`),
         disabled:
-          update.isLoading ||
+          update.isPending ||
           update.isSuccess ||
           (state.grantedDurationInSeconds === `custom` &&
             (Number.isNaN(Number(state.grantedCustomDurationInMinutes)) ||

dash/app/src/components/routes/UnlockRequest/DenyUnlockRequest.tsx

@@ -23,7 +23,7 @@ const DenyUnlockRequest: React.FC = () => {
     });
   });
 
-  if (query.isLoading || deny.isLoading) {
+  if (query.isPending || deny.isPending) {
     return <LoadingModal />;
   }
 

dash/app/src/components/routes/UnlockRequest/EditUnlockRequestKey.tsx

@@ -45,7 +45,7 @@ const EditUnlockRequestKey: React.FC = () => {
     return <ErrorModal error={query.error} />;
   }
 
-  if (query.isLoading || accept.isLoading || !key) {
+  if (query.isPending || accept.isPending || !key) {
     return <LoadingModal />;
   }
 

dash/app/src/components/routes/UnlockRequest/FetchUnlockRequest.tsx

@@ -8,7 +8,7 @@ const FetchUnlockRequest: React.FC = () => {
   const navigate = useNavigate();
   const query = useUnlockRequest(id);
 
-  if (query.isLoading) {
+  if (query.isPending) {
     return <LoadingModal />;
   }
 

dash/app/src/components/routes/UnlockRequest/ReviewUnlockRequest.tsx

@@ -19,7 +19,7 @@ const ReviewUnlockRequestRoute: React.FC = () => {
   useUser(userId);
   useSelectableKeychains();
 
-  if (query.isLoading) {
+  if (query.isPending) {
     return <LoadingModal />;
   }
 

dash/app/src/components/routes/UnlockRequest/SelectUnlockRequestKeychain.tsx

@@ -9,7 +9,7 @@ const SelectUnlockRequestKeychain: React.FC = () => {
   const navigate = useNavigate();
   const query = useZip(useSelectableKeychains(), useUser(userId));
 
-  if (query.isLoading) {
+  if (query.isPending) {
     return <LoadingModal />;
   }
 

dash/app/src/components/routes/UnlockRequest/UserUnlockRequests.tsx

@@ -11,7 +11,7 @@ const UserUnlockRequests: React.FC = () => {
     useUser(id),
   );
 
-  if (query.isLoading) {
+  if (query.isPending) {
     return <Loading />;
   }
 

dash/app/src/components/routes/UnlockRequest/UsersUnlockRequests.tsx

@@ -6,7 +6,7 @@ import { useQuery, Key } from '../../../hooks';
 const UsersUnlockRequests: React.FC = () => {
   const query = useQuery(Key.combinedUsersUnlockRequests, Current.api.getUnlockRequests);
 
-  if (query.isLoading) {
+  if (query.isPending) {
     return <Loading />;
   }
 

dash/app/src/components/routes/User.tsx

@@ -110,7 +110,7 @@ const UserRoute: React.FC = () => {
       addDeviceRequest={ReqState.fromMutation(addDevice)}
       deleteDevice={deleteDevice}
       saveButtonDisabled={
-        !isDirty(state.user) || draft.name.trim() === `` || saveUser.isLoading
+        !isDirty(state.user) || draft.name.trim() === `` || saveUser.isPending
       }
       onSave={() => saveUser.mutate(user)}
       onAddKeychainClicked={() => dispatch({ type: `setAddingKeychain`, keychain: null })}

dash/app/src/components/routes/UserActivityFeed.tsx

@@ -35,7 +35,7 @@ const UserActivityFeedRoute: React.FC = () => {
     },
   );
 
-  if (query.isLoading) {
+  if (query.isPending) {
     return <Loading />;
   }
 

dash/app/src/components/routes/UserActivitySummaries.tsx

@@ -12,7 +12,7 @@ const UserActivitySummariesRoute: React.FC = () => {
     Current.api.userActivitySummaries({ userId, dateRanges: entireDays(14) }),
   );
 
-  if (getSummaries.isLoading) {
+  if (getSummaries.isPending) {
     return <Loading />;
   }
 

dash/app/src/components/routes/Users.tsx

@@ -13,7 +13,7 @@ const Users: React.FC = () => {
     Current.api.createPendingAppConnection({ userId }),
   );
 
-  if (query.isLoading) {
+  if (query.isPending) {
     return <Loading />;
   }
 

dash/app/src/components/routes/VerifySignupEmail.tsx

@@ -37,7 +37,7 @@ const VerifySignupEmail: React.FC = () => {
     );
   }
 
-  if (verification.isLoading) {
+  if (verification.isPending) {
     return <FullscreenModalForm state="ongoing" />;
   }
 

dash/app/src/hooks/mutation.ts

@@ -58,7 +58,7 @@ export function useMutation<T, V>(
     onSettled() {
       if (options.invalidating) {
         options.invalidating.forEach((key) =>
-          queryClient.invalidateQueries(key.segments),
+          queryClient.invalidateQueries({ queryKey: key.segments }),
         );
       }
     },
@@ -79,7 +79,7 @@ export function useConfirmableDelete(
   entityType: DeleteEntity.Input['type'],
   options: MutationOptions<SuccessOutput> & { id?: UUID } = {},
 ): ConfirmableEntityAction<UUID | void> & {
-  state: 'idle' | 'loading' | 'error' | 'success';
+  state: 'idle' | 'pending' | 'error' | 'success';
 } {
   const [stateId, setStateId] = useState<UUID | undefined>();
   const mutation = useDeleteEntity(entityType, options);

dash/app/src/hooks/query.ts

@@ -39,7 +39,7 @@ export function useOptimism(): {
   return {
     update<T>(queryKey: QueryKey<T>, to: T) {
       // cancel already in-flight queries that would overwrite optimistic update
-      queryClient.cancelQueries(queryKey.segments);
+      queryClient.cancelQueries({ queryKey: queryKey.segments });
       // update the query data to the new value
       queryClient.setQueryData(queryKey.segments, to);
     },
@@ -63,7 +63,7 @@ export function useFireAndForget<T>(
     enabled: options.when,
     retry: false,
     retryOnMount: false,
-    cacheTime: Infinity,
+    gcTime: Infinity,
     retryDelay: Infinity,
     refetchOnMount: false,
     refetchOnWindowFocus: false,

dash/app/src/hooks/zip.ts

@@ -4,20 +4,20 @@ import type { QueryResult } from './query';
 type ZipQueryResult<T> =
   | {
       status: `loading`;
-      isLoading: true;
+      isPending: true;
       isError: false;
       isSuccess: false;
     }
   | {
       status: `error`;
-      isLoading: false;
+      isPending: false;
       isError: true;
       isSuccess: false;
       error: PqlError;
     }
   | {
       status: `success`;
-      isLoading: false;
+      isPending: false;
       isError: false;
       isSuccess: true;
       data: T;
@@ -48,7 +48,7 @@ export function useZip<T1, T2, T3>(
   if (query3?.isError) {
     return error(query3.error);
   }
-  if (query1.isLoading || query2.isLoading || query3?.isLoading) {
+  if (query1.isPending || query2.isPending || query3?.isPending) {
     return loading();
   }
   if (query3) {
@@ -61,7 +61,7 @@ export function useZip<T1, T2, T3>(
 export function loading(): ZipQueryResult<any> {
   return {
     status: `loading`,
-    isLoading: true,
+    isPending: true,
     isError: false,
     isSuccess: false,
   };
@@ -70,7 +70,7 @@ export function loading(): ZipQueryResult<any> {
 function error(error: PqlError): ZipQueryResult<any> {
   return {
     status: `error`,
-    isLoading: false,
+    isPending: false,
     isError: true,
     isSuccess: false,
     error,
@@ -80,7 +80,7 @@ function error(error: PqlError): ZipQueryResult<any> {
 function success<T>(data: T): ZipQueryResult<T> {
   return {
     status: `success`,
-    isLoading: false,
+    isPending: false,
     isError: false,
     isSuccess: true,
     data,

dash/app/src/lib/ReqState.ts

@@ -6,9 +6,9 @@ import { ensurePqlError } from '../pairql/query';
 export default class ReqState {
   static fromQuery<T>(query: QueryResult<T>): RequestState<T> {
     // disabled queries (waiting for enabled: true) are in this first state
-    if (query.isLoading && !query.isFetching) {
+    if (query.isPending && !query.isFetching) {
       return { state: `idle` };
-    } else if (query.isLoading) {
+    } else if (query.isPending) {
       return { state: `ongoing` };
     } else if (query.isError) {
       return { state: `failed`, error: ensurePqlError(query.error) };
@@ -21,7 +21,7 @@ export default class ReqState {
     switch (mutation.status) {
       case `idle`:
         return { state: `idle` };
-      case `loading`:
+      case `pending`:
         return { state: `ongoing` };
       case `error`:
         return { state: `failed`, error: ensurePqlError(mutation.error) };