fix(replay): Stop refetching useProjectSdkNeedsUpdate() calls after 5s (#97656)

Previously (and previous to
#97642) we were refetching any
request to `useProjectSdkNeedsUpdate()` after 5 seconds.

This was hurting performance, and blowing up state, on the replay list
page. As a user you could see the checkbox state of the list items being
reset when the new/refreshed project-sdk data arrives, even if the value
is the same.

Now we just fetch the data once and that's it. If people are using old
SDKs and see a message, they can refresh the page to get new values, or
re-mount components

Fixes REPLAY-603

Author: ryan953

static/app/utils/useOrganizationSDKUpdates.tsx

@@ -1,4 +1,6 @@
-import {useOrganizationSDKUpdates} from 'sentry/utils/useOrganizationSDKUpdates';
+import type {ProjectSdkUpdates} from 'sentry/types/project';
+import {useApiQuery} from 'sentry/utils/queryClient';
+import useOrganization from 'sentry/utils/useOrganization';
 import {semverCompare} from 'sentry/utils/versions/semverCompare';
 
 type Opts = {
@@ -13,10 +15,12 @@ export default function useProjectSdkNeedsUpdate({
   | {isError: false; isFetching: true; needsUpdate: undefined}
   | {isError: true; isFetching: false; needsUpdate: undefined}
   | {isError: false; isFetching: false; needsUpdate: boolean} {
-  const {data, isError, isPending} = useOrganizationSDKUpdates({
-    projectId,
-    enabled: true,
-  });
+  const organization = useOrganization();
+
+  const {data, isError, isPending} = useApiQuery<ProjectSdkUpdates[]>(
+    [`/organizations/${organization.slug}/sdk-updates/`, {query: {project: projectId}}],
+    {staleTime: Infinity, refetchOnMount: true}
+  );
 
   if (isPending) {
     return {isError: false, isFetching: true, needsUpdate: undefined};

static/app/utils/useProjectSdkNeedsUpdate.tsx

@@ -1,25 +1,27 @@
 import uniqBy from 'lodash/uniqBy';
 
 import ProjectsStore from 'sentry/stores/projectsStore';
-import {useOrganizationSDKUpdates} from 'sentry/utils/useOrganizationSDKUpdates';
+import type {ProjectSdkUpdates} from 'sentry/types/project';
+import {useApiQuery} from 'sentry/utils/queryClient';
+import useOrganization from 'sentry/utils/useOrganization';
 import {semverCompare} from 'sentry/utils/versions/semverCompare';
 import {MIN_SDK_VERSION_BY_PLATFORM} from 'sentry/views/insights/database/settings';
 
 interface Options {
-  enabled?: boolean;
-  projectId?: string[];
+  enabled: boolean;
+  projectId: string[];
 }
 
 /**
  * Returns a list of projects that are not eligible for span metrics
  * due to SDK requirements.
- *
- * @param options Additional options
- * @param options.projectId List of project IDs to check against. If omitted, checks all organization projects
- * @returns List of projects
  */
-export function useOutdatedSDKProjects(options?: Options) {
-  const response = useOrganizationSDKUpdates(options ?? {});
+export function useOutdatedSDKProjects({enabled, projectId}: Options) {
+  const organization = useOrganization();
+  const response = useApiQuery<ProjectSdkUpdates[]>(
+    [`/organizations/${organization.slug}/sdk-updates/`, {query: {project: projectId}}],
+    {staleTime: 5000, enabled}
+  );
   const {data: availableUpdates} = response;
 
   const projects = (availableUpdates ?? [])
@@ -35,10 +37,7 @@ export function useOutdatedSDKProjects(options?: Options) {
 
       return semverCompare(update.sdkVersion, minimumRequiredVersion) === -1;
     })
-    .map(update => update.projectId)
-    .map(projectId => {
-      return ProjectsStore.getById(projectId);
-    })
+    .map(update => ProjectsStore.getById(update.projectId))
     .filter((item): item is NonNullable<typeof item> => Boolean(item));
 
   return {