Fix cache management (#2264)

front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeyDetail.tsx

@@ -1,13 +1,12 @@
 import { useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
-import { getOperationName } from '@apollo/client/utilities';
 import styled from '@emotion/styled';
 import { useRecoilState } from 'recoil';
 
+import { useOptimisticEffect } from '@/apollo/optimistic-effect/hooks/useOptimisticEffect';
 import { SettingsHeaderContainer } from '@/settings/components/SettingsHeaderContainer';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { ApiKeyInput } from '@/settings/developers/components/ApiKeyInput';
-import { GET_API_KEYS } from '@/settings/developers/graphql/queries/getApiKeys';
 import { useGeneratedApiKeys } from '@/settings/developers/hooks/useGeneratedApiKeys';
 import { generatedApiKeyFamilyState } from '@/settings/developers/states/generatedApiKeyFamilyState';
 import { computeNewExpirationDate } from '@/settings/developers/utils/compute-new-expiration-date';
@@ -42,6 +41,7 @@ const StyledInputContainer = styled.div`
 export const SettingsDevelopersApiKeyDetail = () => {
   const navigate = useNavigate();
   const { apiKeyId = '' } = useParams();
+  const { triggerOptimisticEffects } = useOptimisticEffect();
 
   const setGeneratedApi = useGeneratedApiKeys();
   const [generatedApiKey] = useRecoilState(
@@ -59,7 +59,10 @@ export const SettingsDevelopersApiKeyDetail = () => {
   const deleteIntegration = async (redirect = true) => {
     await deleteApiKey({
       variables: { apiKeyId },
-      refetchQueries: [getOperationName(GET_API_KEYS) ?? ''],
+      update: (cache) =>
+        cache.evict({
+          id: cache.identify({ __typename: 'ApiKey', id: apiKeyId }),
+        }),
     });
     if (redirect) {
       navigate('/settings/developers/api-keys');
@@ -79,7 +82,11 @@ export const SettingsDevelopersApiKeyDetail = () => {
             expiresAt: newExpiresAt,
           },
         },
-        refetchQueries: [getOperationName(GET_API_KEYS) ?? ''],
+        update: (_cache, { data }) => {
+          if (data?.createOneApiKey) {
+            triggerOptimisticEffects('ApiKey', [data?.createOneApiKey]);
+          }
+        },
       });
       await deleteIntegration(false);
       if (apiKey.data?.createOneApiKey) {