From bf21716db007a803ae5605b1e59a5478b0b8b7b9 Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Thu, 27 Aug 2020 21:26:24 -0700
Subject: [PATCH] simplify PetAppearance client-side caching

Previously, we would load all `petAppearances` in `PosePicker`, and use cache keys to instantly find it again as a single `petAppearance` in `OutfitPreview` after switching poses.

In this change, we instead have `PosePicker` explicitly load all 6 poses as separate `petAppearance` queries. This simplifies cache sharing between the two components' queries: Apollo can do it automatically, because they were queried the same way in the first place.

I'm doing this in preparation for changing the `id` field of `PetAppearance`, to become `petStateId`. This will help me build pet appearance support tools, by giving the appearances stable identifiers that won't be affected by editing which pose an appearance is!
---
 src/app/WardrobePage/PosePicker.js | 101 ++++++++++++++++++++++-------
 src/app/apolloClient.js            |   9 ---
 2 files changed, 79 insertions(+), 31 deletions(-)

diff --git a/src/app/WardrobePage/PosePicker.js b/src/app/WardrobePage/PosePicker.js
index a37be65..e1af1ce 100644
--- a/src/app/WardrobePage/PosePicker.js
+++ b/src/app/WardrobePage/PosePicker.js
@@ -376,36 +376,93 @@ function usePoses(speciesId, colorId, selectedPose) {
   const { loading, error, data } = useQuery(
     gql`
       query PosePicker($speciesId: ID!, $colorId: ID!) {
-        petAppearances(speciesId: $speciesId, colorId: $colorId) {
-          id
-          petStateId
-          bodyId
-          pose
-          ...PetAppearanceForOutfitPreview
+        happyMasc: petAppearance(
+          speciesId: $speciesId
+          colorId: $colorId
+          pose: HAPPY_MASC
+        ) {
+          ...PetAppearanceForPosePicker
         }
+        sadMasc: petAppearance(
+          speciesId: $speciesId
+          colorId: $colorId
+          pose: SAD_MASC
+        ) {
+          ...PetAppearanceForPosePicker
+        }
+        sickMasc: petAppearance(
+          speciesId: $speciesId
+          colorId: $colorId
+          pose: SICK_MASC
+        ) {
+          ...PetAppearanceForPosePicker
+        }
+        happyFem: petAppearance(
+          speciesId: $speciesId
+          colorId: $colorId
+          pose: HAPPY_FEM
+        ) {
+          ...PetAppearanceForPosePicker
+        }
+        sadFem: petAppearance(
+          speciesId: $speciesId
+          colorId: $colorId
+          pose: SAD_FEM
+        ) {
+          ...PetAppearanceForPosePicker
+        }
+        sickFem: petAppearance(
+          speciesId: $speciesId
+          colorId: $colorId
+          pose: SICK_FEM
+        ) {
+          ...PetAppearanceForPosePicker
+        }
+      }
+
+      fragment PetAppearanceForPosePicker on PetAppearance {
+        id
+        petStateId
+        bodyId
+        pose
+        ...PetAppearanceForOutfitPreview
       }
       ${petAppearanceFragment}
     `,
     { variables: { speciesId, colorId } }
   );
 
-  const petAppearances = data?.petAppearances || [];
-  const buildPoseInfo = (pose) => {
-    const appearance = petAppearances.find((pa) => pa.pose === pose);
-    return {
-      ...appearance,
-      isAvailable: Boolean(appearance),
-      isSelected: selectedPose === pose,
-    };
-  };
-
   const poseInfos = {
-    happyMasc: buildPoseInfo("HAPPY_MASC"),
-    sadMasc: buildPoseInfo("SAD_MASC"),
-    sickMasc: buildPoseInfo("SICK_MASC"),
-    happyFem: buildPoseInfo("HAPPY_FEM"),
-    sadFem: buildPoseInfo("SAD_FEM"),
-    sickFem: buildPoseInfo("SICK_FEM"),
+    happyMasc: {
+      ...data?.happyMasc,
+      isAvailable: Boolean(data?.happyMasc),
+      isSelected: selectedPose === "HAPPY_MASC",
+    },
+    sadMasc: {
+      ...data?.sadMasc,
+      isAvailable: Boolean(data?.sadMasc),
+      isSelected: selectedPose === "SAD_MASC",
+    },
+    sickMasc: {
+      ...data?.sickMasc,
+      isAvailable: Boolean(data?.sickMasc),
+      isSelected: selectedPose === "SICK_MASC",
+    },
+    happyFem: {
+      ...data?.happyFem,
+      isAvailable: Boolean(data?.happyFem),
+      isSelected: selectedPose === "HAPPY_FEM",
+    },
+    sadFem: {
+      ...data?.sadFem,
+      isAvailable: Boolean(data?.sadFem),
+      isSelected: selectedPose === "SAD_FEM",
+    },
+    sickFem: {
+      ...data?.sickFem,
+      isAvailable: Boolean(data?.sickFem),
+      isSelected: selectedPose === "SICK_FEM",
+    },
   };
 
   return { loading, error, poseInfos };
diff --git a/src/app/apolloClient.js b/src/app/apolloClient.js
index 000315e..cbfdcda 100644
--- a/src/app/apolloClient.js
+++ b/src/app/apolloClient.js
@@ -16,15 +16,6 @@ const typePolicies = {
           toReference({ __typename: "Item", id }, true)
         );
       },
-
-      // Teach Apollo how to serve `petAppearance` queries from the cache. That
-      // way, when you switch pet poses, Apollo knows it already has the
-      // appearance data and doesn't need to ask the server again!
-      petAppearance: (_, { args, toReference }) => {
-        const { speciesId, colorId, pose } = args;
-        const id = `${speciesId}-${colorId}-${pose}`;
-        return toReference({ __typename: "PetAppearance", id }, true);
-      },
     },
   },