diff --git a/src/app/App.js b/src/app/App.js
index 0866eb1..b6b5b98 100644
--- a/src/app/App.js
+++ b/src/app/App.js
@@ -19,6 +19,15 @@ const client = new ApolloClient({
       // the server again!
       items: (_, args, { getCacheKey }) =>
         args.ids.map((id) => getCacheKey({ __typename: "Item", id })),
+
+      // Teach Apollo how to serve `petAppearance` queries from the cache. That
+      // way, when you switch pet poses, Apollo knows it already has the
+      // appearance data and doesn't need to ask the server again!
+      petAppearance: (_, args, { getCacheKey }) => {
+        const { speciesId, colorId, emotion, genderPresentation } = args;
+        const id = `${speciesId}-${colorId}-${emotion}-${genderPresentation}`;
+        return getCacheKey({ __typename: "PetAppearance", id });
+      },
     },
   },
 });
diff --git a/src/server/index.js b/src/server/index.js
index 4268944..f56f077 100644
--- a/src/server/index.js
+++ b/src/server/index.js
@@ -48,6 +48,7 @@ const typeDefs = gql`
 
   type PetAppearance {
     id: ID!
+    petStateId: ID!
     genderPresentation: GenderPresentation
     emotion: Emotion
     approximateThumbnailUrl: String!
@@ -166,7 +167,13 @@ const resolvers = {
     },
   },
   PetAppearance: {
-    id: ({ petState }) => petState.id,
+    id: ({ petType, petState }) => {
+      const { speciesId, colorId } = petType;
+      const emotion = getEmotion(petState.moodId);
+      const genderPresentation = getGenderPresentation(petState.female);
+      return `${speciesId}-${colorId}-${emotion}-${genderPresentation}`;
+    },
+    petStateId: ({ petState }) => petState.id,
     genderPresentation: ({ petState }) =>
       getGenderPresentation(petState.female),
     emotion: ({ petState }) => getEmotion(petState.moodId),
diff --git a/src/server/query-tests/PetAppearance.test.js b/src/server/query-tests/PetAppearance.test.js
index a892787..87b806d 100644
--- a/src/server/query-tests/PetAppearance.test.js
+++ b/src/server/query-tests/PetAppearance.test.js
@@ -74,6 +74,7 @@ describe("PetAppearance", () => {
         query {
           petAppearances(speciesId: "54", colorId: "75") {
             id
+            petStateId
             genderPresentation
             emotion
             approximateThumbnailUrl
diff --git a/src/server/query-tests/__snapshots__/PetAppearance.test.js.snap b/src/server/query-tests/__snapshots__/PetAppearance.test.js.snap
index f57c3e5..2c9b76f 100644
--- a/src/server/query-tests/__snapshots__/PetAppearance.test.js.snap
+++ b/src/server/query-tests/__snapshots__/PetAppearance.test.js.snap
@@ -58,7 +58,7 @@ Object {
       "approximateThumbnailUrl": "http://pets.neopets.com/cp/vghhzlgf/1/1.png",
       "emotion": "HAPPY",
       "genderPresentation": "FEMININE",
-      "id": "17723",
+      "id": "54-75-HAPPY-FEMININE",
       "layers": Array [
         Object {
           "id": "5995",
@@ -103,12 +103,13 @@ Object {
           },
         },
       ],
+      "petStateId": "17723",
     },
     Object {
       "approximateThumbnailUrl": "http://pets.neopets.com/cp/vghhzlgf/1/1.png",
       "emotion": "HAPPY",
       "genderPresentation": "MASCULINE",
-      "id": "17742",
+      "id": "54-75-HAPPY-MASCULINE",
       "layers": Array [
         Object {
           "id": "5995",
@@ -153,12 +154,13 @@ Object {
           },
         },
       ],
+      "petStateId": "17742",
     },
     Object {
       "approximateThumbnailUrl": "http://pets.neopets.com/cp/vghhzlgf/4/1.png",
       "emotion": "SICK",
       "genderPresentation": "FEMININE",
-      "id": "10014",
+      "id": "54-75-SICK-FEMININE",
       "layers": Array [
         Object {
           "id": "5995",
@@ -203,12 +205,13 @@ Object {
           },
         },
       ],
+      "petStateId": "10014",
     },
     Object {
       "approximateThumbnailUrl": "http://pets.neopets.com/cp/vghhzlgf/4/1.png",
       "emotion": "SICK",
       "genderPresentation": "MASCULINE",
-      "id": "11089",
+      "id": "54-75-SICK-MASCULINE",
       "layers": Array [
         Object {
           "id": "5995",
@@ -253,12 +256,13 @@ Object {
           },
         },
       ],
+      "petStateId": "11089",
     },
     Object {
       "approximateThumbnailUrl": "http://pets.neopets.com/cp/vghhzlgf/2/1.png",
       "emotion": "SAD",
       "genderPresentation": "FEMININE",
-      "id": "5991",
+      "id": "54-75-SAD-FEMININE",
       "layers": Array [
         Object {
           "id": "5995",
@@ -303,12 +307,13 @@ Object {
           },
         },
       ],
+      "petStateId": "5991",
     },
     Object {
       "approximateThumbnailUrl": "http://pets.neopets.com/cp/vghhzlgf/2/1.png",
       "emotion": "SAD",
       "genderPresentation": "MASCULINE",
-      "id": "436",
+      "id": "54-75-SAD-MASCULINE",
       "layers": Array [
         Object {
           "id": "5995",
@@ -353,12 +358,13 @@ Object {
           },
         },
       ],
+      "petStateId": "436",
     },
     Object {
       "approximateThumbnailUrl": "http://pets.neopets.com/cp/vghhzlgf/null/1.png",
       "emotion": null,
       "genderPresentation": null,
-      "id": "2",
+      "id": "54-75-null-null",
       "layers": Array [
         Object {
           "id": "5995",
@@ -410,12 +416,13 @@ Object {
           },
         },
       ],
+      "petStateId": "2",
     },
     Object {
       "approximateThumbnailUrl": "http://pets.neopets.com/cp/vghhzlgf/null/1.png",
       "emotion": null,
       "genderPresentation": null,
-      "id": "4751",
+      "id": "54-75-null-null",
       "layers": Array [
         Object {
           "id": "5995",
@@ -467,6 +474,7 @@ Object {
           },
         },
       ],
+      "petStateId": "4751",
     },
   ],
 }