Fix data fetching issue on Vercel integration page (#1241)

* Fix data fetching issue on Vercel integration page * Requests should be paused if there is no URL * Loading and data should be updated on failed responses * All loading states should be considered * Move token fetch and early return before loading state update
inngest · Mar 19, 2024 · 07d141d · 07d141d
1 parent 753c530
commit 07d141d
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 8 deletions.
diff --git a/...pp/(organization-active)/(dashboard)/settings/integrations/vercel/useVercelIntegration.ts b/...pp/(organization-active)/(dashboard)/settings/integrations/vercel/useVercelIntegration.ts
@@ -23,7 +23,8 @@ export function useVercelIntegration(): {
   fetching: boolean;
   error: Error | undefined;
 } {
-  const [{ data: environments, fetching, error: environmentError }] = useEnvironments();
+  const [{ data: environments, fetching: isLoadingEnvironments, error: environmentError }] =
+    useEnvironments();
 
   const productionEnvironmentId = useMemo(() => {
     if (!environments) return null;
@@ -44,10 +45,10 @@ export function useVercelIntegration(): {
   // Fetch data from REST and GQL and merge
   const {
     data,
-    isLoading: isLoadingSavedProjects,
+    isLoading: isLoadingAllProjects,
     error,
-  } = useRestAPIRequest<VercelProjectAPIResponse>({ url, method: 'GET' });
-  const [{ data: savedVercelProjects }] = useQuery({
+  } = useRestAPIRequest<VercelProjectAPIResponse>({ url, method: 'GET', pause: !url });
+  const [{ data: savedVercelProjects, fetching: isLoadingSavedProjects }] = useQuery({
     query: GetSavedVercelProjectsDocument,
     variables: {
       environmentID: productionEnvironmentId || '',
@@ -72,7 +73,7 @@ export function useVercelIntegration(): {
 
   return {
     data: vercelIntegration,
-    fetching: fetching || isLoadingSavedProjects,
+    fetching: isLoadingEnvironments || isLoadingAllProjects || isLoadingSavedProjects,
     error: environmentError || error,
   };
 }
diff --git a/ui/apps/dashboard/src/utils/useRestAPIRequest.ts b/ui/apps/dashboard/src/utils/useRestAPIRequest.ts
@@ -12,9 +12,11 @@ import {
 export function useRestAPIRequest<T>({
   url,
   method,
+  pause = false,
 }: {
   url: string | URL | null;
   method: string;
+  pause: boolean;
 }): FetchResult<T> {
   const { getToken } = useAuth();
   const [data, setData] = useState<any>();
@@ -23,17 +25,20 @@ export function useRestAPIRequest<T>({
 
   useEffect(() => {
     async function request() {
-      if (!url) return;
-      setIsLoading(true);
+      if (!url || pause) return;
       const sessionToken = await getToken();
       if (!sessionToken) return; // TODO - Handle no auth
+
+      setIsLoading(true);
       const response = await fetch(url, {
         method,
         headers: {
           Authorization: `Bearer ${sessionToken}`,
         },
       });
       if (!response.ok || response.status >= 400) {
+        setData(null);
+        setIsLoading(false);
         return setError(new Error(response.statusText));
       }
       const data = await response.json();
@@ -42,7 +47,7 @@ export function useRestAPIRequest<T>({
       setIsLoading(false);
     }
     request();
-  }, [getToken, url, method]);
+  }, [getToken, url, method, pause]);
 
   if (isLoading) {
     return {