Fix api keys refresh (#2283)

* Move code to dedicated function

* Format cached data with proper typename

front/src/modules/apollo/optimistic-effect/hooks/useOptimisticEffect.ts

@@ -121,11 +121,16 @@ export const useOptimisticEffect = () => {
           .getValue();
 
         Object.values(optimisticEffects).forEach((optimisticEffect) => {
+          // We need to update the typename when createObject type differs from listObject types
+          // It is the case for apiKey, where the creation route returns an ApiKeyToken type
+          const formattedNewData = newData.map((data) => {
+            return { ...data, __typename: typename };
+          });
           if (optimisticEffect.typename === typename) {
             optimisticEffect.writer({
               cache: apolloClient.cache,
               query: optimisticEffect.query,
-              newData,
+              newData: formattedNewData,
               variables: optimisticEffect.variables,
             });
           }

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

@@ -69,25 +69,32 @@ export const SettingsDevelopersApiKeyDetail = () => {
     }
   };
 
+  const createIntegration = async (
+    name: string,
+    newExpiresAt: string | null,
+  ) => {
+    return await insertOneApiKey({
+      variables: {
+        data: {
+          name: name,
+          expiresAt: newExpiresAt,
+        },
+      },
+      update: (_cache, { data }) => {
+        if (data?.createOneApiKey) {
+          triggerOptimisticEffects('ApiKey', [data?.createOneApiKey]);
+        }
+      },
+    });
+  };
+
   const regenerateApiKey = async () => {
     if (apiKeyData?.name) {
       const newExpiresAt = computeNewExpirationDate(
         apiKeyData.expiresAt,
         apiKeyData.createdAt,
       );
-      const apiKey = await insertOneApiKey({
-        variables: {
-          data: {
-            name: apiKeyData.name,
-            expiresAt: newExpiresAt,
-          },
-        },
-        update: (_cache, { data }) => {
-          if (data?.createOneApiKey) {
-            triggerOptimisticEffects('ApiKey', [data?.createOneApiKey]);
-          }
-        },
-      });
+      const apiKey = await createIntegration(apiKeyData.name, newExpiresAt);
       await deleteIntegration(false);
       if (apiKey.data?.createOneApiKey) {
         setGeneratedApi(