chore(js): Wrap queryClient.setQueryData (#47130)

For the useApiQuery stuff we'll need this to abstract away the response
object cache managment

Author: evanpurkhiser

static/app/utils/queryClient.tsx

@@ -130,8 +130,17 @@ function useApiQuery<TQueryFnData, TError = RequestError, TData = TQueryFnData>(
   return reactQuery.useQuery(queryKey, queryFn, options);
 }
 
+function setApiQueryData<TResponseData>(
+  queryClient: reactQuery.QueryClient,
+  queryKey: ApiQueryKey,
+  updater: reactQuery.Updater<TResponseData | undefined, TResponseData | undefined>,
+  options?: reactQuery.SetDataOptions
+): TResponseData | undefined {
+  return queryClient.setQueryData(queryKey, updater, options);
+}
+
 // eslint-disable-next-line import/export
 export * from '@tanstack/react-query';
 
 // eslint-disable-next-line import/export
-export {DEFAULT_QUERY_CLIENT_CONFIG, useApiQuery};
+export {DEFAULT_QUERY_CLIENT_CONFIG, useApiQuery, setApiQueryData};

static/app/views/issueList/mutations/useCreateSavedSearch.tsx

@@ -1,5 +1,10 @@
 import {SavedSearch, SavedSearchType, SavedSearchVisibility} from 'sentry/types';
-import {useMutation, UseMutationOptions, useQueryClient} from 'sentry/utils/queryClient';
+import {
+  setApiQueryData,
+  useMutation,
+  UseMutationOptions,
+  useQueryClient,
+} from 'sentry/utils/queryClient';
 import RequestError from 'sentry/utils/requestError/requestError';
 import useApi from 'sentry/utils/useApi';
 import {makeFetchSavedSearchesForOrgQueryKey} from 'sentry/views/issueList/queries/useFetchSavedSearchesForOrg';
@@ -37,7 +42,8 @@ export const useCreateSavedSearch = (
           data,
         }),
       onSuccess: (savedSearch, parameters, context) => {
-        queryClient.setQueryData(
+        setApiQueryData(
+          queryClient,
           makeFetchSavedSearchesForOrgQueryKey({orgSlug: parameters.orgSlug}),
           oldData => {
             if (!Array.isArray(oldData)) {

static/app/views/issueList/mutations/useDeleteSavedSearch.tsx

@@ -1,7 +1,12 @@
 import {addErrorMessage} from 'sentry/actionCreators/indicator';
 import {t} from 'sentry/locale';
 import {SavedSearch} from 'sentry/types';
-import {useMutation, UseMutationOptions, useQueryClient} from 'sentry/utils/queryClient';
+import {
+  setApiQueryData,
+  useMutation,
+  UseMutationOptions,
+  useQueryClient,
+} from 'sentry/utils/queryClient';
 import RequestError from 'sentry/utils/requestError/requestError';
 import useApi from 'sentry/utils/useApi';
 import {makeFetchSavedSearchesForOrgQueryKey} from 'sentry/views/issueList/queries/useFetchSavedSearchesForOrg';
@@ -46,7 +51,8 @@ export const useDeleteSavedSearchOptimistic = (
         makeFetchSavedSearchesForOrgQueryKey({orgSlug: variables.orgSlug})
       );
 
-      queryClient.setQueryData(
+      setApiQueryData(
+        queryClient,
         makeFetchSavedSearchesForOrgQueryKey({orgSlug: variables.orgSlug}),
         oldData => {
           if (!Array.isArray(oldData)) {
@@ -65,7 +71,8 @@ export const useDeleteSavedSearchOptimistic = (
       addErrorMessage(t('Failed to delete saved search.'));
 
       if (context) {
-        queryClient.setQueryData(
+        setApiQueryData(
+          queryClient,
           makeFetchSavedSearchesForOrgQueryKey({orgSlug: variables.orgSlug}),
           context.previousSavedSearches
         );

static/app/views/monitors/details.tsx

@@ -8,7 +8,7 @@ import LoadingIndicator from 'sentry/components/loadingIndicator';
 import PageFilterBar from 'sentry/components/organizations/pageFilterBar';
 import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import {space} from 'sentry/styles/space';
-import {useApiQuery, useQueryClient} from 'sentry/utils/queryClient';
+import {setApiQueryData, useApiQuery, useQueryClient} from 'sentry/utils/queryClient';
 import useOrganization from 'sentry/utils/useOrganization';
 import usePageFilters from 'sentry/utils/usePageFilters';
 
@@ -39,7 +39,7 @@ function MonitorDetails({params, location}: Props) {
   const {data: monitor} = useApiQuery<Monitor>(queryKey, {staleTime: 0});
 
   function onUpdate(data: Monitor) {
-    queryClient.setQueryData(queryKey, data);
+    setApiQueryData(queryClient, queryKey, data);
   }
 
   if (!monitor) {

static/app/views/monitors/edit.tsx

@@ -6,7 +6,7 @@ import LoadingError from 'sentry/components/loadingError';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
 import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import {t} from 'sentry/locale';
-import {useApiQuery, useQueryClient} from 'sentry/utils/queryClient';
+import {setApiQueryData, useApiQuery, useQueryClient} from 'sentry/utils/queryClient';
 import useOrganization from 'sentry/utils/useOrganization';
 import {useParams} from 'sentry/utils/useParams';
 import {normalizeUrl} from 'sentry/utils/withDomainRequired';
@@ -31,7 +31,7 @@ export default function EditMonitor() {
   });
 
   function onSubmitSuccess(data: Monitor) {
-    queryClient.setQueryData([queryKeyUrl], data);
+    setApiQueryData(queryClient, [queryKeyUrl], data);
     browserHistory.push(
       normalizeUrl(`/organizations/${organization.slug}/crons/${data.slug}/`)
     );