convert some more, actually cut some lines!

oxidecomputer · Dec 6, 2024 · 604ecf5 · 604ecf5
1 parent b3bd45f
commit 604ecf5
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 86 deletions.
diff --git a/app/forms/image-from-snapshot.tsx b/app/forms/image-from-snapshot.tsx
@@ -10,10 +10,10 @@ import { useForm } from 'react-hook-form'
 import { useNavigate, type LoaderFunctionArgs } from 'react-router-dom'
 
 import {
-  apiQueryClient,
+  apiq,
+  queryClient,
   useApiMutation,
-  useApiQueryClient,
-  usePrefetchedApiQuery,
+  usePrefetchedQuery,
   type ImageCreate,
 } from '@oxide/api'
 
@@ -26,6 +26,7 @@ import { getProjectSnapshotSelector, useProjectSnapshotSelector } from '~/hooks/
 import { addToast } from '~/stores/toast'
 import { PropertiesTable } from '~/ui/lib/PropertiesTable'
 import { pb } from '~/util/path-builder'
+import type * as PP from '~/util/path-params'
 
 const defaultValues: Omit<ImageCreate, 'source'> = {
   name: '',
@@ -34,29 +35,25 @@ const defaultValues: Omit<ImageCreate, 'source'> = {
   version: '',
 }
 
+const snapshotView = ({ project, snapshot }: PP.Snapshot) =>
+  apiq('snapshotView', { path: { snapshot }, query: { project } })
+
 CreateImageFromSnapshotSideModalForm.loader = async ({ params }: LoaderFunctionArgs) => {
   const { project, snapshot } = getProjectSnapshotSelector(params)
-  await apiQueryClient.prefetchQuery('snapshotView', {
-    path: { snapshot },
-    query: { project },
-  })
+  await queryClient.prefetchQuery(snapshotView({ project, snapshot }))
   return null
 }
 
 export function CreateImageFromSnapshotSideModalForm() {
   const { snapshot, project } = useProjectSnapshotSelector()
-  const { data } = usePrefetchedApiQuery('snapshotView', {
-    path: { snapshot },
-    query: { project },
-  })
+  const { data } = usePrefetchedQuery(snapshotView({ project, snapshot }))
   const navigate = useNavigate()
-  const queryClient = useApiQueryClient()
 
   const onDismiss = () => navigate(pb.snapshots({ project }))
 
   const createImage = useApiMutation('imageCreate', {
     onSuccess(image) {
-      queryClient.invalidateQueries('imageList')
+      queryClient.invalidateEndpoint('imageList')
       addToast(<>Image <HL>{image.name}</HL> created</>) // prettier-ignore
       onDismiss()
     },

diff --git a/app/forms/vpc-edit.tsx b/app/forms/vpc-edit.tsx
@@ -8,12 +8,7 @@
 import { useForm } from 'react-hook-form'
 import { useNavigate, type LoaderFunctionArgs } from 'react-router-dom'
 
-import {
-  apiQueryClient,
-  useApiMutation,
-  useApiQueryClient,
-  usePrefetchedApiQuery,
-} from '@oxide/api'
+import { apiq, queryClient, useApiMutation, usePrefetchedQuery } from '@oxide/api'
 
 import { DescriptionField } from '~/components/form/fields/DescriptionField'
 import { NameField } from '~/components/form/fields/NameField'
@@ -22,26 +17,26 @@ import { HL } from '~/components/HL'
 import { getVpcSelector, useVpcSelector } from '~/hooks/use-params'
 import { addToast } from '~/stores/toast'
 import { pb } from '~/util/path-builder'
+import type * as PP from '~/util/path-params'
+
+const vpcView = ({ project, vpc }: PP.Vpc) =>
+  apiq('vpcView', { path: { vpc }, query: { project } })
 
 EditVpcSideModalForm.loader = async ({ params }: LoaderFunctionArgs) => {
   const { project, vpc } = getVpcSelector(params)
-  await apiQueryClient.prefetchQuery('vpcView', { path: { vpc }, query: { project } })
+  await queryClient.prefetchQuery(vpcView({ project, vpc }))
   return null
 }
 
 export function EditVpcSideModalForm() {
   const { vpc: vpcName, project } = useVpcSelector()
-  const queryClient = useApiQueryClient()
   const navigate = useNavigate()
 
-  const { data: vpc } = usePrefetchedApiQuery('vpcView', {
-    path: { vpc: vpcName },
-    query: { project },
-  })
+  const { data: vpc } = usePrefetchedQuery(vpcView({ project, vpc: vpcName }))
 
   const editVpc = useApiMutation('vpcUpdate', {
     onSuccess(updatedVpc) {
-      queryClient.invalidateQueries('vpcList')
+      queryClient.invalidateEndpoint('vpcList')
       navigate(pb.vpc({ project, vpc: updatedVpc.name }))
       addToast(<>VPC <HL>{updatedVpc.name}</HL> updated</>) // prettier-ignore
 
@@ -51,7 +46,7 @@ export function EditVpcSideModalForm() {
       // page's VPC gets cleared out while we're still on the page. If we're
       // navigating to a different page, its query will fetch anew regardless.
       if (vpc.name === updatedVpc.name) {
-        queryClient.invalidateQueries('vpcView')
+        queryClient.invalidateEndpoint('vpcView')
       }
     },
   })

diff --git a/app/pages/lookups.ts b/app/pages/lookups.ts
@@ -7,19 +7,19 @@
  */
 import { redirect, type LoaderFunctionArgs } from 'react-router-dom'
 
-import { apiQueryClient } from '@oxide/api'
+import { apiq, queryClient } from '@oxide/api'
 
 import { trigger404 } from '~/components/ErrorBoundary'
 import { pb } from '~/util/path-builder'
 
 export async function instanceLookupLoader({ params }: LoaderFunctionArgs) {
   try {
-    const instance = await apiQueryClient.fetchQuery('instanceView', {
-      path: { instance: params.instance! },
-    })
-    const project = await apiQueryClient.fetchQuery('projectView', {
-      path: { project: instance.projectId },
-    })
+    const instance = await queryClient.fetchQuery(
+      apiq('instanceView', { path: { instance: params.instance! } })
+    )
+    const project = await queryClient.fetchQuery(
+      apiq('projectView', { path: { project: instance.projectId } })
+    )
     return redirect(pb.instance({ project: project.name, instance: instance.name }))
   } catch (_e) {
     throw trigger404

diff --git a/app/pages/project/floating-ips/FloatingIpsPage.tsx b/app/pages/project/floating-ips/FloatingIpsPage.tsx
@@ -11,11 +11,10 @@ import { useForm } from 'react-hook-form'
 import { Outlet, useNavigate, type LoaderFunctionArgs } from 'react-router-dom'
 
 import {
-  apiQueryClient,
+  apiq,
   getListQFn,
   queryClient,
   useApiMutation,
-  useApiQueryClient,
   usePrefetchedQuery,
   type FloatingIp,
   type Instance,
@@ -67,15 +66,12 @@ FloatingIpsPage.loader = async ({ params }: LoaderFunctionArgs) => {
     // fetch IP Pools and preload into RQ cache so fetches by ID in
     // IpPoolCell can be mostly instant yet gracefully fall back to
     // fetching individually if we don't fetch them all here
-    apiQueryClient
-      .fetchQuery('projectIpPoolList', { query: { limit: ALL_ISH } })
+    queryClient
+      .fetchQuery(apiq('projectIpPoolList', { query: { limit: ALL_ISH } }))
       .then((pools) => {
         for (const pool of pools.items) {
-          apiQueryClient.setQueryData(
-            'projectIpPoolView',
-            { path: { pool: pool.id } },
-            pool
-          )
+          const { queryKey } = apiq('projectIpPoolView', { path: { pool: pool.id } })
+          queryClient.setQueryData(queryKey, pool)
         }
       }),
   ])
@@ -102,14 +98,13 @@ const staticCols = [
 
 export function FloatingIpsPage() {
   const [floatingIpToModify, setFloatingIpToModify] = useState<FloatingIp | null>(null)
-  const queryClient = useApiQueryClient()
   const { project } = useProjectSelector()
   const { data: instances } = usePrefetchedQuery(instanceList(project).optionsFn())
   const navigate = useNavigate()
 
   const { mutateAsync: floatingIpDetach } = useApiMutation('floatingIpDetach', {
     onSuccess(floatingIp) {
-      queryClient.invalidateQueries('floatingIpList')
+      queryClient.invalidateEndpoint('floatingIpList')
       addToast(<>Floating IP <HL>{floatingIp.name}</HL> detached</>) // prettier-ignore
     },
     onError: (err) => {
@@ -118,8 +113,8 @@ export function FloatingIpsPage() {
   })
   const { mutateAsync: deleteFloatingIp } = useApiMutation('floatingIpDelete', {
     onSuccess(_data, variables) {
-      queryClient.invalidateQueries('floatingIpList')
-      queryClient.invalidateQueries('ipPoolUtilizationView')
+      queryClient.invalidateEndpoint('floatingIpList')
+      queryClient.invalidateEndpoint('ipPoolUtilizationView')
       addToast(<>Floating IP <HL>{variables.path.floatingIp}</HL> deleted</>) // prettier-ignore
     },
   })
@@ -171,14 +166,11 @@ export function FloatingIpsPage() {
         {
           label: 'Edit',
           onActivate: () => {
-            apiQueryClient.setQueryData(
-              'floatingIpView',
-              {
-                path: { floatingIp: floatingIp.name },
-                query: { project },
-              },
-              floatingIp
-            )
+            const { queryKey } = apiq('floatingIpView', {
+              path: { floatingIp: floatingIp.name },
+              query: { project },
+            })
+            queryClient.setQueryData(queryKey, floatingIp)
             navigate(pb.floatingIpEdit({ project, floatingIp: floatingIp.name }))
           },
         },
@@ -251,10 +243,9 @@ const AttachFloatingIpModal = ({
   project: string
   onDismiss: () => void
 }) => {
-  const queryClient = useApiQueryClient()
   const floatingIpAttach = useApiMutation('floatingIpAttach', {
     onSuccess(floatingIp) {
-      queryClient.invalidateQueries('floatingIpList')
+      queryClient.invalidateEndpoint('floatingIpList')
       addToast(<>Floating IP <HL>{floatingIp.name}</HL> attached</>) // prettier-ignore
       onDismiss()
     },

diff --git a/app/pages/project/vpcs/VpcPage/VpcPage.tsx b/app/pages/project/vpcs/VpcPage/VpcPage.tsx
@@ -8,12 +8,7 @@
 import { useMemo } from 'react'
 import { useNavigate, type LoaderFunctionArgs } from 'react-router-dom'
 
-import {
-  apiQueryClient,
-  useApiMutation,
-  useApiQueryClient,
-  usePrefetchedApiQuery,
-} from '@oxide/api'
+import { apiq, queryClient, useApiMutation, usePrefetchedQuery } from '@oxide/api'
 import { Networking24Icon } from '@oxide/design-system/icons/react'
 
 import { HL } from '~/components/HL'
@@ -27,28 +22,27 @@ import { DateTime } from '~/ui/lib/DateTime'
 import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
 import { PropertiesTable } from '~/ui/lib/PropertiesTable'
 import { pb } from '~/util/path-builder'
+import type * as PP from '~/util/path-params'
 
 import { VpcDocsPopover } from '../VpcsPage'
 
+const vpcView = ({ project, vpc }: PP.Vpc) =>
+  apiq('vpcView', { path: { vpc }, query: { project } })
+
 VpcPage.loader = async ({ params }: LoaderFunctionArgs) => {
-  const { project, vpc } = getVpcSelector(params)
-  await apiQueryClient.prefetchQuery('vpcView', { path: { vpc }, query: { project } })
+  await queryClient.prefetchQuery(vpcView(getVpcSelector(params)))
   return null
 }
 
 export function VpcPage() {
-  const queryClient = useApiQueryClient()
   const navigate = useNavigate()
   const vpcSelector = useVpcSelector()
   const { project, vpc: vpcName } = vpcSelector
-  const { data: vpc } = usePrefetchedApiQuery('vpcView', {
-    path: { vpc: vpcName },
-    query: { project },
-  })
+  const { data: vpc } = usePrefetchedQuery(vpcView(vpcSelector))
 
   const { mutateAsync: deleteVpc } = useApiMutation('vpcDelete', {
     onSuccess(_data, variables) {
-      queryClient.invalidateQueries('vpcList')
+      queryClient.invalidateEndpoint('vpcList')
       navigate(pb.vpcs({ project }))
       addToast(<>VPC <HL>{variables.path.vpc}</HL> deleted</>) // prettier-ignore
     },

diff --git a/app/pages/project/vpcs/VpcsPage.tsx b/app/pages/project/vpcs/VpcsPage.tsx
@@ -5,19 +5,12 @@
  *
  * Copyright Oxide Computer Company
  */
+import { useQuery } from '@tanstack/react-query'
 import { createColumnHelper } from '@tanstack/react-table'
 import { useCallback, useMemo } from 'react'
 import { Outlet, useNavigate, type LoaderFunctionArgs } from 'react-router-dom'
 
-import {
-  apiQueryClient,
-  getListQFn,
-  queryClient,
-  useApiMutation,
-  useApiQuery,
-  useApiQueryClient,
-  type Vpc,
-} from '@oxide/api'
+import { apiq, getListQFn, queryClient, useApiMutation, type Vpc } from '@oxide/api'
 import { Networking16Icon, Networking24Icon } from '@oxide/design-system/icons/react'
 
 import { DocsPopover } from '~/components/DocsPopover'
@@ -61,7 +54,7 @@ export const VpcDocsPopover = () => (
 )
 
 const FirewallRuleCount = ({ project, vpc }: PP.Vpc) => {
-  const { data } = useApiQuery('vpcFirewallRulesView', { query: { project, vpc } })
+  const { data } = useQuery(apiq('vpcFirewallRulesView', { query: { project, vpc } }))
 
   if (!data) return <SkeletonCell /> // loading
 
@@ -79,13 +72,12 @@ VpcsPage.loader = async ({ params }: LoaderFunctionArgs) => {
 }
 
 export function VpcsPage() {
-  const queryClient = useApiQueryClient()
   const { project } = useProjectSelector()
   const navigate = useNavigate()
 
   const { mutateAsync: deleteVpc } = useApiMutation('vpcDelete', {
     onSuccess(_data, variables) {
-      queryClient.invalidateQueries('vpcList')
+      queryClient.invalidateEndpoint('vpcList')
       addToast(<>VPC <HL>{variables.path.vpc}</HL> deleted</>) // prettier-ignore
     },
   })
@@ -95,9 +87,8 @@ export function VpcsPage() {
       {
         label: 'Edit',
         onActivate() {
-          apiQueryClient.setQueryData(
-            'vpcView',
-            { path: { vpc: vpc.name }, query: { project } },
+          queryClient.setQueryData(
+            apiq('vpcView', { path: { vpc: vpc.name }, query: { project } }).queryKey,
             vpc
           )
           navigate(pb.vpcEdit({ project, vpc: vpc.name }), { state: vpc })