From 81117218a3ab42c5849e1e7030aa5d4a461d4e2c Mon Sep 17 00:00:00 2001 From: Matchu Date: Thu, 21 Jan 2021 14:57:21 -0800 Subject: [PATCH] Only wait for auth on queries that need it MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 | 2 +- src/app/HomePage.js | 2 +- src/app/ItemPage.js | 6 +- src/app/ItemTradesPage.js | 1 + src/app/ModelingPage.js | 93 ++++++++++++------------ src/app/UserItemsPage.js | 2 +- src/app/UserOutfitsPage.js | 1 + src/app/WardrobePage/SearchPanel.js | 1 + src/app/WardrobePage/useOutfitState.js | 1 + src/app/apolloClient.js | 8 +- src/app/components/SpeciesColorPicker.js | 2 +- 11 files changed, 63 insertions(+), 56 deletions(-) diff --git a/src/app/ConversionPage.js b/src/app/ConversionPage.js index 7f35fb0..9271bb1 100644 --- a/src/app/ConversionPage.js +++ b/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 diff --git a/src/app/HomePage.js b/src/app/HomePage.js index 2911cc0..38c00e3 100644 --- a/src/app/HomePage.js +++ b/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 diff --git a/src/app/ItemPage.js b/src/app/ItemPage.js index a2e9536..5588282 100644 --- a/src/app/ItemPage.js +++ b/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: { diff --git a/src/app/ItemTradesPage.js b/src/app/ItemTradesPage.js index 879f151..2148305 100644 --- a/src/app/ItemTradesPage.js +++ b/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; diff --git a/src/app/ModelingPage.js b/src/app/ModelingPage.js index 369fd2d..84f95dc 100644 --- a/src/app/ModelingPage.js +++ b/src/app/ModelingPage.js @@ -25,55 +25,58 @@ function ModelingPage() { } function ItemModelsSection() { - const { loading, error, data } = useQuery(gql` - query ModelingPage { - standardItems: itemsThatNeedModels { - ...ItemFields - speciesThatNeedModels { - id - name + const { loading, error, data } = useQuery( + gql` + query ModelingPage { + standardItems: itemsThatNeedModels { + ...ItemFields + speciesThatNeedModels { + 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") { - ...ItemFields - speciesThatNeedModels(colorId: "6") { - id - name - } + fragment ItemFields on Item { + id + name + thumbnailUrl + isNc + createdAt } - - maraquanItems: itemsThatNeedModels(colorId: "44") { - ...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 - } - `); + `, + { context: { sendAuth: true } } + ); if (loading) { return ( diff --git a/src/app/UserItemsPage.js b/src/app/UserItemsPage.js index 9147a26..99a57fc 100644 --- a/src/app/UserItemsPage.js +++ b/src/app/UserItemsPage.js @@ -82,7 +82,7 @@ function UserItemsPage() { } } `, - { variables: { userId } } + { variables: { userId }, context: { sendAuth: true } } ); if (loading) { diff --git a/src/app/UserOutfitsPage.js b/src/app/UserOutfitsPage.js index 3b83566..92a1998 100644 --- a/src/app/UserOutfitsPage.js +++ b/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, } ); diff --git a/src/app/WardrobePage/SearchPanel.js b/src/app/WardrobePage/SearchPanel.js index 466d160..68d5634 100644 --- a/src/app/WardrobePage/SearchPanel.js +++ b/src/app/WardrobePage/SearchPanel.js @@ -313,6 +313,7 @@ function useSearchResults(query, outfitState) { colorId, offset: 0, }, + context: { sendAuth: true }, skip: !debouncedQuery.value && !debouncedQuery.filterToItemKind && diff --git a/src/app/WardrobePage/useOutfitState.js b/src/app/WardrobePage/useOutfitState.js index 855f70f..961e907 100644 --- a/src/app/WardrobePage/useOutfitState.js +++ b/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. diff --git a/src/app/apolloClient.js b/src/app/apolloClient.js index 9a98f22..8eba44f 100644 --- a/src/app/apolloClient.js +++ b/src/app/apolloClient.js @@ -142,12 +142,8 @@ const persistedQueryLink = createPersistedQueryLink({ }); const httpLink = createHttpLink({ uri: "/api/graphql" }); const buildAuthLink = (getAuth0) => - 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) { + setContext(async (_, { headers = {}, sendAuth = false }) => { + if (!sendAuth) { return; } diff --git a/src/app/components/SpeciesColorPicker.js b/src/app/components/SpeciesColorPicker.js index dfc2d20..768c483 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_NoAuthRequired { + query SpeciesColorPicker { allSpecies { id name