convert some more, actually cut some lines!

oxidecomputer · Dec 6, 2024 · 127a6b3 · 127a6b3
1 parent b3bd45f
commit 127a6b3
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 38 deletions.
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/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 })