Browse Source

fix(ui) Use preloaded data instead of redownloading org details (#64492)

Because we initialized the useRef() to false, we didn't ever use the
preloaded data that was fetched. Org details, teams and projects were
going to control silo servers resulting in increased latency.

With these changes OrganizationContext will now always use preloaded
data if it has resolved. Additional requests will still be done if org
slugs are different or the preloaded data hasn't resolved.
Mark Story 1 year ago
parent
commit
1be2440a4c

+ 9 - 11
static/app/actionCreators/organization.tsx

@@ -19,7 +19,7 @@ import parseLinkHeader from 'sentry/utils/parseLinkHeader';
 async function fetchOrg(
   api: Client,
   slug: string,
-  isInitialFetch?: boolean
+  usePreload?: boolean
 ): Promise<Organization> {
   const [org] = await getPreloadedDataPromise(
     'organization',
@@ -31,7 +31,7 @@ async function fetchOrg(
         includeAllArgs: true,
         query: {detailed: 0},
       }),
-    isInitialFetch
+    usePreload
   );
 
   if (!org) {
@@ -53,7 +53,7 @@ async function fetchOrg(
 
 async function fetchProjectsAndTeams(
   slug: string,
-  isInitialFetch?: boolean
+  usePreload?: boolean
 ): Promise<
   [
     [Project[], string | undefined, XMLHttpRequest | ResponseMeta | undefined],
@@ -76,7 +76,7 @@ async function fetchProjectsAndTeams(
           collapse: 'latestDeploys',
         },
       }),
-    isInitialFetch
+    usePreload
   );
 
   const teamsPromise = getPreloadedDataPromise(
@@ -88,7 +88,7 @@ async function fetchProjectsAndTeams(
       uncancelableApi.requestPromise(`/organizations/${slug}/teams/`, {
         includeAllArgs: true,
       }),
-    isInitialFetch
+    usePreload
   );
 
   try {
@@ -117,12 +117,13 @@ async function fetchProjectsAndTeams(
  * @param slug The organization slug
  * @param silent Should we silently update the organization (do not clear the
  *               current organization in the store)
+ * @param usePreload Should the preloaded data be used if available?
  */
 export function fetchOrganizationDetails(
   api: Client,
   slug: string,
   silent: boolean,
-  isInitialFetch?: boolean
+  usePreload?: boolean
 ) {
   if (!silent) {
     OrganizationStore.reset();
@@ -133,7 +134,7 @@ export function fetchOrganizationDetails(
 
   const loadOrganization = async () => {
     try {
-      await fetchOrg(api, slug, isInitialFetch);
+      await fetchOrg(api, slug, usePreload);
     } catch (err) {
       if (!err) {
         return;
@@ -161,10 +162,7 @@ export function fetchOrganizationDetails(
   };
 
   const loadTeamsAndProjects = async () => {
-    const [[projects], [teams, , resp]] = await fetchProjectsAndTeams(
-      slug,
-      isInitialFetch
-    );
+    const [[projects], [teams, , resp]] = await fetchProjectsAndTeams(slug, usePreload);
 
     ProjectsStore.loadInitialData(projects ?? []);
 

+ 2 - 2
static/app/utils/getPreloadedData.ts

@@ -2,12 +2,12 @@ export async function getPreloadedDataPromise(
   name: string,
   slug: string,
   fallback: () => Promise<any>,
-  isInitialFetch?: boolean
+  usePreload?: boolean
 ) {
   try {
     const data = (window as any).__sentry_preload;
     if (
-      !isInitialFetch ||
+      !usePreload ||
       !data ||
       !data.orgSlug ||
       data.orgSlug.toLowerCase() !== slug.toLowerCase() ||

+ 1 - 4
static/app/views/organizationContext.tsx

@@ -83,8 +83,6 @@ export function OrganizationContextProvider({children}: Props) {
   const {organizations} = useLegacyStore(OrganizationsStore);
   const {organization, error} = useLegacyStore(OrganizationStore);
 
-  const hasMadeFirstFetch = useRef(false);
-
   const lastOrganizationSlug: string | null =
     configStore.lastOrganization ?? organizations[0]?.slug ?? null;
 
@@ -110,8 +108,7 @@ export function OrganizationContextProvider({children}: Props) {
     }
 
     metric.mark({name: 'organization-details-fetch-start'});
-    fetchOrganizationDetails(api, orgSlug, false, hasMadeFirstFetch.current);
-    hasMadeFirstFetch.current = true;
+    fetchOrganizationDetails(api, orgSlug, false, true);
   }, [api, orgSlug, organization]);
 
   // Take a measurement for when organization details are done loading and the