add restricted zones to item support UI

Honestly kinda embarrased I forgot this!

src/app/WardrobePage/support/ItemSupportDrawer.js

@@ -20,6 +20,7 @@ import {
   Select,
   Spinner,
   Stack,
+  Text,
   useBreakpointValue,
   useColorModeValue,
   useDisclosure,
@@ -78,6 +79,10 @@ function ItemSupportDrawer({ item, isOpen, onClose }) {
             <Metadata>
               <MetadataLabel>Item ID:</MetadataLabel>
               <MetadataValue>{item.id}</MetadataValue>
+              <MetadataLabel>Restricted zones:</MetadataLabel>
+              <MetadataValue>
+                <ItemSupportRestrictedZones item={item} />
+              </MetadataValue>
             </Metadata>
             <Stack spacing="8" marginTop="6">
               <ItemSupportFields item={item} />
@@ -90,6 +95,52 @@ function ItemSupportDrawer({ item, isOpen, onClose }) {
   );
 }
 
+function ItemSupportRestrictedZones({ item }) {
+  const { speciesId, colorId } = React.useContext(OutfitStateContext);
+
+  // NOTE: It would be a better reflection of the data to just query restricted
+  //       zones right off the item... but we already have them in cache from
+  //       the appearance, so query them that way to be instant in practice!
+  const { loading, error, data } = useQuery(
+    gql`
+      query ItemSupportRestrictedZones(
+        $itemId: ID!
+        $speciesId: ID!
+        $colorId: ID!
+      ) {
+        item(id: $itemId) {
+          id
+          appearanceOn(speciesId: $speciesId, colorId: $colorId) {
+            restrictedZones {
+              id
+              label
+            }
+          }
+        }
+      }
+    `,
+    { variables: { itemId: item.id, speciesId, colorId } }
+  );
+
+  if (loading) {
+    return <Spinner size="xs" />;
+  }
+
+  if (error) {
+    return <Text color="red.400">{error.message}</Text>;
+  }
+
+  const restrictedZones = data?.item?.appearanceOn?.restrictedZones || [];
+  if (restrictedZones.length === 0) {
+    return "None";
+  }
+
+  return restrictedZones
+    .map((z) => `${z.label} (${z.id})`)
+    .sort()
+    .join(", ");
+}
+
 function ItemSupportFields({ item }) {
   const { loading, error, data } = useQuery(
     gql`

src/app/apolloClient.js

@@ -16,6 +16,11 @@ const typePolicies = {
           toReference({ __typename: "Item", id }, true)
         );
       },
+
+      // Similar for a single item lookup!
+      item: (_, { args, toReference }) => {
+        return toReference({ __typename: "Item", id: args.id }, true);
+      },
     },
   },