Only wait for auth on queries that need it

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!
This commit is contained in:
Emi Matchu 2021-01-21 14:57:21 -08:00
parent 7f777ed5b3
commit 81117218a3
11 changed files with 63 additions and 56 deletions

View file

@ -14,7 +14,7 @@ import { ErrorMessage, Heading1 } from "./util";
function ConversionPage() { function ConversionPage() {
const { loading, error, data } = useQuery( const { loading, error, data } = useQuery(
gql` gql`
query ConversionPage_NoAuthRequired { query ConversionPage {
numAppearanceLayersConverted numAppearanceLayersConverted
numAppearanceLayersTotal numAppearanceLayersTotal

View file

@ -352,7 +352,7 @@ function ItemsSearchField() {
function NewItemsSectionContent() { function NewItemsSectionContent() {
const { loading, error, data } = useQuery( const { loading, error, data } = useQuery(
gql` gql`
query NewItemsSection_NoAuthRequired { query NewItemsSection {
newestItems { newestItems {
id id
name name

View file

@ -130,7 +130,7 @@ function ItemPageOwnWantButtons({ itemId }) {
} }
} }
`, `,
{ variables: { itemId } } { variables: { itemId }, context: { sendAuth: true } }
); );
if (error) { if (error) {
@ -171,6 +171,7 @@ function ItemPageOwnButton({ itemId, isChecked }) {
`, `,
{ {
variables: { itemId }, variables: { itemId },
context: { sendAuth: true },
optimisticResponse: { optimisticResponse: {
__typename: "Mutation", __typename: "Mutation",
addToItemsCurrentUserOwns: { addToItemsCurrentUserOwns: {
@ -193,6 +194,7 @@ function ItemPageOwnButton({ itemId, isChecked }) {
`, `,
{ {
variables: { itemId }, variables: { itemId },
context: { sendAuth: true },
optimisticResponse: { optimisticResponse: {
__typename: "Mutation", __typename: "Mutation",
removeFromItemsCurrentUserOwns: { removeFromItemsCurrentUserOwns: {
@ -279,6 +281,7 @@ function ItemPageWantButton({ itemId, isChecked }) {
`, `,
{ {
variables: { itemId }, variables: { itemId },
context: { sendAuth: true },
optimisticResponse: { optimisticResponse: {
__typename: "Mutation", __typename: "Mutation",
addToItemsCurrentUserWants: { addToItemsCurrentUserWants: {
@ -301,6 +304,7 @@ function ItemPageWantButton({ itemId, isChecked }) {
`, `,
{ {
variables: { itemId }, variables: { itemId },
context: { sendAuth: true },
optimisticResponse: { optimisticResponse: {
__typename: "Mutation", __typename: "Mutation",
removeFromItemsCurrentUserWants: { removeFromItemsCurrentUserWants: {

View file

@ -130,6 +130,7 @@ function ItemTradesTable({
const { isLoggedIn } = useCurrentUser(); const { isLoggedIn } = useCurrentUser();
const { loading, error, data } = useQuery(tradesQuery, { const { loading, error, data } = useQuery(tradesQuery, {
variables: { itemId }, variables: { itemId },
context: { sendAuth: true },
}); });
const shouldShowCompareColumn = isLoggedIn; const shouldShowCompareColumn = isLoggedIn;

View file

@ -25,7 +25,8 @@ function ModelingPage() {
} }
function ItemModelsSection() { function ItemModelsSection() {
const { loading, error, data } = useQuery(gql` const { loading, error, data } = useQuery(
gql`
query ModelingPage { query ModelingPage {
standardItems: itemsThatNeedModels { standardItems: itemsThatNeedModels {
...ItemFields ...ItemFields
@ -73,7 +74,9 @@ function ItemModelsSection() {
isNc isNc
createdAt createdAt
} }
`); `,
{ context: { sendAuth: true } }
);
if (loading) { if (loading) {
return ( return (

View file

@ -82,7 +82,7 @@ function UserItemsPage() {
} }
} }
`, `,
{ variables: { userId } } { variables: { userId }, context: { sendAuth: true } }
); );
if (loading) { if (loading) {

View file

@ -65,6 +65,7 @@ function UserOutfitsPageContent() {
// NOTE: This parameter is used inside `OutfitThumbnailFragment`! // NOTE: This parameter is used inside `OutfitThumbnailFragment`!
size: "SIZE_" + getOutfitThumbnailRenderSize(), size: "SIZE_" + getOutfitThumbnailRenderSize(),
}, },
context: { sendAuth: true },
skip: userLoading, skip: userLoading,
} }
); );

View file

@ -313,6 +313,7 @@ function useSearchResults(query, outfitState) {
colorId, colorId,
offset: 0, offset: 0,
}, },
context: { sendAuth: true },
skip: skip:
!debouncedQuery.value && !debouncedQuery.value &&
!debouncedQuery.filterToItemKind && !debouncedQuery.filterToItemKind &&

View file

@ -154,6 +154,7 @@ function useOutfitState() {
`, `,
{ {
variables: { allItemIds, speciesId, colorId }, variables: { allItemIds, speciesId, colorId },
context: { sendAuth: true },
// Skip if this outfit has no items, as an optimization; or if we don't // 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 // have the species/color ID loaded yet because we're waiting on the
// saved outfit to load. // saved outfit to load.

View file

@ -142,12 +142,8 @@ const persistedQueryLink = createPersistedQueryLink({
}); });
const httpLink = createHttpLink({ uri: "/api/graphql" }); const httpLink = createHttpLink({ uri: "/api/graphql" });
const buildAuthLink = (getAuth0) => const buildAuthLink = (getAuth0) =>
setContext(async ({ operationName }, { headers }) => { setContext(async (_, { headers = {}, sendAuth = false }) => {
// Our little hack to decorate queries that don't need auth, and can load if (!sendAuth) {
// without waiting for it!
// TODO: It feels like inverting this might be the better way to go?...
const skipAuth = operationName?.includes("_NoAuthRequired");
if (skipAuth) {
return; return;
} }

View file

@ -29,7 +29,7 @@ function SpeciesColorPicker({
onChange, onChange,
}) { }) {
const { loading: loadingMeta, error: errorMeta, data: meta } = useQuery(gql` const { loading: loadingMeta, error: errorMeta, data: meta } = useQuery(gql`
query SpeciesColorPicker_NoAuthRequired { query SpeciesColorPicker {
allSpecies { allSpecies {
id id
name name