From 5e1dfde3e4f6cb838abb35b8081b75439bbb43d9 Mon Sep 17 00:00:00 2001
From: Marie <51697796+ijreilly@users.noreply.github.com>
Date: Fri, 31 May 2024 10:28:44 +0200
Subject: [PATCH] After createOneDbConnection mutation, update cache manually
 instead of using refetchQuery (#5684)

Closes #5057.

RefetchQuery is unreliable - [it won't be executed if the component is
unmounted](https://github.com/apollographql/apollo-client/issues/5419),
which is the case here because of the redirection that occurs after the
mutation.
We want to avoid using refetchQuery as much as possible, and write
directly in the cache instead.
---
 .../hooks/useCreateOneDatabaseConnection.ts   | 26 ++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/packages/twenty-front/src/modules/databases/hooks/useCreateOneDatabaseConnection.ts b/packages/twenty-front/src/modules/databases/hooks/useCreateOneDatabaseConnection.ts
index 3221c305c77a..8155f348def3 100644
--- a/packages/twenty-front/src/modules/databases/hooks/useCreateOneDatabaseConnection.ts
+++ b/packages/twenty-front/src/modules/databases/hooks/useCreateOneDatabaseConnection.ts
@@ -1,5 +1,4 @@
 import { ApolloClient, useMutation } from '@apollo/client';
-import { getOperationName } from '@apollo/client/utilities';
 
 import { CREATE_ONE_DATABASE_CONNECTION } from '@/databases/graphql/mutations/createOneDatabaseConnection';
 import { GET_MANY_DATABASE_CONNECTIONS } from '@/databases/graphql/queries/findManyDatabaseConnections';
@@ -9,6 +8,7 @@ import {
   CreateServerMutation,
   CreateServerMutationVariables,
 } from '~/generated-metadata/graphql';
+import { isDefined } from '~/utils/isDefined';
 
 export const useCreateOneDatabaseConnection = () => {
   const apolloMetadataClient = useApolloMetadataClient();
@@ -27,8 +27,28 @@ export const useCreateOneDatabaseConnection = () => {
       variables: {
         input,
       },
-      awaitRefetchQueries: true,
-      refetchQueries: [getOperationName(GET_MANY_DATABASE_CONNECTIONS) ?? ''],
+      update: (cache, { data }) => {
+        const createdRemoteServer = data?.createOneRemoteServer;
+        if (!createdRemoteServer) return;
+
+        const getManyDatabaseConnectionsQuery = {
+          query: GET_MANY_DATABASE_CONNECTIONS,
+          variables: {
+            input: { foreignDataWrapperType: input.foreignDataWrapperType },
+          },
+        };
+
+        if (isDefined(cache.readQuery(getManyDatabaseConnectionsQuery))) {
+          cache.updateQuery(getManyDatabaseConnectionsQuery, (cachedQuery) => ({
+            findManyRemoteServersByType: [
+              ...cachedQuery.findManyRemoteServersByType,
+              createdRemoteServer,
+            ],
+          }));
+
+          return;
+        }
+      },
     });
   };