From 102a29fefd3467dff6bee44986e3f30f4e2ef000 Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Tue, 5 Jan 2021 06:39:12 +0000
Subject: [PATCH] show outfit name faster, instead of "Untitled Outfit"

That'll still show up when the outfit is still loading, but this lets us use the Apollo cache to show the name instantly if you're clicking through a link from Your Outfits
---
 src/app/WardrobePage/useOutfitState.js | 15 +++++++++++++--
 src/app/apolloClient.js                |  3 +++
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/app/WardrobePage/useOutfitState.js b/src/app/WardrobePage/useOutfitState.js
index 1017b94..1e27b12 100644
--- a/src/app/WardrobePage/useOutfitState.js
+++ b/src/app/WardrobePage/useOutfitState.js
@@ -18,7 +18,7 @@ function useOutfitState() {
     initialState
   );
 
-  const { id, name, speciesId, colorId, pose, appearanceId } = state;
+  const { id, speciesId, colorId, pose, appearanceId } = state;
 
   // It's more convenient to manage these as a Set in state, but most callers
   // will find it more convenient to access them as arrays! e.g. for `.map()`
@@ -28,7 +28,11 @@ function useOutfitState() {
 
   // If there's an outfit ID (i.e. we're on /outfits/:id), load basic data
   // about the outfit. We'll use it to initialize the local state.
-  const { loading: outfitLoading, error: outfitError } = useQuery(
+  const {
+    loading: outfitLoading,
+    error: outfitError,
+    data: outfitData,
+  } = useQuery(
     gql`
       query OutfitStateSavedOutfit($id: ID!) {
         outfit(id: $id) {
@@ -58,7 +62,10 @@ function useOutfitState() {
     {
       variables: { id },
       skip: id == null,
+      returnPartialData: true,
       onCompleted: (outfitData) => {
+        // This is only called once the _entire_ query loads, regardless of
+        // `returnPartialData`. We just use that for some early UI!
         const outfit = outfitData.outfit;
         dispatchToOutfit({
           type: "reset",
@@ -73,6 +80,10 @@ function useOutfitState() {
     }
   );
 
+  // Let the outfit name appear early, from partial data, even if the full
+  // outfit state isn't initialized yet.
+  const name = state.name || outfitData?.outfit?.name;
+
   const {
     loading: itemsLoading,
     error: itemsError,
diff --git a/src/app/apolloClient.js b/src/app/apolloClient.js
index a33becf..0f4cb5b 100644
--- a/src/app/apolloClient.js
+++ b/src/app/apolloClient.js
@@ -32,6 +32,9 @@ const typePolicies = {
       color: (_, { args, toReference }) => {
         return toReference({ __typename: "Color", id: args.id }, true);
       },
+      outfit: (_, { args, toReference }) => {
+        return toReference({ __typename: "Outfit", id: args.id }, true);
+      },
       user: (_, { args, toReference }) => {
         return toReference({ __typename: "User", id: args.id }, true);
       },