refactor: remove suspense queries

Author: joshunrau

apps/web/src/features/admin/hooks/useGroupsQuery.ts

@@ -1,9 +1,9 @@
 import { $Group } from '@opendatacapture/schemas/group';
-import { useSuspenseQuery } from '@tanstack/react-query';
+import { useQuery } from '@tanstack/react-query';
 import axios from 'axios';
 
 export function useGroupsQuery() {
-  return useSuspenseQuery({
+  return useQuery({
     queryFn: async () => {
       const response = await axios.get('/v1/groups');
       return $Group.array().parse(response.data);

apps/web/src/features/admin/hooks/useUsersQuery.ts

@@ -1,9 +1,9 @@
 import { $User } from '@opendatacapture/schemas/user';
-import { useSuspenseQuery } from '@tanstack/react-query';
+import { useQuery } from '@tanstack/react-query';
 import axios from 'axios';
 
 export function useUsersQuery() {
-  return useSuspenseQuery({
+  return useQuery({
     queryFn: async () => {
       const response = await axios.get('/v1/users');
       return $User.array().parse(response.data);

apps/web/src/features/admin/pages/CreateUserPage.tsx

@@ -77,7 +77,7 @@ export const CreateUserPage = () => {
               groupIds: {
                 kind: 'set',
                 label: t('common.groups'),
-                options: Object.fromEntries(groupsQuery.data.map((group) => [group.id, group.name])),
+                options: Object.fromEntries((groupsQuery.data ?? []).map((group) => [group.id, group.name])),
                 variant: 'listbox'
               }
             }

apps/web/src/features/admin/pages/ManageGroupsPage.tsx

@@ -15,11 +15,11 @@ export const ManageGroupsPage = () => {
   const groupsQuery = useGroupsQuery();
   const deleteGroupMutation = useDeleteGroupMutation();
   const [selectedGroup, setSelectedGroup] = useState<Group | null>(null);
-  const [groups, setGroups] = useState<Group[]>(groupsQuery.data);
+  const [groups, setGroups] = useState<Group[]>(groupsQuery.data ?? []);
   const [searchTerm, setSearchTerm] = useState('');
 
   useEffect(() => {
-    setGroups(groupsQuery.data.filter((group) => group.name.toLowerCase().includes(searchTerm.toLowerCase())));
+    setGroups((groupsQuery.data ?? []).filter((group) => group.name.toLowerCase().includes(searchTerm.toLowerCase())));
   }, [groupsQuery.data, searchTerm]);
 
   return (

apps/web/src/features/admin/pages/ManageUsersPage.tsx

@@ -17,12 +17,12 @@ export const ManageUsersPage = () => {
   const { t } = useTranslation();
   const usersQuery = useUsersQuery();
   const deleteUserMutation = useDeleteUserMutation();
-  const [users, setUsers] = useState<User[]>(usersQuery.data);
+  const [users, setUsers] = useState<User[]>(usersQuery.data ?? []);
   const [selectedUser, setSelectedUser] = useState<null | User>(null);
   const [searchTerm, setSearchTerm] = useState('');
 
   useEffect(() => {
-    setUsers(usersQuery.data.filter((user) => user.username.toLowerCase().includes(searchTerm.toLowerCase())));
+    setUsers((usersQuery.data ?? []).filter((user) => user.username.toLowerCase().includes(searchTerm.toLowerCase())));
   }, [usersQuery.data, searchTerm]);
 
   const currentUserIsSelected = selectedUser?.username === currentUser?.username;

apps/web/src/features/datahub/components/AssignmentsTable.tsx

@@ -20,7 +20,9 @@ export const AssignmentsTable = ({ assignments, onSelection }: AssignmentTablePr
   const instrumentInfoQuery = useInstrumentInfoQuery();
 
   useEffect(() => {
-    setInstruments(Object.fromEntries(instrumentInfoQuery.data.map((instrument) => [instrument.id, instrument])));
+    setInstruments(
+      Object.fromEntries((instrumentInfoQuery.data ?? []).map((instrument) => [instrument.id, instrument]))
+    );
   }, [instrumentInfoQuery.data]);
 
   return (

apps/web/src/features/datahub/hooks/useInstrumentVisualization.ts

@@ -103,7 +103,7 @@ export function useInstrumentVisualization({ params }: UseInstrumentVisualizatio
 
   const instrumentOptions: { [key: string]: string } = useMemo(() => {
     const options: { [key: string]: string } = {};
-    for (const instrument of instrumentInfoQuery.data) {
+    for (const instrument of instrumentInfoQuery.data ?? []) {
       options[instrument.id] = instrument.details.title;
     }
     return options;

apps/web/src/features/datahub/hooks/useSubjectsQuery.ts

@@ -1,5 +1,5 @@
 import { $Subject } from '@opendatacapture/schemas/subject';
-import { useSuspenseQuery } from '@tanstack/react-query';
+import { useQuery } from '@tanstack/react-query';
 import axios from 'axios';
 
 type UseSubjectsQueryOptions = {
@@ -9,7 +9,7 @@ type UseSubjectsQueryOptions = {
 };
 
 export function useSubjectsQuery({ params }: UseSubjectsQueryOptions) {
-  return useSuspenseQuery({
+  return useQuery({
     queryFn: async () => {
       const response = await axios.get('/v1/subjects', { params });
       return $Subject.array().parse(response.data);

apps/web/src/features/datahub/pages/DataHubPage.tsx

@@ -116,7 +116,7 @@ export const DataHubPage = () => {
             </div>
           </div>
           <MasterDataTable
-            data={data}
+            data={data ?? []}
             onSelect={(subject) => {
               navigate(`${subject.id}/assignments`);
             }}

apps/web/src/features/datahub/pages/SubjectAssignmentsPage.tsx

@@ -36,7 +36,7 @@ export const SubjectAssignmentsPage = () => {
   const instrumentInfoQuery = useInstrumentInfoQuery();
 
   const instrumentOptions = Object.fromEntries(
-    instrumentInfoQuery.data
+    (instrumentInfoQuery.data ?? [])
       .filter((instrument) => {
         return (currentGroup?.accessibleInstrumentIds.includes(instrument.id) ?? true) && instrument.kind !== 'SERIES';
       })
@@ -56,7 +56,7 @@ export const SubjectAssignmentsPage = () => {
           </Dialog.Trigger>
         </div>
         <AssignmentsTable
-          assignments={assignmentsQuery.data}
+          assignments={assignmentsQuery.data ?? []}
           onSelection={(assignment) => {
             setSelectedAssignment(assignment);
             setIsEditSliderOpen(true);