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:
parent
7f777ed5b3
commit
81117218a3
11 changed files with 63 additions and 56 deletions
|
@ -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
|
||||||
|
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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: {
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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 (
|
||||||
|
|
|
@ -82,7 +82,7 @@ function UserItemsPage() {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
`,
|
`,
|
||||||
{ variables: { userId } }
|
{ variables: { userId }, context: { sendAuth: true } }
|
||||||
);
|
);
|
||||||
|
|
||||||
if (loading) {
|
if (loading) {
|
||||||
|
|
|
@ -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,
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
|
@ -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 &&
|
||||||
|
|
|
@ -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.
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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
|
||||||
|
|
Loading…
Reference in a new issue