special color mutation actually working!

Note that there's a bug when switching back to the null case… when I look in the Apollo dev tools, it's definitely getting set in the cache correctly at the right time… but the query isn't updating for some reason? I'm hoping it's an Apollo bug that will fix itself someday with an upgrade!

src/app/WardrobePage/support/ItemSupportDrawer.js

@@ -79,6 +79,7 @@ function SpecialColorFields({ item }) {
     gql`
       query ItemSupportDrawerManualSpecialColor($itemId: ID!) {
         item(id: $itemId) {
+          id
           manualSpecialColor {
             id
           }
@@ -118,8 +119,8 @@ function SpecialColorFields({ item }) {
         colorId: $colorId
         supportSecret: $supportSecret
       ) {
+        id
         manualSpecialColor {
-          __typename
           id
         }
       }
@@ -141,6 +142,8 @@ function SpecialColorFields({ item }) {
             ? "Loading…"
             : "Default: Auto-detect from item description"
         }
+        value={itemData?.item?.manualSpecialColor?.id}
+        isDisabled={mutationLoading}
         icon={
           colorsLoading || itemLoading || mutationLoading ? (
             <Spinner />
@@ -148,19 +151,10 @@ function SpecialColorFields({ item }) {
             <CheckCircleIcon />
           ) : undefined
         }
-        value={itemData?.item?.manualSpecialColor?.id}
         onChange={(e) => {
-          const colorId = e.target.value;
+          const colorId = e.target.value || null;
           const color =
             colorId != null ? { __typename: "Color", id: colorId } : null;
-          console.log({
-            __typename: "Mutation",
-            setManualSpecialColor: {
-              __typename: "Item",
-              id: item.id,
-              manualSpecialColor: color,
-            },
-          });
           mutate({
             variables: {
               itemId: item.id,

src/server/index.js

@@ -171,6 +171,14 @@ const typeDefs = gql`
 
     petOnNeopetsDotCom(petName: String!): Outfit
   }
+
+  type Mutation {
+    setManualSpecialColor(
+      itemId: ID!
+      colorId: ID
+      supportSecret: String!
+    ): Item!
+  }
 `;
 
 const resolvers = {
@@ -476,6 +484,32 @@ const resolvers = {
       return outfit;
     },
   },
+  Mutation: {
+    setManualSpecialColor: async (
+      _,
+      { itemId, colorId, supportSecret },
+      { db }
+    ) => {
+      if (supportSecret !== process.env["SUPPORT_SECRET"]) {
+        throw new Error(`Support secret is incorrect. Try setting up again?`);
+      }
+
+      const [
+        result,
+      ] = await db.execute(
+        `UPDATE items SET manual_special_color_id = ? WHERE id = ? LIMIT 1`,
+        [colorId, itemId]
+      );
+
+      if (result.affectedRows !== 1) {
+        throw new Error(
+          `Expected to affect 1 item, but affected ${result.affectedRows}`
+        );
+      }
+
+      return { id: itemId };
+    },
+  },
 };
 
 let lastSvgLogger = null;
@@ -522,6 +556,7 @@ const config = {
 
     return {
       svgLogger,
+      db,
       ...buildLoaders(db),
     };
   },