app/javascript/wardrobe-2020/WardrobePage/SearchPanel.js

@@ -4,7 +4,6 @@ import { Box, Text, useColorModeValue, VisuallyHidden } from "@chakra-ui/react";
 import Item, { ItemListContainer, ItemListSkeleton } from "./Item";
 import PaginationToolbar from "../components/PaginationToolbar";
 import { useSearchResults } from "./useSearchResults";
-import { MajorErrorMessage } from "../util";
 
 export const SEARCH_PER_PAGE = 30;
 
@@ -135,8 +134,17 @@ function SearchResults({
 
   const searchPanelBackground = useColorModeValue("white", "gray.900");
 
+  // If the results aren't ready, we have some special case UI!
   if (error) {
-    return <MajorErrorMessage error={error} variant="network" />;
+    return (
+      <Text>
+        We hit an error trying to load your search results{" "}
+        <span role="img" aria-label="(sweat emoji)">
+          😓
+        </span>{" "}
+        Try again?
+      </Text>
+    );
   }
 
   // Finally, render the item list, with checkboxes and Item components!

app/javascript/wardrobe-2020/WardrobePage/useOutfitState.js

@@ -495,8 +495,7 @@ function getOutfitStateFromOutfitData(outfit) {
 function findItemConflicts(itemIdToAdd, state, apolloClient) {
   const { wornItemIds, speciesId, colorId, altStyleId } = state;
 
-  const itemIds = [itemIdToAdd, ...wornItemIds];
-  const data = apolloClient.readQuery({
+  const { items } = apolloClient.readQuery({
     query: gql`
       query OutfitStateItemConflicts(
         $itemIds: [ID!]!
@@ -525,21 +524,12 @@ function findItemConflicts(itemIdToAdd, state, apolloClient) {
       }
     `,
     variables: {
-      itemIds,
+      itemIds: [itemIdToAdd, ...wornItemIds],
       speciesId,
       colorId,
       altStyleId,
     },
   });
-  if (data == null) {
-    throw new Error(
-      `[findItemConflicts] Cache lookup failed for: ` +
-        `items=${itemIds.join(",")}, speciesId=${speciesId}, ` +
-        `colorId=${colorId}, altStyleId=${altStyleId}`,
-    );
-  }
-
-  const { items } = data;
   const itemToAdd = items.find((i) => i.id === itemIdToAdd);
   if (!itemToAdd.appearanceOn) {
     return [];

app/javascript/wardrobe-2020/loaders/items.js

@@ -1,7 +1,5 @@
-import gql from "graphql-tag";
 import { useQuery } from "@tanstack/react-query";
 
-import apolloClient from "../apolloClient";
 import { normalizeSwfAssetToLayer, normalizeZone } from "./shared-types";
 
 export function useItemAppearances(id, options = {}) {
@@ -89,77 +87,12 @@ async function loadItemSearch(searchOptions) {
 		);
 	}
 
-	const data = await res.json();
-	const result = normalizeItemSearchData(data, searchOptions);
-
-	for (const item of result.items) {
-		writeItemToApolloCache(item, searchOptions.withAppearancesFor);
-	}
-
-	return result;
+	return res
+		.json()
+		.then((data) => normalizeItemSearchData(data, searchOptions));
 }
 window.loadItemSearch = loadItemSearch;
 
-/**
- * writeItemToApolloCache is one last important bridge between our loaders and
- * GQL! In `useOutfitState`, we consult the GraphQL cache to look up basic item
- * info like zones, to decide when wearing an item would trigger a conflict
- * with another.
- */
-function writeItemToApolloCache(item, { speciesId, colorId, altStyleId }) {
-	apolloClient.writeQuery({
-		query: gql`
-			query WriteItemFromLoader(
-				$itemId: ID!
-				$speciesId: ID!
-				$colorId: ID!
-				$altStyleId: ID
-			) {
-				item(id: $itemId) {
-					id
-					name
-					thumbnailUrl
-					isNc
-					isPb
-					currentUserOwnsThis
-					currentUserWantsThis
-					appearanceOn(
-						speciesId: $speciesId
-						colorId: $colorId
-						altStyleId: $altStyleId
-					) {
-						id
-						layers {
-							id
-							remoteId
-							bodyId
-							knownGlitches
-							svgUrl
-							canvasMovieLibraryUrl
-							imageUrl: imageUrlV2(idealSize: SIZE_600)
-							swfUrl
-							zone {
-								id
-							}
-						}
-
-						restrictedZones {
-							id
-						}
-					}
-				}
-			}
-		`,
-		variables: {
-			itemId: item.id,
-			speciesId,
-			colorId,
-			altStyleId,
-		},
-		data: { item },
-	});
-}
-
 function normalizeItemAppearancesData(data) {
 	return {
 		name: data.name,
@@ -173,11 +106,9 @@ function normalizeItemAppearancesData(data) {
 
 function normalizeItemSearchData(data, searchOptions) {
 	return {
-		__typename: "ItemSearchResultV2",
 		id: buildItemSearchParams(searchOptions),
 		numTotalPages: data.total_pages,
 		items: data.items.map((item) => ({
-			__typename: "Item",
 			id: String(item.id),
 			name: item.name,
 			thumbnailUrl: item.thumbnail_url,
@@ -199,7 +130,6 @@ function normalizeItemSearchAppearance(data, item) {
 	}
 
 	return {
-		__typename: "ItemAppearance",
 		id: `item-${item.id}-body-${data.body.id}`,
 		layers: data.swf_assets.map(normalizeSwfAssetToLayer),
 		restrictedZones: data.swf_assets
@@ -215,7 +145,6 @@ function normalizeBody(body) {
 	}
 
 	return {
-		__typename: "Body",
 		id: String(body.id),
 		species: {
 			id: String(body.species.id),

app/javascript/wardrobe-2020/loaders/shared-types.js

@@ -1,6 +1,5 @@
 export function normalizeSwfAssetToLayer(data) {
 	return {
-		__typename: "AppearanceLayer",
 		id: String(data.id),
 		remoteId: String(data.remote_id),
 		zone: normalizeZone(data.zone),
@@ -16,7 +15,6 @@ export function normalizeSwfAssetToLayer(data) {
 
 export function normalizeZone(data) {
 	return {
-		__typename: "Zone",
 		id: String(data.id),
 		depth: data.depth,
 		label: data.label,