Refactor apollo client

expo · Sep 21, 2023 · 5f651ef · 5f651ef
1 parent 6e9fe38
commit 5f651ef
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 63 deletions.
diff --git a/apps/menu-bar/src/api/ApolloClient.tsx b/apps/menu-bar/src/api/ApolloClient.tsx
@@ -4,12 +4,10 @@ import {
   FieldFunctionOptions,
   HttpLink,
   InMemoryCache,
-  NormalizedCacheObject,
   concat,
   ApolloProvider,
 } from '@apollo/client';
 import { MMKVWrapper, persistCache } from 'apollo3-cache-persist';
-import { useEffect, useState } from 'react';
 
 import Config from './Config';
 import possibleTypesData from '../generated/graphql.possibleTypes.json';
@@ -32,9 +30,6 @@ const { possibleTypes } = possibleTypesData;
 const cache = new InMemoryCache({
   possibleTypes,
   typePolicies: {
-    UserActor: {
-      keyFields: ['id'],
-    },
     AppQuery: {
       keyFields: ['byId', ['id']],
     },
@@ -61,69 +56,38 @@ const cache = new InMemoryCache({
   },
 });
 
-export const useApolloClient = () => {
-  const [sessionSecret, setSessionSecret] = useState(storage.getString('sessionSecret'));
-  const [client, setClient] = useState<ApolloClient<NormalizedCacheObject>>();
-
-  useEffect(() => {
-    async function init() {
-      await persistCache({
-        cache,
-        storage: new MMKVWrapper(storage),
-        key: 'apollo-cache-persist',
-      });
-
-      const authMiddlewareLink = new ApolloLink((operation, forward) => {
-        if (sessionSecret) {
-          operation.setContext(({ headers = {} }) => ({
-            headers: {
-              ...headers,
-              'expo-session': sessionSecret,
-            },
-          }));
-        }
-
-        return forward(operation);
-      });
-
-      setClient(
-        new ApolloClient({
-          link: concat(authMiddlewareLink, httpLink),
-          cache,
-        })
-      );
-    }
-
-    init();
-  }, [sessionSecret]);
+const authMiddlewareLink = new ApolloLink((operation, forward) => {
+  const sessionSecret = storage.getString('sessionSecret');
+  if (sessionSecret) {
+    operation.setContext(({ headers = {} }) => ({
+      headers: {
+        ...headers,
+        'expo-session': sessionSecret,
+      },
+    }));
+  }
 
-  useEffect(() => {
-    const listener = storage.addOnValueChangedListener((changedKey) => {
-      if (changedKey === 'sessionSecret') {
-        setSessionSecret(storage.getString('sessionSecret'));
-      }
-    });
+  return forward(operation);
+});
 
-    return () => {
-      listener.remove();
-    };
+async function init() {
+  await persistCache({
+    cache,
+    storage: new MMKVWrapper(storage),
+    key: 'apollo-cache-persist',
   });
+}
+init();
 
-  return {
-    client,
-  };
-};
+export const apolloClient = new ApolloClient({
+  link: concat(authMiddlewareLink, httpLink),
+  cache,
+});
 
 export function withApolloProvider<P extends object>(Component: React.ComponentType<P>) {
   return (props: P) => {
-    const { client } = useApolloClient();
-
-    if (!client) {
-      return null;
-    }
-
     return (
-      <ApolloProvider client={client}>
+      <ApolloProvider client={apolloClient}>
         <Component {...props} />
       </ApolloProvider>
     );

diff --git a/apps/menu-bar/src/graphql/apps.gql b/apps/menu-bar/src/graphql/apps.gql
@@ -13,7 +13,8 @@ fragment AppForPinnedList on App {
 }
 
 query GetAppsForPinnedList {
-  viewer {
+  meUserActor {
+    id
     pinnedApps {
       ...AppForPinnedList
     }

diff --git a/apps/menu-bar/src/hooks/useGetPinnedApps.ts b/apps/menu-bar/src/hooks/useGetPinnedApps.ts
@@ -13,8 +13,8 @@ export const useGetPinnedApps = () => {
     fetchPolicy: 'cache-and-network',
   });
 
-  const pinnedApps = data?.viewer?.pinnedApps;
-  const accounts = data?.viewer?.accounts;
+  const pinnedApps = data?.meUserActor?.pinnedApps;
+  const accounts = data?.meUserActor?.accounts;
 
   const apps = useMemo(() => {
     let apps: PinnedApp[] = [];