fix performance bummers

src/apollo.tsx

@@ -44,7 +44,7 @@ export function createClient({
         const { message, locations, path, extensions } = error;
         onError?.(message);
         console.log(
-          `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
+          `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`,
         );
         if (extensions.delay && onDelay) {
           onDelay(extensions.remaining as number);
@@ -59,7 +59,12 @@ export function createClient({
     version: "Browser",
     link: from([errorLink, authLink.concat(httpLink)]),
 
-    cache: new InMemoryCache(),
+    cache: new InMemoryCache({
+      typePolicies: {
+        Location: { merge: true },
+        CampResources: { merge: true },
+      },
+    }),
   });
 
   return client;

src/components/layout.tsx

@@ -28,20 +28,23 @@ export function Layout({
   const [timeDifference, setTimeDifference] = useState<number>(0);
   const [lastMeTime, setLastMeTime] = useState<number>(0);
 
-  const { data } = useMeQuery({
+  const { data, networkStatus } = useMeQuery({
     pollInterval: 60000,
+    fetchPolicy: "cache-first",
     skip: !showHero,
-    onCompleted: (data) => {},
-  });
-  useEffect(() => {
-    if (data?.me?.now) {
-      const serverNow = Number(data.me.now);
-      if (serverNow !== lastMeTime) {
-        setTimeDifference(now - serverNow);
-        setLastMeTime(serverNow);
+    onCompleted: (data, ...args) => {
+      if (data?.me?.now) {
+        const serverNow = Number(data.me.now);
+        if (serverNow !== lastMeTime) {
+          console.log("Update time drift:", now - serverNow);
+          setTimeDifference(now - serverNow);
+          setLastMeTime(serverNow);
+        }
       }
-    }
-  }, [data?.me?.now]);
+    },
+    returnPartialData: true,
+  });
+
   const [currentDelay, setCurrentDelay] = useDelay();
   const [currentMaxDelay, setCurrentMaxDelay] = useState<number>(0);
   const nextTime =

src/game/index.tsx

@@ -44,7 +44,9 @@ export default function Home(): JSX.Element {
   const routeParts = router.route.split("/");
   const terminalRoute = routeParts.pop();
   const [token, setToken] = useToken();
-  const { data, loading, error } = useMeQuery();
+  const { data, loading, error } = useMeQuery({
+    fetchPolicy: "cache-only",
+  });
   const [selectedTab, setSelectedTab] = useState<string>(
     terminalRoute ?? "play",
   );

src/game/locations/settlement/index.tsx

@@ -78,8 +78,9 @@ export function SettlementManager({
     useDestroyBuildingMutation();
   const [destroyConfirmation, setDestroyConfirmation] =
     useState<PlayerLocation | null>(null);
-  const [selectedBuilding, setSelectedBuilding] =
-    useState<PlayerLocation | null>(null);
+  const [selectedBuildingId, setSelectedBuildingId] = useState<string | null>(
+    null,
+  );
   const [buildBuilding, setBuildBuilding] = useState<PlayerLocationType | null>(
     null,
   );
@@ -105,6 +106,10 @@ export function SettlementManager({
     }
   }, [hero.home, onClose]);
 
+  function setSelectedBuilding(location: PlayerLocation | null) {
+    setSelectedBuildingId(location?.id ?? null);
+  }
+
   // home type narrowing
   if (!hero.home) {
     return null;
@@ -130,6 +135,13 @@ export function SettlementManager({
 
   const capital = capitalData as PlayerLocation;
 
+  const selectedBuilding: PlayerLocation | null =
+    capital.connections.find((conn) => conn.id === selectedBuildingId) ??
+    (adjacentTiles as PlayerLocation[]).find(
+      (conn) => conn.id === selectedBuildingId,
+    ) ??
+    null;
+
   const resources = combineResources(
     capital.resources,
     ...capital.connections.map((loc) => loc.resources),

src/hooks/use-hero.ts

@@ -1,7 +1,9 @@
 import { useMeQuery, Hero } from "src/generated/graphql";
 
 export function useHero(): Hero | undefined {
-  const { data } = useMeQuery();
+  const { data } = useMeQuery({
+    fetchPolicy: "cache-only",
+  });
 
   return (data?.me?.account?.hero as Hero) ?? undefined;
 }

src/hooks/use-location.ts

@@ -11,7 +11,6 @@ export function useLocation(): LocationDetails | null {
   const hero = useHero();
 
   const { data: locationData } = useLocationDetailsQuery({
-    fetchPolicy: "network-only",
     variables: hero?.location
       ? {
           location: {