diff --git a/src/app/WardrobePage/support/ItemSupportDrawer.js b/src/app/WardrobePage/support/ItemSupportDrawer.js
index 71ca9cf..6821d1e 100644
--- a/src/app/WardrobePage/support/ItemSupportDrawer.js
+++ b/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 }) {
Item ID:
{item.id}
+ Restricted zones:
+
+
+
@@ -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 ;
+ }
+
+ if (error) {
+ return {error.message};
+ }
+
+ 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`
diff --git a/src/app/apolloClient.js b/src/app/apolloClient.js
index 7160af5..9601b4f 100644
--- a/src/app/apolloClient.js
+++ b/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);
+ },
},
},