From 6e33132881c3dd47ab64d13814ae2415966b4de0 Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Mon, 18 Jan 2021 07:15:00 -0800
Subject: [PATCH] Load homepage faster for logged-in users

When building the code to await auth before sending _any_ GraphQL queries, I didn't realize that auth might be kinda slow. So, I've added a hack to let me mark queries with no user-specific data to skip auth, and applied that to the main queries on the homepage.

I think this is a hint that we might want to change our strategy - e.g. to flip it to hackily mark that auth _is_ required, or to create wrappers or option-builder helpers for logged-in queries, etc.

I also notice that SSR would have resolved this particular case...
---
 src/app/HomePage.js                      | 18 ++++++++++--------
 src/app/apolloClient.js                  | 10 +++++++++-
 src/app/components/SpeciesColorPicker.js |  2 +-
 3 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/src/app/HomePage.js b/src/app/HomePage.js
index d7f75d3..15aca5d 100644
--- a/src/app/HomePage.js
+++ b/src/app/HomePage.js
@@ -288,15 +288,17 @@ function NewItemsSection() {
 }
 
 function NewItemsSectionContent() {
-  const { loading, error, data } = useQuery(gql`
-    query NewItemsSection {
-      newestItems {
-        id
-        name
-        thumbnailUrl
+  const { loading, error, data } = useQuery(
+    gql`
+      query NewItemsSection_NoAuthRequired {
+        newestItems {
+          id
+          name
+          thumbnailUrl
+        }
       }
-    }
-  `);
+    `
+  );
 
   if (loading) {
     return (
diff --git a/src/app/apolloClient.js b/src/app/apolloClient.js
index 0f4cb5b..9a98f22 100644
--- a/src/app/apolloClient.js
+++ b/src/app/apolloClient.js
@@ -142,7 +142,15 @@ const persistedQueryLink = createPersistedQueryLink({
 });
 const httpLink = createHttpLink({ uri: "/api/graphql" });
 const buildAuthLink = (getAuth0) =>
-  setContext(async (_, { headers }) => {
+  setContext(async ({ operationName }, { headers }) => {
+    // Our little hack to decorate queries that don't need auth, and can load
+    // without waiting for it!
+    // TODO: It feels like inverting this might be the better way to go?...
+    const skipAuth = operationName?.includes("_NoAuthRequired");
+    if (skipAuth) {
+      return;
+    }
+
     // Wait for auth0 to stop loading, so we can maybe get a token! We'll do
     // this hackily by checking every 100ms until it's true.
     await new Promise((resolve) => {
diff --git a/src/app/components/SpeciesColorPicker.js b/src/app/components/SpeciesColorPicker.js
index 768c483..dfc2d20 100644
--- a/src/app/components/SpeciesColorPicker.js
+++ b/src/app/components/SpeciesColorPicker.js
@@ -29,7 +29,7 @@ function SpeciesColorPicker({
   onChange,
 }) {
   const { loading: loadingMeta, error: errorMeta, data: meta } = useQuery(gql`
-    query SpeciesColorPicker {
+    query SpeciesColorPicker_NoAuthRequired {
       allSpecies {
         id
         name