Only wait for auth on queries that need it

I switched from my `_NoAuthRequired` opname hack, to a more robust `context` argument, and it's opt-in!

This should make queries without user data faster by default. We'll need to remember to specify this in order to get user data, but it shouldn't be something we'd like, ship without remembering—the feature just won't work until we do!

src/app/ConversionPage.js

@@ -14,7 +14,7 @@ import { ErrorMessage, Heading1 } from "./util";
 function ConversionPage() {
   const { loading, error, data } = useQuery(
     gql`
-      query ConversionPage_NoAuthRequired {
+      query ConversionPage {
         numAppearanceLayersConverted
         numAppearanceLayersTotal
 

src/app/HomePage.js

@@ -352,7 +352,7 @@ function ItemsSearchField() {
 function NewItemsSectionContent() {
   const { loading, error, data } = useQuery(
     gql`
-      query NewItemsSection_NoAuthRequired {
+      query NewItemsSection {
         newestItems {
           id
           name

src/app/ItemPage.js

@@ -130,7 +130,7 @@ function ItemPageOwnWantButtons({ itemId }) {
         }
       }
     `,
-    { variables: { itemId } }
+    { variables: { itemId }, context: { sendAuth: true } }
   );
 
   if (error) {
@@ -171,6 +171,7 @@ function ItemPageOwnButton({ itemId, isChecked }) {
     `,
     {
       variables: { itemId },
+      context: { sendAuth: true },
       optimisticResponse: {
         __typename: "Mutation",
         addToItemsCurrentUserOwns: {
@@ -193,6 +194,7 @@ function ItemPageOwnButton({ itemId, isChecked }) {
     `,
     {
       variables: { itemId },
+      context: { sendAuth: true },
       optimisticResponse: {
         __typename: "Mutation",
         removeFromItemsCurrentUserOwns: {
@@ -279,6 +281,7 @@ function ItemPageWantButton({ itemId, isChecked }) {
     `,
     {
       variables: { itemId },
+      context: { sendAuth: true },
       optimisticResponse: {
         __typename: "Mutation",
         addToItemsCurrentUserWants: {
@@ -301,6 +304,7 @@ function ItemPageWantButton({ itemId, isChecked }) {
     `,
     {
       variables: { itemId },
+      context: { sendAuth: true },
       optimisticResponse: {
         __typename: "Mutation",
         removeFromItemsCurrentUserWants: {

src/app/ItemTradesPage.js

@@ -130,6 +130,7 @@ function ItemTradesTable({
   const { isLoggedIn } = useCurrentUser();
   const { loading, error, data } = useQuery(tradesQuery, {
     variables: { itemId },
+    context: { sendAuth: true },
   });
 
   const shouldShowCompareColumn = isLoggedIn;

src/app/ModelingPage.js

@@ -25,55 +25,58 @@ function ModelingPage() {
 }
 
 function ItemModelsSection() {
-  const { loading, error, data } = useQuery(gql`
+  const { loading, error, data } = useQuery(
-    query ModelingPage {
+    gql`
-      standardItems: itemsThatNeedModels {
+      query ModelingPage {
-        ...ItemFields
+        standardItems: itemsThatNeedModels {
-        speciesThatNeedModels {
+          ...ItemFields
-          id
+          speciesThatNeedModels {
-          name
+            id
+            name
+          }
+        }
+
+        babyItems: itemsThatNeedModels(colorId: "6") {
+          ...ItemFields
+          speciesThatNeedModels(colorId: "6") {
+            id
+            name
+          }
+        }
+
+        maraquanItems: itemsThatNeedModels(colorId: "44") {
+          ...ItemFields
+          speciesThatNeedModels(colorId: "44") {
+            id
+            name
+          }
+        }
+
+        mutantItems: itemsThatNeedModels(colorId: "46") {
+          ...ItemFields
+          speciesThatNeedModels(colorId: "46") {
+            id
+            name
+          }
+        }
+
+        currentUser {
+          itemsTheyOwn {
+            id
+          }
         }
       }
 
-      babyItems: itemsThatNeedModels(colorId: "6") {
+      fragment ItemFields on Item {
-        ...ItemFields
+        id
-        speciesThatNeedModels(colorId: "6") {
+        name
-          id
+        thumbnailUrl
-          name
+        isNc
-        }
+        createdAt
       }
-
+    `,
-      maraquanItems: itemsThatNeedModels(colorId: "44") {
+    { context: { sendAuth: true } }
-        ...ItemFields
+  );
-        speciesThatNeedModels(colorId: "44") {
-          id
-          name
-        }
-      }
-
-      mutantItems: itemsThatNeedModels(colorId: "46") {
-        ...ItemFields
-        speciesThatNeedModels(colorId: "46") {
-          id
-          name
-        }
-      }
-
-      currentUser {
-        itemsTheyOwn {
-          id
-        }
-      }
-    }
-
-    fragment ItemFields on Item {
-      id
-      name
-      thumbnailUrl
-      isNc
-      createdAt
-    }
-  `);
 
   if (loading) {
     return (

src/app/UserItemsPage.js

@@ -82,7 +82,7 @@ function UserItemsPage() {
         }
       }
     `,
-    { variables: { userId } }
+    { variables: { userId }, context: { sendAuth: true } }
   );
 
   if (loading) {

src/app/UserOutfitsPage.js

@@ -65,6 +65,7 @@ function UserOutfitsPageContent() {
         // NOTE: This parameter is used inside `OutfitThumbnailFragment`!
         size: "SIZE_" + getOutfitThumbnailRenderSize(),
       },
+      context: { sendAuth: true },
       skip: userLoading,
     }
   );

src/app/WardrobePage/SearchPanel.js

@@ -313,6 +313,7 @@ function useSearchResults(query, outfitState) {
         colorId,
         offset: 0,
       },
+      context: { sendAuth: true },
       skip:
         !debouncedQuery.value &&
         !debouncedQuery.filterToItemKind &&

src/app/WardrobePage/useOutfitState.js

@@ -154,6 +154,7 @@ function useOutfitState() {
     `,
     {
       variables: { allItemIds, speciesId, colorId },
+      context: { sendAuth: true },
       // Skip if this outfit has no items, as an optimization; or if we don't
       // have the species/color ID loaded yet because we're waiting on the
       // saved outfit to load.

src/app/apolloClient.js

@@ -142,12 +142,8 @@ const persistedQueryLink = createPersistedQueryLink({
 });
 const httpLink = createHttpLink({ uri: "/api/graphql" });
 const buildAuthLink = (getAuth0) =>
-  setContext(async ({ operationName }, { headers }) => {
+  setContext(async (_, { headers = {}, sendAuth = false }) => {
-    // Our little hack to decorate queries that don't need auth, and can load
+    if (!sendAuth) {
-    // 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;
     }
 

src/app/components/SpeciesColorPicker.js

@@ -29,7 +29,7 @@ function SpeciesColorPicker({
   onChange,
 }) {
   const { loading: loadingMeta, error: errorMeta, data: meta } = useQuery(gql`
-    query SpeciesColorPicker_NoAuthRequired {
+    query SpeciesColorPicker {
       allSpecies {
         id
         name