ui: update schedule oncall hooks and util to use urql (#3589)

* update schedule hooks util to use urql * update references from loading to fetching * add loading check * Revert "add loading check" This reverts commit 9cc25ef. * add typename for mutation complete
target · Jan 15, 2024 · 58abb49 · 58abb49
1 parent 8e7aeae
commit 58abb49
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 19 deletions.
diff --git a/web/src/app/schedules/on-call-notifications/ScheduleOnCallNotificationsCreateDialog.tsx b/web/src/app/schedules/on-call-notifications/ScheduleOnCallNotificationsCreateDialog.tsx
@@ -32,7 +32,7 @@ export default function ScheduleOnCallNotificationsCreateDialog(
   )
 
   const [dialogErrors, fieldErrors] = mapOnCallErrors(m.error, q.error)
-  const busy = (q.loading && !zone) || m.loading
+  const busy = (q.fetching && !zone) || m.fetching
 
   return (
     <FormDialog

diff --git a/web/src/app/schedules/on-call-notifications/ScheduleOnCallNotificationsEditDialog.tsx b/web/src/app/schedules/on-call-notifications/ScheduleOnCallNotificationsEditDialog.tsx
@@ -42,7 +42,7 @@ export default function ScheduleOnCallNotificationsEditDialog(
     <FormDialog
       title='Edit Notification Rule'
       errors={dialogErrors}
-      loading={(q.loading && !zone) || m.loading}
+      loading={(q.fetching && !zone) || m.fetching}
       onClose={() => p.onClose()}
       onSubmit={() => submit().then(p.onClose)}
       form={

diff --git a/web/src/app/schedules/on-call-notifications/ScheduleOnCallNotificationsList.tsx b/web/src/app/schedules/on-call-notifications/ScheduleOnCallNotificationsList.tsx
@@ -46,7 +46,7 @@ export default function ScheduleOnCallNotificationsList({
             <FlatList
               headerNote={zone ? `Showing times for schedule in ${zone}.` : ''}
               emptyMessage={
-                q.loading
+                q.fetching
                   ? 'Loading notification rules...'
                   : 'No notification rules.'
               }

diff --git a/web/src/app/schedules/on-call-notifications/hooks.ts b/web/src/app/schedules/on-call-notifications/hooks.ts
@@ -1,10 +1,10 @@
 import {
   gql,
-  MutationResult,
-  QueryResult,
   useMutation,
   useQuery,
-} from '@apollo/client'
+  UseMutationState,
+  UseQueryState,
+} from 'urql'
 import { DateTime } from 'luxon'
 import { OnCallNotificationRule } from '../../../schema'
 import {
@@ -56,7 +56,8 @@ const updateMutation = gql`
 export function useFormatScheduleLocalISOTime(
   scheduleID: string,
 ): [(isoTime: string | null) => string, string] {
-  const { data } = useQuery(schedTZQuery, {
+  const [{ data }] = useQuery({
+    query: schedTZQuery,
     variables: { id: scheduleID },
   })
   const tz = data?.schedule?.timeZone
@@ -70,13 +71,16 @@ export function useFormatScheduleLocalISOTime(
 }
 
 type _Data = {
-  q: QueryResult
+  q: UseQueryState
   zone: string
   rules: OnCallNotificationRule[]
 }
 
 export function useOnCallRulesData(scheduleID: string): _Data {
-  const q = useQuery(rulesQuery, { variables: { id: scheduleID } })
+  const [q] = useQuery({
+    query: rulesQuery,
+    variables: { id: scheduleID },
+  })
   const zone = q.data?.schedule?.timeZone || ''
   const rules: OnCallNotificationRule[] = (
     q.data?.schedule?.rules || []
@@ -85,7 +89,7 @@ export function useOnCallRulesData(scheduleID: string): _Data {
 }
 
 type _Submit = {
-  m: MutationResult
+  m: UseMutationState
   submit: () => Promise<void>
 }
 export function useSetOnCallRulesSubmit(
@@ -113,10 +117,12 @@ export function useSetOnCallRulesSubmit(
     },
   }
 
-  const [submit, m] = useMutation(updateMutation, {
-    variables,
-  })
-  return { m, submit: () => submit().then(() => {}) }
+  const [m, commit] = useMutation(updateMutation)
+  return {
+    m,
+    submit: () =>
+      commit(variables, { additionalTypenames: ['Schedule'] }).then(() => {}),
+  }
 }
 
 export type UpdateOnCallRuleState = {
@@ -158,7 +164,7 @@ export function useEditOnCallRule(
   return {
     dialogErrors,
     fieldErrors,
-    busy: (q.loading && !zone) || m.loading,
+    busy: (q.fetching && !zone) || m.fetching,
     value: newValue,
     submit,
   }
@@ -186,7 +192,7 @@ export function useDeleteOnCallRule(
   return {
     dialogErrors,
     fieldErrors,
-    busy: (q.loading && !zone) || m.loading,
+    busy: (q.fetching && !zone) || m.fetching,
     rule,
     ruleSummary: onCallRuleSummary(zone, rule),
     submit,

diff --git a/web/src/app/schedules/on-call-notifications/util.ts b/web/src/app/schedules/on-call-notifications/util.ts
@@ -1,4 +1,3 @@
-import { ApolloError } from '@apollo/client'
 import { DateTime } from 'luxon'
 
 import {
@@ -9,6 +8,8 @@ import {
 } from '../../../schema'
 import { allErrors, fieldErrors, nonFieldErrors } from '../../util/errutil'
 import { weekdaySummary } from '../util'
+import { ApolloError } from '@apollo/client'
+import { CombinedError } from 'urql'
 
 export type Value = {
   time: string | null
@@ -89,8 +90,8 @@ export const onCallRuleToInput = (
 }
 
 export function mapOnCallErrors(
-  mErr?: ApolloError | null,
-  ...qErr: Array<ApolloError | undefined>
+  mErr?: ApolloError | CombinedError | null,
+  ...qErr: Array<ApolloError | CombinedError | undefined>
 ): [Error[], RuleFieldError[]] {
   let dialogErrs: Error[] = []
   qErr.forEach((e) => (dialogErrs = dialogErrs.concat(allErrors(e))))