Load homepage faster for logged-in users
When building the code to await auth before sending _any_ GraphQL queries, I didn't realize that auth might be kinda slow. So, I've added a hack to let me mark queries with no user-specific data to skip auth, and applied that to the main queries on the homepage. I think this is a hint that we might want to change our strategy - e.g. to flip it to hackily mark that auth _is_ required, or to create wrappers or option-builder helpers for logged-in queries, etc. I also notice that SSR would have resolved this particular case...
This commit is contained in:
parent
154046695f
commit
6e33132881
3 changed files with 20 additions and 10 deletions
src/app
|
@ -288,15 +288,17 @@ function NewItemsSection() {
|
|||
}
|
||||
|
||||
function NewItemsSectionContent() {
|
||||
const { loading, error, data } = useQuery(gql`
|
||||
query NewItemsSection {
|
||||
newestItems {
|
||||
id
|
||||
name
|
||||
thumbnailUrl
|
||||
const { loading, error, data } = useQuery(
|
||||
gql`
|
||||
query NewItemsSection_NoAuthRequired {
|
||||
newestItems {
|
||||
id
|
||||
name
|
||||
thumbnailUrl
|
||||
}
|
||||
}
|
||||
}
|
||||
`);
|
||||
`
|
||||
);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
|
|
|
@ -142,7 +142,15 @@ const persistedQueryLink = createPersistedQueryLink({
|
|||
});
|
||||
const httpLink = createHttpLink({ uri: "/api/graphql" });
|
||||
const buildAuthLink = (getAuth0) =>
|
||||
setContext(async (_, { headers }) => {
|
||||
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) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Wait for auth0 to stop loading, so we can maybe get a token! We'll do
|
||||
// this hackily by checking every 100ms until it's true.
|
||||
await new Promise((resolve) => {
|
||||
|
|
|
@ -29,7 +29,7 @@ function SpeciesColorPicker({
|
|||
onChange,
|
||||
}) {
|
||||
const { loading: loadingMeta, error: errorMeta, data: meta } = useQuery(gql`
|
||||
query SpeciesColorPicker {
|
||||
query SpeciesColorPicker_NoAuthRequired {
|
||||
allSpecies {
|
||||
id
|
||||
name
|
||||
|
|
Loading…
Reference in a new issue