Fix multiple Apollo clients issue

data-access/src/app/application-services/member/member.data.ts

@@ -100,16 +100,13 @@ export class MemberDataApiImpl
   }
 
   async getMemberByIdWithCommunity(memberId: string): Promise<MemberData> {
-    const result = await this.model.findById(memberId).populate('community').exec();
-    return result;
+    return await this.model.findById(memberId).populate('community').exec();
   }
   async getMemberByIdWithCommunityAccountRole(memberId: string): Promise<MemberData> {
-    const result = await this.model.findById(memberId).populate('community').populate('accounts.user').populate('role').exec();
-    return result;
+    return await this.model.findById(memberId).populate('community').populate('accounts.user').populate('role').exec();  
   }
   async getMemberById(memberId: string): Promise<MemberData> {
-    let result = await (await this.findOneById(memberId)).populate('role');
-    return result;
+    return await this.model.findById(memberId).populate('role');
   }
 
   async getMembersByUserExternalId(userExternalId: string): Promise<MemberData[]> {

ui-community/src/components/shared/apollo-connection.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { FC, useEffect } from 'react';
 
 import { ApolloClient, ApolloLink, ApolloProvider, HttpLink, InMemoryCache, from } from '@apollo/client';
 
@@ -7,11 +7,39 @@ import { setContext } from '@apollo/client/link/context';
 import { useAuth } from 'react-oidc-context';
 import { useParams } from 'react-router-dom';
 
+const countryLink = new HttpLink({
+  uri: 'https://countries.trevorblades.com/'
+});
+
+
+const httpLink = new BatchHttpLink({
+  uri: `${import.meta.env.VITE_FUNCTION_ENDPOINT}`,
+  batchMax: 15, // No more than 15 operations per batch
+  batchInterval: 50 // Wait no more than 50ms after first batched operation
+});
+
+const client = new ApolloClient({
+  cache: new InMemoryCache(),
+  connectToDevTools: import.meta.env.NODE_ENV !== 'production'
+});
+
 const ApolloConnection: FC<any> = (props) => {
   const auth = useAuth();
   const params = useParams(); // useParams.memberId won't work here because ApolloConnection wraps the Routes, not inside a Route
 
+  const withToken = setContext(async (_, { headers }) => {
+      return getAuthHeaders(headers);
+
+  });
+
   const getAuthHeaders = async (headers: any) => {
+    if(auth.isAuthenticated !== true) {
+      return {
+        headers: {
+          ...headers
+        }
+      };
+    }
     const access_token = auth.user?.access_token;
     console.log('auth-token', access_token);
     const returnHeaders = { ...headers };
@@ -31,37 +59,14 @@ const ApolloConnection: FC<any> = (props) => {
     return { headers: returnHeaders };
   };
 
-  const withToken = setContext(async (_, { headers }) => {
-    if (auth.isAuthenticated) {
-      return getAuthHeaders(headers);
-    } else {
-      return {
-        headers: {
-          ...headers
-        }
-      };
-    }
-  });
-
-  const httpLink = new BatchHttpLink({
-    uri: `${import.meta.env.VITE_FUNCTION_ENDPOINT}`,
-    batchMax: 15, // No more than 15 operations per batch
-    batchInterval: 50 // Wait no more than 50ms after first batched operation
-  });
 
-  const countryLink = new HttpLink({
-    uri: 'https://countries.trevorblades.com/'
-  });
-
-  const client = new ApolloClient({
-    link: ApolloLink.split(
+  useEffect(() => {
+    client.setLink(ApolloLink.split(
       (operation) => operation.getContext().clientName === 'country',
       countryLink,
       from([withToken, httpLink])
-    ),
-    cache: new InMemoryCache(),
-    connectToDevTools: import.meta.env.NODE_ENV !== 'production'
-  });
+    ));
+  },[auth]);
 
   return <ApolloProvider client={client}>{props.children}</ApolloProvider>;
 };