From 236742e88c7f7580a7e38ccc6d536429ca56f404 Mon Sep 17 00:00:00 2001
From: martmull <martmull@hotmail.fr>
Date: Mon, 30 Oct 2023 17:48:34 +0100
Subject: [PATCH] Fix api keys refresh (#2283)

* Move code to dedicated function

* Format cached data with proper typename
---
 .../hooks/useOptimisticEffect.ts              |  7 +++-
 .../SettingsDevelopersApiKeyDetail.tsx        | 33 +++++++++++--------
 2 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/front/src/modules/apollo/optimistic-effect/hooks/useOptimisticEffect.ts b/front/src/modules/apollo/optimistic-effect/hooks/useOptimisticEffect.ts
index a197d349e..f2d97daae 100644
--- a/front/src/modules/apollo/optimistic-effect/hooks/useOptimisticEffect.ts
+++ b/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,
             });
           }
diff --git a/front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeyDetail.tsx b/front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeyDetail.tsx
index fbf1bc8b1..f59709b73 100644
--- a/front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeyDetail.tsx
+++ b/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(