diff --git a/app/pages/project/floating-ips/FloatingIpsPage.tsx b/app/pages/project/floating-ips/FloatingIpsPage.tsx index de198518a..39053df5e 100644 --- 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(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 {floatingIp.name} 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 {variables.path.floatingIp} 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 {floatingIp.name} attached) // prettier-ignore onDismiss() }, diff --git a/app/pages/project/vpcs/VpcsPage.tsx b/app/pages/project/vpcs/VpcsPage.tsx index 1b8282a4a..6f23956f6 100644 --- 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 // 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 {variables.path.vpc} 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 })