From c64f54282929a010f9eb2fdc8a0c16182b536a4c Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Tue, 20 Apr 2021 02:26:31 -0700
Subject: [PATCH] Reload Your Outfits after saving an outfit

---
 src/app/WardrobePage/ItemsPanel.js | 23 ++++++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/src/app/WardrobePage/ItemsPanel.js b/src/app/WardrobePage/ItemsPanel.js
index d80ad94..c6e4d52 100644
--- a/src/app/WardrobePage/ItemsPanel.js
+++ b/src/app/WardrobePage/ItemsPanel.js
@@ -29,7 +29,7 @@ import { IoCloudUploadOutline } from "react-icons/io5";
 import { MdMoreVert } from "react-icons/md";
 import useCurrentUser from "../components/useCurrentUser";
 import gql from "graphql-tag";
-import { useMutation } from "@apollo/client";
+import { useApolloClient, useMutation } from "@apollo/client";
 
 /**
  * ItemsPanel shows the items in the current outfit, and lets the user toggle
@@ -320,6 +320,27 @@ function useOutfitSaving(outfitState) {
         closetedItemIds: outfitState.closetedItemIds,
       },
       context: { sendAuth: true },
+      update: (cache, { data: { outfit } }) => {
+        // After save, add this outfit to the current user's outfit list. This
+        // will help when navigating back to Your Outfits, to force a refresh.
+        // https://www.apollographql.com/docs/react/caching/cache-interaction/#example-updating-the-cache-after-a-mutation
+        cache.modify({
+          id: cache.identify(outfit.creator),
+          fields: {
+            outfits: (existingOutfitRefs = [], {}) => {
+              const newOutfitRef = cache.writeFragment({
+                data: outfit,
+                fragment: gql`
+                  fragment NewOutfit on Outfit {
+                    id
+                  }
+                `,
+              });
+              return [...existingOutfitRefs, newOutfitRef];
+            },
+          },
+        });
+      },
     }
   );