From 88862f9ce786b878694e05cc6de9b0bfe9aeead8 Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Sat, 5 Sep 2020 16:37:17 -0700
Subject: [PATCH] simplify petAppearance cache lookup, remove hacks

I think I got all up in my head about direct queries for this one, because of a previous implementation I had in mind, and I forgot that I could just query species and color from the cache by reference without breaking out of the API provided to the cache function!

I also learned in here that I _can_ look up things from the root by doing `readField("allSpecies", {__ref: "ROOT_QUERY"})`, which I struggled to figure out my previous time. I couldn't figure out how to read an uncached field with arguments (I couldn't quite figure out how to build a proper FieldNode, and passing the string form seemed to provide `null` to the `species` cache field reader), but it's probably doable!
---
 src/app/apolloClient.js | 59 ++++++++++-------------------------------
 1 file changed, 14 insertions(+), 45 deletions(-)

diff --git a/src/app/apolloClient.js b/src/app/apolloClient.js
index 0b06b19..d3c7b69 100644
--- a/src/app/apolloClient.js
+++ b/src/app/apolloClient.js
@@ -1,7 +1,6 @@
 import { ApolloClient, createHttpLink, InMemoryCache } from "@apollo/client";
 import { setContext } from "@apollo/client/link/context";
 import { createPersistedQueryLink } from "apollo-link-persisted-queries";
-import gql from "graphql-tag";
 
 import cachedZones from "./cached-data/zones.json";
 
@@ -48,49 +47,25 @@ const typePolicies = {
         // case we can reuse the standard color appearance if we already have
         // it! This helps for fast loading when switching between standard
         // colors.
-
         const { speciesId, colorId } = args;
-
-        // HACK: I can't find a way to do bigger-picture queries like this from
-        //       Apollo's cache field reader API. Am I missing something? I
-        //       don't love escape-hatching to the client like this, but...
-        let cachedData;
-        try {
-          cachedData = hackyEscapeHatchClient.readQuery({
-            query: gql`
-              query CacheLookupForItemAppearanceReader(
-                $speciesId: ID!
-                $colorId: ID!
-              ) {
-                species(id: $speciesId) {
-                  standardBodyId
-                }
-                color(id: $colorId) {
-                  isStandard
-                }
-              }
-            `,
-            variables: { speciesId, colorId },
-          });
-        } catch (e) {
-          // Some errors are expected while setting up the cache... not sure
-          // how to distinguish from Real errors. Just gonna ignore them all
-          // for now!
-          return undefined;
-        }
-
-        if (!cachedData) {
+        const speciesStandardBodyId = readField(
+          "standardBodyId",
+          toReference({ __typename: "Species", id: speciesId })
+        );
+        const colorIsStandard = readField(
+          "isStandard",
+          toReference({ __typename: "Color", id: colorId })
+        );
+        if (speciesStandardBodyId == null || colorIsStandard == null) {
           // This is an expected case while the page is loading.
-          return undefined;
+          return null;
         }
 
-        const { species, color } = cachedData;
-        if (color.isStandard) {
+        if (colorIsStandard) {
           const itemId = readField("id");
-          const bodyId = species.standardBodyId;
           return toReference({
             __typename: "ItemAppearance",
-            id: `item-${itemId}-body-${bodyId}`,
+            id: `item-${itemId}-body-${speciesStandardBodyId}`,
           });
         } else {
           return undefined;
@@ -142,17 +117,11 @@ for (const zone of cachedZones) {
  * apolloClient is the global Apollo Client instance we use for GraphQL
  * queries. This is how we communicate with the server!
  */
-let hackyEscapeHatchClient = null;
-const buildClient = (getAuth0) => {
-  const client = new ApolloClient({
+const buildClient = (getAuth0) =>
+  new ApolloClient({
     link: buildAuthLink(getAuth0).concat(persistedQueryLink).concat(httpLink),
     cache: new InMemoryCache({ typePolicies }).restore(initialCache),
     connectToDevTools: true,
   });
 
-  hackyEscapeHatchClient = client;
-
-  return client;
-};
-
 export default buildClient;