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 7f35fb0e..9271bb1d 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 2911cc0a..38c00e34 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 a2e95366..5588282e 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 879f151e..21483059 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 369fd2db..84f95dc9 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 9147a269..99a57fc7 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 3b835662..92a19988 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 466d1605..68d56349 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 855f70fa..961e9077 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 9a98f224..8eba44f0 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 dfc2d201..768c4833 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