fix(teamProjects): Migrate api.request to useMutation

static/app/views/settings/organizationTeams/teamProjects.tsx

@@ -1,6 +1,6 @@
 import {Fragment, useMemo, useState} from 'react';
 import styled from '@emotion/styled';
-import {useQuery} from '@tanstack/react-query';
+import {useMutation, useQuery} from '@tanstack/react-query';
 
 import {ProjectAvatar} from '@sentry/scraps/avatar';
 import {Button} from '@sentry/scraps/button';
@@ -24,7 +24,7 @@ import {ProjectsStore} from 'sentry/stores/projectsStore';
 import type {Project} from 'sentry/types/project';
 import {apiOptions, selectJsonWithHeaders} from 'sentry/utils/api/apiOptions';
 import {sortProjects} from 'sentry/utils/project/sortProjects';
-import {useApi} from 'sentry/utils/useApi';
+import {fetchMutation} from 'sentry/utils/queryClient';
 import {useLocation} from 'sentry/utils/useLocation';
 import {useOrganization} from 'sentry/utils/useOrganization';
 import {ProjectItem as ProjectListItem} from 'sentry/views/settings/components/settingsProjectItem';
@@ -34,7 +34,6 @@ import {useTeamDetailsOutlet} from 'sentry/views/settings/organizationTeams/team
 export default function TeamProjects() {
   const location = useLocation();
   const organization = useOrganization();
-  const api = useApi({persistInFlight: true});
   const [query, setQuery] = useState('');
   const {team} = useTeamDetailsOutlet();
   const {
@@ -70,23 +69,29 @@ export default function TeamProjects() {
     })
   );
 
+  const {mutate: mutateLinkProject} = useMutation({
+    mutationFn: ({project, action}: {action: string; project: Project}) =>
+      fetchMutation<Project>({
+        url: `/projects/${organization.slug}/${project.slug}/teams/${team.slug}/`,
+        method: action === 'add' ? 'POST' : 'DELETE',
+      }),
+    onSuccess: (resp, {action}) => {
+      refetchLinkedProjects();
+      refetchUnlinkedProjects();
+      ProjectsStore.onUpdateSuccess(resp);
+      addSuccessMessage(
+        action === 'add'
+          ? t('Successfully added project to team.')
+          : t('Successfully removed project from team')
+      );
+    },
+    onError: () => {
+      addErrorMessage(t("Wasn't able to change project association."));
+    },
+  });
+
   const handleLinkProject = (project: Project, action: string) => {
-    api.request(`/projects/${organization.slug}/${project.slug}/teams/${team.slug}/`, {
-      method: action === 'add' ? 'POST' : 'DELETE',
-      success: resp => {
-        refetchLinkedProjects();
-        refetchUnlinkedProjects();
-        ProjectsStore.onUpdateSuccess(resp);
-        addSuccessMessage(
-          action === 'add'
-            ? t('Successfully added project to team.')
-            : t('Successfully removed project from team')
-        );
-      },
-      error: () => {
-        addErrorMessage(t("Wasn't able to change project association."));
-      },
-    });
+    mutateLinkProject({project, action});
   };
 
   const linkedProjectsPageLinks = linkedProjectsResponse?.headers.Link;