Add item search results to Apollo cache, use in finding item conflicts

This makes clicking on search results in the new mode actually work! It
correctly adds it to the outfit, and removes other items.

The thing that's behaving strangely is that, when you add the item, we
visually remove all items until we can finish a fresh network request
for what they should all look like. This probably means that the cache
lookup for `useOutfitAppearance` is not as satisfied with what we cache
here as `findItemConflicts` is? Something to investigate!
This commit is contained in:
Emi Matchu 2024-02-27 12:19:07 -08:00
parent 752bee3c39
commit 66c1e14dd0
3 changed files with 88 additions and 5 deletions

View file

@ -495,7 +495,8 @@ function getOutfitStateFromOutfitData(outfit) {
function findItemConflicts(itemIdToAdd, state, apolloClient) {
const { wornItemIds, speciesId, colorId, altStyleId } = state;
const { items } = apolloClient.readQuery({
const itemIds = [itemIdToAdd, ...wornItemIds];
const data = apolloClient.readQuery({
query: gql`
query OutfitStateItemConflicts(
$itemIds: [ID!]!
@ -524,12 +525,21 @@ function findItemConflicts(itemIdToAdd, state, apolloClient) {
}
`,
variables: {
itemIds: [itemIdToAdd, ...wornItemIds],
itemIds,
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 [];

View file

@ -1,5 +1,7 @@
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 = {}) {
@ -87,12 +89,77 @@ async function loadItemSearch(searchOptions) {
);
}
return res
.json()
.then((data) => normalizeItemSearchData(data, searchOptions));
const data = await res.json();
const result = normalizeItemSearchData(data, searchOptions);
for (const item of result.items) {
writeItemToApolloCache(item, searchOptions.withAppearancesFor);
}
return result;
}
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
swfUrl
zone {
id
}
}
restrictedZones {
id
}
}
}
}
`,
variables: {
itemId: item.id,
speciesId,
colorId,
altStyleId,
},
data: { item },
});
}
function normalizeItemAppearancesData(data) {
return {
name: data.name,
@ -106,9 +173,11 @@ 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,
@ -130,6 +199,7 @@ 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
@ -145,6 +215,7 @@ function normalizeBody(body) {
}
return {
__typename: "Body",
id: String(body.id),
species: {
id: String(body.species.id),

View file

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