ref(tsc): dashboards endpoint to apiOptions

TkDodo · TkDodo · commit 1e7d424f85ba · 2026-04-15T18:50:06.000+02:00
diff --git a/static/app/views/dashboards/hooks/useGetStarredDashboards.tsx b/static/app/views/dashboards/hooks/useGetStarredDashboards.tsx
@@ -1,39 +1,56 @@
+import {useQuery} from '@tanstack/react-query';
+
 import type {Organization} from 'sentry/types/organization';
-import {getApiUrl} from 'sentry/utils/api/getApiUrl';
-import type {ApiQueryKey} from 'sentry/utils/queryClient';
-import {useApiQuery} from 'sentry/utils/queryClient';
+import {apiOptions} from 'sentry/utils/api/apiOptions';
 import {useHasProjectAccess} from 'sentry/utils/useHasProjectAccess';
 import {useOrganization} from 'sentry/utils/useOrganization';
 import type {DashboardListItem} from 'sentry/views/dashboards/types';
 
-export function getStarredDashboardsQueryKey(organization: Organization): ApiQueryKey {
-  const DASHBOARDS_QUERY_KEY = [
-    getApiUrl('/organizations/$organizationIdOrSlug/dashboards/', {
-      path: {organizationIdOrSlug: organization.slug},
-    }),
+export function getStarredDashboardsQueryKey(organization: Organization) {
+  if (organization.features.includes('dashboards-starred-reordering')) {
+    return apiOptions.as<DashboardListItem[]>()(
+      '/organizations/$organizationIdOrSlug/dashboards/starred/',
+      {
+        path: {organizationIdOrSlug: organization.slug},
+        staleTime: Infinity,
+      }
+    ).queryKey;
+  }
+  return apiOptions.as<DashboardListItem[]>()(
+    '/organizations/$organizationIdOrSlug/dashboards/',
     {
-      query: {
-        filter: 'onlyFavorites',
-      },
-    },
-  ] as const;
-  const STARRED_DASHBOARDS_QUERY_KEY = [
-    getApiUrl('/organizations/$organizationIdOrSlug/dashboards/starred/', {
       path: {organizationIdOrSlug: organization.slug},
-    }),
-    {},
-  ] as const;
-  return organization.features.includes('dashboards-starred-reordering')
-    ? STARRED_DASHBOARDS_QUERY_KEY
-    : DASHBOARDS_QUERY_KEY;
+      query: {filter: 'onlyFavorites'},
+      staleTime: Infinity,
+    }
+  ).queryKey;
 }
 
 export function useGetStarredDashboards() {
   const organization = useOrganization();
   const {hasProjectAccess, projectsLoaded} = useHasProjectAccess();
 
-  return useApiQuery<DashboardListItem[]>(getStarredDashboardsQueryKey(organization), {
-    staleTime: Infinity,
+  const usesStarredEndpoint = organization.features.includes(
+    'dashboards-starred-reordering'
+  );
+
+  return useQuery({
+    ...(usesStarredEndpoint
+      ? apiOptions.as<DashboardListItem[]>()(
+          '/organizations/$organizationIdOrSlug/dashboards/starred/',
+          {
+            path: {organizationIdOrSlug: organization.slug},
+            staleTime: Infinity,
+          }
+        )
+      : apiOptions.as<DashboardListItem[]>()(
+          '/organizations/$organizationIdOrSlug/dashboards/',
+          {
+            path: {organizationIdOrSlug: organization.slug},
+            query: {filter: 'onlyFavorites'},
+            staleTime: Infinity,
+          }
+        )),
     enabled: hasProjectAccess || !projectsLoaded,
   });
 }
diff --git a/static/app/views/dashboards/hooks/useOwnedDashboards.tsx b/static/app/views/dashboards/hooks/useOwnedDashboards.tsx
@@ -1,5 +1,6 @@
-import {getApiUrl} from 'sentry/utils/api/getApiUrl';
-import {useApiQuery} from 'sentry/utils/queryClient';
+import {useQuery} from '@tanstack/react-query';
+
+import {apiOptions, selectJsonWithHeaders} from 'sentry/utils/api/apiOptions';
 import {useOrganization} from 'sentry/utils/useOrganization';
 import type {DashboardListItem} from 'sentry/views/dashboards/types';
 
@@ -15,12 +16,11 @@ export function useOwnedDashboards({
   sort: string;
 }) {
   const organization = useOrganization();
-  return useApiQuery<DashboardListItem[]>(
-    [
-      getApiUrl('/organizations/$organizationIdOrSlug/dashboards/', {
-        path: {organizationIdOrSlug: organization.slug},
-      }),
+  return useQuery({
+    ...apiOptions.as<DashboardListItem[]>()(
+      '/organizations/$organizationIdOrSlug/dashboards/',
       {
+        path: {organizationIdOrSlug: organization.slug},
         query: {
           query,
           cursor,
@@ -29,11 +29,10 @@ export function useOwnedDashboards({
           pin: 'favorites',
           per_page: 20,
         },
-      },
-    ],
-    {
-      staleTime: 0,
-      enabled,
-    }
-  );
+        staleTime: 0,
+      }
+    ),
+    select: selectJsonWithHeaders,
+    enabled,
+  });
 }
diff --git a/static/app/views/dashboards/manage/index.tsx b/static/app/views/dashboards/manage/index.tsx
@@ -1,6 +1,7 @@
 import {Fragment, useEffect, useMemo, useRef, useState} from 'react';
 import styled from '@emotion/styled';
 import * as Sentry from '@sentry/react';
+import {useQuery} from '@tanstack/react-query';
 import type {Query} from 'history';
 import debounce from 'lodash/debounce';
 import pick from 'lodash/pick';
@@ -31,10 +32,9 @@ import {IconAdd, IconGrid, IconList} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import type {Organization} from 'sentry/types/organization';
 import {trackAnalytics} from 'sentry/utils/analytics';
-import {getApiUrl} from 'sentry/utils/api/getApiUrl';
+import {apiOptions, selectJsonWithHeaders} from 'sentry/utils/api/apiOptions';
 import {localStorageWrapper} from 'sentry/utils/localStorage';
 import {parseLinkHeader} from 'sentry/utils/parseLinkHeader';
-import {useApiQuery} from 'sentry/utils/queryClient';
 import {decodeScalar} from 'sentry/utils/queryString';
 import {scheduleMicroTask} from 'sentry/utils/scheduleMicroTask';
 import {normalizeUrl} from 'sentry/utils/url/normalizeUrl';
@@ -199,18 +199,16 @@ function ManageDashboards() {
   });
 
   const {
-    data: dashboardsWithoutPrebuiltConfigs,
+    data: dashboardsResponse,
     isLoading,
     isError,
     error,
-    getResponseHeader,
     refetch: refetchDashboards,
-  } = useApiQuery<DashboardListItem[]>(
-    [
-      getApiUrl('/organizations/$organizationIdOrSlug/dashboards/', {
-        path: {organizationIdOrSlug: organization.slug},
-      }),
+  } = useQuery({
+    ...apiOptions.as<DashboardListItem[]>()(
+      '/organizations/$organizationIdOrSlug/dashboards/',
       {
+        path: {organizationIdOrSlug: organization.slug},
         query: {
           ...pick(location.query, ['cursor', 'query']),
           sort: getActiveSort()!.value,
@@ -221,18 +219,18 @@ function ManageDashboards() {
             ? {filter: DashboardFilter.ONLY_PREBUILT}
             : {filter: DashboardFilter.EXCLUDE_PREBUILT}),
         },
-      },
-    ],
-    {
-      staleTime: 0,
-      enabled:
-        (hasProjectAccess || !projectsLoaded) &&
-        !(
-          organization.features.includes('dashboards-starred-reordering') &&
-          dashboardsLayout === TABLE
-        ),
-    }
-  );
+        staleTime: 0,
+      }
+    ),
+    select: selectJsonWithHeaders,
+    enabled:
+      (hasProjectAccess || !projectsLoaded) &&
+      !(
+        organization.features.includes('dashboards-starred-reordering') &&
+        dashboardsLayout === TABLE
+      ),
+  });
+  const dashboardsWithoutPrebuiltConfigs = dashboardsResponse?.json;
 
   const dashboards = useMemo(
     () =>
@@ -267,7 +265,7 @@ function ManageDashboards() {
       dashboardsLayout === TABLE,
   });
 
-  const dashboardsPageLinks = getResponseHeader?.('Link') ?? '';
+  const dashboardsPageLinks = dashboardsResponse?.headers.Link ?? '';
 
   function setRowsAndColumns(containerWidth: number) {
     const numWidgetsFitInRow = Math.floor(
@@ -510,9 +508,9 @@ function ManageDashboards() {
       />
     ) : organization.features.includes('dashboards-starred-reordering') ? (
       <OwnedDashboardsTable
-        dashboards={ownedDashboards.data ?? []}
+        dashboards={ownedDashboards.data?.json ?? []}
         isLoading={ownedDashboards.isLoading}
-        pageLinks={ownedDashboards.getResponseHeader?.('Link') ?? undefined}
+        pageLinks={ownedDashboards.data?.headers.Link}
       />
     ) : (
       <DashboardTable
diff --git a/static/app/views/dashboards/orgDashboards.tsx b/static/app/views/dashboards/orgDashboards.tsx
@@ -1,4 +1,5 @@
 import {useEffect, useMemo, useRef, useState} from 'react';
+import {useQuery, useQueryClient} from '@tanstack/react-query';
 import isEqual from 'lodash/isEqual';
 
 import {Stack} from '@sentry/scraps/layout';
@@ -8,8 +9,10 @@ import {LoadingError} from 'sentry/components/loadingError';
 import {LoadingIndicator} from 'sentry/components/loadingIndicator';
 import {SentryDocumentTitle} from 'sentry/components/sentryDocumentTitle';
 import {t} from 'sentry/locale';
+import {apiOptions} from 'sentry/utils/api/apiOptions';
 import {getApiUrl} from 'sentry/utils/api/getApiUrl';
-import {useApiQuery, useQueryClient} from 'sentry/utils/queryClient';
+import {useApiQuery} from 'sentry/utils/queryClient';
+import {RequestError} from 'sentry/utils/requestError/requestError';
 import {normalizeUrl} from 'sentry/utils/url/normalizeUrl';
 import {useLocation} from 'sentry/utils/useLocation';
 import {useNavigate} from 'sentry/utils/useNavigate';
@@ -46,10 +49,6 @@ export function OrgDashboards({children, initialDashboard}: OrgDashboardsProps)
   const dashboardRedirectRef = useRef<string | null>(null);
   const queryClient = useQueryClient();
 
-  const ENDPOINT = getApiUrl('/organizations/$organizationIdOrSlug/dashboards/', {
-    path: {organizationIdOrSlug: organization.slug},
-  });
-
   // The currently selected dashboard. Use initialDashboard for optimistic updates
   // when navigating from widget builder (passed via location.state).
   const [selectedDashboardState, setSelectedDashboardState] =
@@ -60,7 +59,16 @@ export function OrgDashboards({children, initialDashboard}: OrgDashboardsProps)
     isPending: isDashboardsPending,
     isError: isDashboardsError,
     error: dashboardsError,
-  } = useApiQuery<DashboardListItem[]>([ENDPOINT], {staleTime: 0, retry: false});
+  } = useQuery({
+    ...apiOptions.as<DashboardListItem[]>()(
+      '/organizations/$organizationIdOrSlug/dashboards/',
+      {
+        path: {organizationIdOrSlug: organization.slug},
+        staleTime: 0,
+      }
+    ),
+    retry: false,
+  });
 
   const {
     data: fetchedSelectedDashboard,
@@ -189,10 +197,14 @@ export function OrgDashboards({children, initialDashboard}: OrgDashboardsProps)
     // a flicker from stale data on refetch
     return () => {
       queryClient.removeQueries({
-        queryKey: [`${ENDPOINT}${dashboardId}/`],
+        queryKey: [
+          getApiUrl('/organizations/$organizationIdOrSlug/dashboards/$dashboardId/', {
+            path: {organizationIdOrSlug: organization.slug, dashboardId},
+          }),
+        ],
       });
     };
-  }, [dashboardId, ENDPOINT, queryClient]);
+  }, [dashboardId, organization.slug, queryClient]);
 
   const childrenProps = useMemo(
     () => ({
@@ -235,7 +247,8 @@ export function OrgDashboards({children, initialDashboard}: OrgDashboardsProps)
 
   if (isDashboardsError || isSelectedDashboardError) {
     const notFound =
-      dashboardsError?.status === 404 || selectedDashboardError?.status === 404;
+      (dashboardsError instanceof RequestError && dashboardsError.status === 404) ||
+      selectedDashboardError?.status === 404;
 
     if (notFound) {
       return <NotFound />;
diff --git a/static/app/views/dashboards/utils/usePopulateLinkedDashboards.tsx b/static/app/views/dashboards/utils/usePopulateLinkedDashboards.tsx
@@ -1,10 +1,9 @@
 import {useMemo} from 'react';
 import type {QueryClient} from '@tanstack/react-query';
+import {useQuery} from '@tanstack/react-query';
 
 import {defined} from 'sentry/utils';
-import {getApiUrl} from 'sentry/utils/api/getApiUrl';
-import type {ApiQueryKey} from 'sentry/utils/queryClient';
-import {fetchDataQuery, useApiQuery} from 'sentry/utils/queryClient';
+import {apiOptions} from 'sentry/utils/api/apiOptions';
 import {useOrganization} from 'sentry/utils/useOrganization';
 import {
   DashboardFilter,
@@ -46,13 +45,9 @@ export async function resolveLinkedDashboardIds({
     return dashboard;
   }
 
-  const queryKey = makeDashboardsQueryKey(orgSlug, prebuiltIds);
-
-  const [resolvedDashboards] = await queryClient.fetchQuery({
-    queryKey,
-    queryFn: fetchDataQuery<DashboardDetails[]>,
-    staleTime: Infinity,
-  });
+  const resolvedDashboards = (
+    await queryClient.fetchQuery(dashboardsByPrebuiltIdOptions(orgSlug, prebuiltIds))
+  ).json;
 
   const resolvedIdMap = buildResolvedIdMap(resolvedDashboards);
   return replacePlaceholderLinkedDashboardIds(dashboard, resolvedIdMap);
@@ -73,17 +68,14 @@ const usePopulatePrebuiltIdsWithActualIds = (
 
   const hasLinkedDashboards = prebuiltIds.length > 0;
 
-  const {data, isLoading} = useApiQuery<DashboardDetails[]>(
-    makeDashboardsQueryKey(
+  const {data, isLoading} = useQuery({
+    ...dashboardsByPrebuiltIdOptions(
       organization.slug,
       [...prebuiltIds, prebuiltId].filter(defined)
     ),
-    {
-      enabled: hasLinkedDashboards || Boolean(prebuiltId),
-      staleTime: Infinity,
-      retry: false,
-    }
-  );
+    enabled: hasLinkedDashboards || Boolean(prebuiltId),
+    retry: false,
+  });
 
   return useMemo(() => {
     const populatedDashboard = {
@@ -162,19 +154,19 @@ function buildResolvedIdMap(
   return map;
 }
 
-function makeDashboardsQueryKey(
+function dashboardsByPrebuiltIdOptions(
   orgSlug: string,
   prebuiltIds: PrebuiltDashboardId[]
-): ApiQueryKey {
-  return [
-    getApiUrl('/organizations/$organizationIdOrSlug/dashboards/', {
-      path: {organizationIdOrSlug: orgSlug},
-    }),
+) {
+  return apiOptions.as<DashboardDetails[]>()(
+    '/organizations/$organizationIdOrSlug/dashboards/',
     {
+      path: {organizationIdOrSlug: orgSlug},
       query: {
         prebuiltId: prebuiltIds.sort(),
         filter: DashboardFilter.SHOW_HIDDEN,
       },
-    },
-  ];
+      staleTime: Infinity,
+    }
+  );
 }
diff --git a/static/gsApp/hooks/dashboardsLimit.tsx b/static/gsApp/hooks/dashboardsLimit.tsx
