use urql

web/src/app/schedules/ScheduleDetails.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useCallback, Suspense } from 'react'
-import { gql, useQuery } from '@apollo/client'
+import { gql, useQuery } from 'urql'
 import _ from 'lodash'
 import { Edit, Delete } from '@mui/icons-material'
 
@@ -9,7 +9,6 @@ import ScheduleDeleteDialog from './ScheduleDeleteDialog'
 import ScheduleCalendarQuery from './calendar/ScheduleCalendarQuery'
 import { QuerySetFavoriteButton } from '../util/QuerySetFavoriteButton'
 import CalendarSubscribeButton from './calendar-subscribe/CalendarSubscribeButton'
-import Spinner from '../loading/components/Spinner'
 import { ObjectNotFound, GenericError } from '../error-pages'
 import TempSchedDialog from './temp-sched/TempSchedDialog'
 import TempSchedDeleteConfirmation from './temp-sched/TempSchedDeleteConfirmation'
@@ -96,18 +95,13 @@ export default function ScheduleDetails({
     null,
   )
 
-  const {
-    data: _data,
-    loading,
-    error,
-  } = useQuery(query, {
+  const [{ data: _data, error }] = useQuery({
+    query,
     variables: { id: scheduleID },
-    returnPartialData: true,
   })
 
   const data = _.get(_data, 'schedule', null)
 
-  if (loading && !data?.name) return <Spinner />
   if (error) return <GenericError error={error.message} />
 
   if (!data) {

web/src/app/schedules/temp-sched/TempSchedShiftsList.tsx

@@ -62,7 +62,7 @@ export default function TempSchedShiftsList({
   handleCoverageGapClick,
 }: TempSchedShiftsListProps): JSX.Element {
   const classes = useStyles()
-  const { q, zone, isLocalZone } = useScheduleTZ(scheduleID)
+  const { zone, isLocalZone } = useScheduleTZ(scheduleID)
   const [now, setNow] = useState(DateTime.now().setZone(zone))
   const shifts = useUserInfo(value)
   const [existingShifts] = useState(shifts)
@@ -80,7 +80,7 @@ export default function TempSchedShiftsList({
   }, [now])
 
   // wait for zone
-  if (q.loading || zone === '') {
+  if (zone === '') {
     return (
       <div className={classes.spinContainer}>
         <CircularProgress />

web/src/app/schedules/useScheduleTZ.ts

@@ -1,4 +1,4 @@
-import { gql, QueryResult, useQuery } from '@apollo/client'
+import { gql, useQuery } from 'urql'
 import { DateTime } from 'luxon'
 
 const schedTZQuery = gql`
@@ -11,8 +11,7 @@ const schedTZQuery = gql`
 `
 
 interface ScheduleTZResult {
-  // q is the Apollo query status
-  q: QueryResult
+  q: { loading: false } // for compatability, until loading logic is removed (in favor of suspense)
   // zone is schedule time zone name if ready; else empty string
   zone: string
   // isLocalZone is true if schedule and system time zone are equal
@@ -22,7 +21,8 @@ interface ScheduleTZResult {
 }
 
 export function useScheduleTZ(scheduleID: string): ScheduleTZResult {
-  const q = useQuery(schedTZQuery, {
+  const [q] = useQuery({
+    query: schedTZQuery,
     variables: { id: scheduleID },
   })
   const zone = q.data?.schedule?.timeZone ?? 'local'
@@ -35,5 +35,5 @@ export function useScheduleTZ(scheduleID: string): ScheduleTZResult {
     )
   }
 
-  return { q, zone, isLocalZone, zoneAbbr }
+  return { q: { loading: false }, zone, isLocalZone, zoneAbbr }
 }