OpenNeo/impress-2020
OpenNeo/impress-2020
1
0
Fork 0
Code Pull requests Activity

preload preview data for closeted items

Browse source
This commit is contained in:
Matt Dunn-Rankin 2020-04-24 20:28:40 -07:00
parent f49c2552ce
commit 66b0314990
2 changed files with 28 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
src/OutfitPreview.js
View file

@ -8,6 +8,23 @@ import { Delay } from "./util";
import "./OutfitPreview.css";
export const itemAppearanceFragment = gql`
fragment AppearanceForOutfitPreview on Appearance {
layers {
id
imageUrl(size: SIZE_600)
zone {
id
depth
}
}
restrictedZones {
id
}
}
`;
function OutfitPreview({ outfitState }) {
const { wornItemIds, speciesId, colorId } = outfitState;
@ -15,38 +32,17 @@ function OutfitPreview({ outfitState }) {
gql`
query($wornItemIds: [ID!]!, $speciesId: ID!, $colorId: ID!) {
petAppearance(speciesId: $speciesId, colorId: $colorId) {
layers {
id
imageUrl(size: SIZE_600)
zone {
id
depth
}
}
restrictedZones {
id
}
...AppearanceForOutfitPreview
}
items(ids: $wornItemIds) {
id
appearanceOn(speciesId: $speciesId, colorId: $colorId) {
layers {
id
imageUrl(size: SIZE_600)
zone {
id
depth
}
}
restrictedZones {
id
}
...AppearanceForOutfitPreview
}
}
}
${itemAppearanceFragment}
`,
{
variables: { wornItemIds, speciesId, colorId },

10
src/useItemData.js
View file

@ -1,6 +1,8 @@
import gql from "graphql-tag";
import { useQuery } from "@apollo/react-hooks";
import { itemAppearanceFragment } from "./OutfitPreview";
function useItemData(itemIds, speciesId, colorId) {
const { loading, error, data } = useQuery(
gql`
@ -10,9 +12,12 @@ function useItemData(itemIds, speciesId, colorId) {
name
thumbnailUrl
# This is used to group items by zone, and to detect conflicts when
# wearing a new item.
appearanceOn(speciesId: $speciesId, colorId: $colorId) {
# This enables us to quickly show the item when the user clicks it!
...AppearanceForOutfitPreview
# This is used to group items by zone, and to detect conflicts when
# wearing a new item.
layers {
zone {
id
@ -22,6 +27,7 @@ function useItemData(itemIds, speciesId, colorId) {
}
}
}
${itemAppearanceFragment}
`,
{ variables: { itemIds, speciesId, colorId } }
);